Rendering custom annotation with following view on Mapbox in react native

Question

How can I achieve this using Mapbox and Annotations in React Native. I have tried nesting the annotations, rendering as polyline but am not getting the desired result. Can anyone help with resolving this?

I don't have much idea but you can check this link for more details https://github.com/mapbox/react-native-mapbox-gl/blob/master/API.md#annotations — Nisarg Thakkar, Aug 09 '17 at 13:40
Check this post, I managed to get it working. https://stackoverflow.com/questions/48370642/how-to-add-markers-annotations-programatically-with-mapbox-and-react-native/48370713?noredirect=1#comment83738699_48370713 — Ricardo Chen He, Jan 23 '18 at 16:22

score 1 · Accepted Answer · edited Jan 23 '18 at 18:26

Check out this working code. Finally was able to figure out the correct way to do it :

Inside my render() :

<Mapbox.MapView
    ref={map => { this.map = map; }}
    styleURL={Mapbox.StyleURL.Basic}
    zoomLevel={15}
    centerCoordinate={[11.256, 43.770]}
    style={{flex: 1}}
    showUserLocation={true}
    userTrackingMode={Mapbox.UserTrackingModes.Follow}>

    {this.state.markers.map(marker => (
    <Mapbox.PointAnnotation
      key= {marker.title}
      id= {marker.title}
      coordinate={marker.coordinates}>

    <View style={styles.annotationContainer}>
      <View style={styles.annotationFill} />
    </View>
    <Mapbox.Callout title={marker.title} />
    </Mapbox.PointAnnotation>
    ))}

</Mapbox.MapView>

Function to update this.state.markers :

_getAnnotations = (key, location) => {
    let newelement = {
      title: key,
      coordinates: location,
    };
    this.setState(prevState => ({
      markers: [...prevState.markers, newelement]
    }))
}

Geoquery trigger :

this.state.geoQuery.on("key_entered", (key, location, distance) => {
    this._getAnnotations(key,location);
});

Rendering custom annotation with following view on Mapbox in react native

1 Answers1