how to create a overlay marker on map which stays is center of the screen in react-native

Question

hey i am trying to add overlay marker which stays in center of the screen like this even if we scroll or zoom the screen

i tried moving marker from its initial position but it lags behind when we move screen fast. so i want to set marker image in the center of the screen

here is the code what i have done to move marker:

componentDidMount: function() {
    this.fetchData();
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          region: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA
          }
        });
      },
    );
    this.watchID = navigator.geolocation.watchPosition((position) => {
      const newRegion = {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      }

      this.onRegionChange(newRegion);
    });

  },

  componentWillUnmount: function() {
    navigator.geolocation.clearWatch(this.watchID);
  },

  onRegionChange(region) {
    this.setState({ region });
  },

so how can i overlay a marker image?

Outgrowth

Answer 1

I see two options to solve this issue:

The MapView way

Just add a MapView.Marker with the position of your region variable:

  <MapView
    style={styles.map}
    region={this.state.region}
    onRegionChange={this.onRegionChange.bind(this)}>
    <MapView.Marker
      coordinate={{latitude: this.state.region.latitude, longitude: this.state.region.longitude}}
    />
  </MapView>

In my opinion this is the "correct" way, though I face the issue, that the Marker updates its position with a small delay: As I move the map, it stays on its position in respect to the map and a after a few hundred milliseconds it jumps back to the center of the map (suggestions on how to debug or fix this issue are very welcome).

The second option overcomes this issue

The Icon way

Put your MapView inside a View, that fills the whole space. Inside the View add a centered Icon and your map:

<View style={StyleSheet.absoluteFillObject}>
  <Icon name="map-marker" 
    style={{    
      zIndex: 3,
      position: 'absolute',
      marginTop: -37,
      marginLeft: -11,
      left: '50%',
      top: '50%'}} 
    size={40}
    color="#f00" />
  <MapView
    style={StyleSheet.absoluteFillObject}
    region={this.state.region}
    onRegionChange={this.onRegionChange.bind(this)}>
  </MapView>
</View>

Note the use of zIndex to overlay it in front of the MapView and marginTop/marginLeft which can be used to place the needletip of the marker on the center.

Phebe

I think the second solution works better though the first one is a more correct way. A recommendation for the second solution: You can give justifyContent: "center", alignItems: "center" to the View that wraps the Icon and the MapView, So you don't have to give those four lines of style to your Icon (I mean the last 4 lines of the Icon style, marginTop, marginLeft, left and top. It also doesn't get messed on different devices. – Homburg

The second solution is a great one, I believe. After studying Uber and another app Bolt, they seem to go by the second approach. They don't update the marker as the region is changing, instead, they fixed an Animated Icon at the center of the map. – Willson

however, the marker changes position on zoom in and zoom out as the region changes. How to keep the marker always pointing to the initial location on zoom in and out? – Murton