CODEWITHSUNDEEP
androidreact-nativemapboxmapbox-gl-jsmapbox-android
akshay2739
akshay2739

Reputation: 335

React Native MabBox MarkerView issue

I am working on a project where i need to show at least 10 to 20 markers on a map at a time. Project is ejected from expo and as Google Map is paid i am using MapBox.

To add map in react native i am using @react-native-mapbox-gl/maps": "^8.1.0-rc.9, But docs are not that good so i tried from one medium blog to add markers. But it has some malfunctioning like marker is showing but if i zoom out than marker moves too. Let say right now marker is at Mumbai(India) but if i zoom out it will be in Africa.

Here is what i have tried

                <MapboxGL.MapView
                    style={styles.map}
                    logoEnabled={false}
                    localizeLabels={true}
                >
                    <MapboxGL.Camera
                        zoomLevel={18}
                        animationMode={'flyTo'}
                        animationDuration={1100}
                        centerCoordinate={[73.20812, 22.29941]}
                    />
                    <View>
                        <MapboxGL.MarkerView id={'hello'} coordinate={[73.20812, 22.29941]}>
                            <View>
                                <Entypo
                                    name='location-pin'
                                    size={24}
                                    color='black'
                                />
                            </View>
                        </MapboxGL.MarkerView>
                        <MapboxGL.MarkerView
                            id={'hello'}
                            coordinate={[73.20813, 22.29941]}
                        >
                            <View>
                                <Entypo name='location-pin' size={24} color='black' />
                            </View>
                        </MapboxGL.MarkerView>
                        <MapboxGL.MarkerView id={'hello'} coordinate={[73.20814, 22.29941]}>
                            <View>
                                <Entypo name='location-pin' size={24} color='black' />
                            </View>
                        </MapboxGL.MarkerView>
                        <MapboxGL.MarkerView id={'hello'} coordinate={[73.20815, 22.29941]}>
                            <View>
                                <Entypo name='location-pin' size={24} color='black' />
                            </View>
                        </MapboxGL.MarkerView>
                        <MapboxGL.MarkerView id={'hello'} coordinate={[73.20816, 22.29941]}>
                            <View>
                                <Entypo name='location-pin' size={24} color='black' />
                            </View>
                        </MapboxGL.MarkerView>
                    </View>
                </MapboxGL.MapView>

Upvotes: 2

Views: 3905

Answers (2)

tomstan11
tomstan11

Reputation: 1237

If you want to use a MarkerView you can get around that problem by delaying displaying the MarkerViews using a setTimeOut, 500 milliseconds worked for me.

useEffect(() => {
  if (displayMap) {
    setTimeout(() => {
      setDisplayMarkers(true);
    }, 500);
  } else {
    setDisplayMarkers(false);
  }}, [displayMap]);

Upvotes: 0

akshay2739
akshay2739

Reputation: 335

I have just made one change and now it is working fine.

I have changed MapboxGL.MarkerView to MapboxGL.PointAnnotation and now while zooming out marker remains fixed.

Upvotes: 3

Related Questions