How to add markers / annotations programatically with mapbox and react native

Question

I'm new to react native and cannot find any documentation on how to add markers / annotations programatically to the map using mapbox.

We are using geofire query, which triggers when a point of interest is withing range.

Inside the trigger I want to insert the marker.

All the documentation I found about it is this: https://www.mapbox.com/help/first-steps-react-native-sdk/ which adds the marker during initialization and render.

Here is my code so far

    render () {
        const {navigate} = this.props.navigation;
        return (
          <View style ={{flex: 1, position: 'relative'}}>
            <Mapbox.MapView
                styleURL={Mapbox.StyleURL.Dark}
                zoomLevel={15}
                centerCoordinate={[11.256, 43.770]}
                ref={map => { this.map = map; }}
                style={{flex: 1}}>
                {this.renderAnnotations([11.256, 43.770])}
            </Mapbox.MapView>


            <View style={styles.menuMainContainer}>

                {this.state.menuStatus ? <Animatable.View style={styles.menuSubcontainer}  animation={"bounceIn"}>
                    <View style={{justifyContent: 'space-between', justifyContent: 'center', flex: 1, marginBottom: 50}}>
                      <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
                        <MenuOptions imageSource={Images.lightIcon} menuTag="trash" name="Basureros"/>
                        <MenuOptions imageSource={Images.lightIcon} menuTag="holes" name="Huecos"/>
                      </View>
                      <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
                        <MenuOptions imageSource={Images.lightIcon} menuTag="hydrants" name="Hidrantes"/>
                        <MenuOptions imageSource={Images.lightIcon} menuTag="parking" name="Estacionamiento"/>
                      </View>
                      <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
                        <MenuOptions imageSource={Images.lightIcon} menuTag="others" name="Otros"/>
                      </View>
                    </View>
                  </Animatable.View> : null
                }
            </View>

            <View style ={styles.bottomContainer}>

              <TouchableOpacity  style={styles.buttons}>
                <Text style={styles.buttonText}>Boton_1</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress ={this._takePhotofromCamera} style={styles.buttons}>
                <Text style={styles.buttonText}>Agregar Reportes</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.buttons} onPress = {() => this.toggleMenuStatus()}>
                <Text style={styles.buttonText}>Boton_3</Text>
              </TouchableOpacity>
            </View>

      </View>

        )
      }
    }


    renderAnnotations = (location) =>{
        console.log('entro renderan2')
        return(
          <Mapbox.PointAnnotation
            key='pointAnnotation'
            id='pointAnnotation'
            coordinate={location}>

            <View style={styles.annotationContainer}>
              <View style={styles.annotationFill} />
            </View>
            <Mapbox.Callout title='Look! An annotation!' />
          </Mapbox.PointAnnotation>


      )
      }

    this.state.geoQuery.on("key_entered", function(key, location, distance) {
           console.log(key + " is located at [" + location + "] which is within the query (" + distance.toFixed(2) + " km from center)");
this.renderAnnotations();
})

I'm getting: Error: this.renderAnnotations is not a function

I also tried copying the entire function inside this.state.geoQuery, no error, but markers are not showing either.

this.state.geoQuery.on("key_entered", function(key, location, distance) {
       console.log(key + " is located at [" + location + "] which is within the query (" + distance.toFixed(2) + " km from center)");
       return(
         <Mapbox.PointAnnotation
           key='pointAnnotation'
           id='pointAnnotation'
           coordinate={location}>

           <View style={styles.annotationContainer}>
             <View style={styles.annotationFill} />
           </View>
           <Mapbox.Callout title='Look! An annotation!' />
         </Mapbox.PointAnnotation>
     )});

Thanks

Ricardo Chen He · Accepted Answer · 2018-02-24T08:26:43.023

After chatting directly with Mapbox support, they told me PointAnnotation is legacy and should use ShapeSource and SymbolLayer instead, it have a LOT better performance. Here is how to do it:

    <Mapbox.MapView
                key='mainmap'
                textureMode={true}
                pitch={60}
                ref={(c) => this._map = c}
                onPress={this.onPress}
                styleURL={Mapbox.StyleURL.Light}
                zoomLevel={17}
                maxZoomLevel={20}
                minZoomLevel={15}
                centerCoordinate={this.initCenterLocation()}
                style={{ flex: 1 }}
                showUserLocation={true}
                userTrackingMode={Mapbox.UserTrackingModes.FollowWithHeading}
            >
                <Mapbox.ShapeSource
                    id='exampleShapeSource'
                    shape={this.state.featureCollection}
                    onPress={(feature) => this.onShapeSourceLayer(feature)}
                    images={{ assets: ['pin', 'm1_marker', 'm2_marker', 'm3_marker', 'm4_marker'] }}>
                    <Mapbox.SymbolLayer id='exampleIconName' minZoomLevel={1} style={stylesIcon.icon} />
                </Mapbox.ShapeSource>
            </Mapbox.MapView>

Insert new annotations / points:

    this.setState({
            featureCollection: Mapbox.geoUtils.addToFeatureCollection(
                this.state.featureCollection,
                Mapbox.geoUtils.makeFeature({ type: 'Point', coordinates: location }, { icon: iconImage, key: key }),
            ),
        });

On annotation Press function:

onShapeSourceLayer(e) {

    const feature = e.nativeEvent.payload;

    this.setState({
        annotationKey: feature.properties.key
    }, function () {

        this.togglePostModal(true)
    });

}

Hi Ricardo, could you post the full code, like what is `iconImage`, are you able to have different images for each points? Thanks — anni, Jun 13 '18 at 15:31
Ricardo can you answer this question https://stackoverflow.com/questions/55036420/how-to-show-hide-raster-layer-visibility-property-visible-none-at-run-time-in — Khurshid Ansari, Mar 07 '19 at 09:50
I am trying to mark a single point using SymbolLayer but all the examples I have seen work with more than 1 points and hence are not helpful for me. How can I pass one particular coordinate to be marked? https://stackoverflow.com/questions/63437137/alternative-for-pointannotation — , Aug 16 '20 at 12:58

score 2 · Answer 2 · answered Mar 09 '19 at 10:07

2

Simple :

constructor() {
   this.state = {
      myMarker: [0, 0]//intial 0
   };
}

<Mapbox.MapView key='mainmap'> 
    <Mapbox.PointAnnotation
       key="key1"
       id="id1"
       title="Test"
       coordinate={this.state.myMarker}>
    </Mapbox.PointAnnotation>
</Mapbox.MapVie>


update latitude and longitude : 
   updateMyMarker(data){
   this.setState({myMarker: [data.Lng, data.Lat]})
}

answered Mar 09 '19 at 10:07

Khurshid Ansari

4,638
2
33
52

I am using this. The pointer shows up but the title doesnt. How can I add text to the pointer? – Aug 11 '20 at 12:52
which version of react-native-mapboxgl? – Khurshid Ansari Aug 11 '20 at 13:14
I had to add the Callout component to show the title and it worked. But can you look into this? https://stackoverflow.com/questions/63437137/alternative-for-pointannotation – Aug 16 '20 at 12:54

sebastianf182 · Answer 3 · 2018-01-22T06:39:36.843

0

I user react-native-maps so I wouldn't know exactly but what you are asking it is exactly in the documentation: https://www.mapbox.com/help/first-steps-react-native-sdk/#add-an-annotation

Edit: Your error is coming here right?

 this.state.geoQuery.on("key_entered", function(key, location, distance) {
           console.log(key + " is located at [" + location + "] which is within the query (" + distance.toFixed(2) + " km from center)");
this.renderAnnotations();
})

If so, probably the issue is that "this" is out of scope from your function when it triggers.

Try this:

 this.state.geoQuery.on("key_entered", (key, location, distance) => {
           console.log(key + " is located at [" + location + "] which is within the query (" + distance.toFixed(2) + " km from center)");
this.renderAnnotations();
})

edited Jan 22 '18 at 06:39

answered Jan 21 '18 at 19:16

sebastianf182

9,844
3
34
66

When i call this.renderAnnotations i get "it's not a function" I'll update the post with the code – Ricardo Chen He Jan 21 '18 at 19:51
Im getting syntax error, I have no clue about this kind of syntaxis /App/Containers/MainScreen.js: Unexpected token, expected , (295:74) 293 | }); 294 | > 295 | this.state.geoQuery.on("key_entered", () => (key, location, distance){ { | ^ 296 | console.log(key + " is located at [" + location + "] which is within the query (" + distance.toFixed(2) + " km from center)"); 297 | this.renderAnnotations(); 298 | }}) – Ricardo Chen He Jan 22 '18 at 06:38
My bad. Had a typo. See now. – sebastianf182 Jan 22 '18 at 06:39
Thanks for your quick reply, now it enters the function, however it is still not showing the marker, it behaves exactly like pasting the function code inside – Ricardo Chen He Jan 22 '18 at 07:03

How to add markers / annotations programatically with mapbox and react native

3 Answers3

Linked