fitToSuppliedMarkers with edgePadding will move Google logo

[manufunk]

Summary

I've implemented the map and I'm using fitToSuppliedMarkers to zoom to all my markers. However as I have some content on the bottom of the map as overlay, I would like to have some padding for the fitToSuppliedMarkers. I figured out that the option edgePadding can be used for that.

Android:
However if I add padding to bottom, this will also put a padding to the Google logo. Also the other map elements like the showsMyLocationButton will move if top padding is set as well. Seems like it is behaving like a normal map padding.

iOS:
Is there any option to have a similar function because currently it looks really bad as markers are very close to the map edges :(

I just used the sample code and added edgePadding

Reproducible sample code

import React from "react";
import { StyleSheet, View, Dimensions } from "react-native";
import MapView, { Marker } from "react-native-maps";

const { width, height } = Dimensions.get("window");

const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const SPACE = 0.01;

const markerIDs = ["Marker1", "Marker2", "Marker3", "Marker4", "Marker5"];
const timeout = 4000;
let animationTimeout: any;

class FocusOnMarkers extends React.Component<any, any> {
  map: any;
  constructor(props: any) {
    super(props);

    this.state = {
      a: {
        latitude: LATITUDE + SPACE,
        longitude: LONGITUDE + SPACE,
      },
      b: {
        latitude: LATITUDE - SPACE,
        longitude: LONGITUDE - SPACE,
      },
      c: {
        latitude: LATITUDE - SPACE * 2,
        longitude: LONGITUDE - SPACE * 2,
      },
      d: {
        latitude: LATITUDE - SPACE * 3,
        longitude: LONGITUDE - SPACE * 3,
      },
      e: {
        latitude: LATITUDE - SPACE * 4,
        longitude: LONGITUDE - SPACE * 4,
      },
    };
  }

  componentDidMount() {
    animationTimeout = setTimeout(() => {
      this.focus1();
    }, timeout);
  }

  componentWillUnmount() {
    if (animationTimeout) {
      clearTimeout(animationTimeout);
    }
  }

  focusMap(markers: any, animated: any) {
    console.log(`Markers received to populate map: ${markers}`);
    this.map.fitToSuppliedMarkers(markers, {
      animated: true,
      edgePadding: {
        top: 100,
        right: 100,
        bottom: 200,
        left: 100,
      },
    });
  }

  focus1() {
    animationTimeout = setTimeout(() => {
      this.focusMap([markerIDs[1], markerIDs[4]], true);

      this.focus2();
    }, timeout);
  }

  focus2() {
    animationTimeout = setTimeout(() => {
      this.focusMap([markerIDs[2], markerIDs[3]], false);

      this.focus3();
    }, timeout);
  }

  focus3() {
    animationTimeout = setTimeout(() => {
      this.focusMap([markerIDs[1], markerIDs[2]], false);

      this.focus4();
    }, timeout);
  }

  focus4() {
    animationTimeout = setTimeout(() => {
      this.focusMap([markerIDs[0], markerIDs[3]], true);

      this.focus1();
    }, timeout);
  }

  render() {
    return (
      <View style={styles.container}>
        <MapView
          provider={this.props.provider}
          ref={(ref) => {
            this.map = ref;
          }}
          style={styles.map}
          initialRegion={{
            latitude: LATITUDE,
            longitude: LONGITUDE,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
          }}
        >
          <Marker identifier="Marker1" coordinate={this.state.a} />
          <Marker identifier="Marker2" coordinate={this.state.b} />
          <Marker identifier="Marker3" coordinate={this.state.c} />
          <Marker identifier="Marker4" coordinate={this.state.d} />
          <Marker identifier="Marker5" coordinate={this.state.e} />
        </MapView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: "flex-end",
    alignItems: "center",
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default FocusOnMarkers;

Steps to reproduce

See code

Expected result

Logo will stay and only marker zoom will have the padding

Actual result

Logo will be moved by the padding value

React Native Maps Version

1.3.2

What platforms are you seeing the problem on?

Android

React Native Version

0.70.5

What version of Expo are you using?

SDK 47

Device(s)

Android Emulator

Additional information

No response

[Salman-Pixel]

Try setting a timeout for the delay in loading the routes of the destination, this will solve half of your problem.

    useEffect(() => {
        if (!origin || !destination) {return;}
        
        setTimeout(() => {
            mapRef.current.fitToSuppliedMarkers(["origin", "destination"], {
                edgePadding: { top: 50, right: 50, bottom: 50, left: 50 },
            });

        }, 500);


    

}, [origin, destination]);

[react-native-maps-bot]

🎉 This issue has been resolved in version 2.0.0-beta.12 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[monholm]

Hi @manufunk 👋

I've just released v2.0.0-beta.12 that should fix both of the bugs put forth in this issue. edgePadding is now supported on iOS and shouldn't move any UI elements on Android.

I hope you are okay with me closing this for now, and if you find any issues using the newest version, feel free to open a new issue 👍