Guide to Adding Point Annotations on Mapbox View

Point annotations can be added to your map very easily. In the previous article, we looked at how to add Mapbox map view to our React Native application. In this article, we would be picking up from there and I would be showing you how to add an annotation point on the map. To get started, we would open the ReactNativeMapbox project from the previous article.
Next, open App.js file. You should see the following content

import React from "react";
import { View } from "react-native";
import MapboxGL from "@react-native-mapbox-gl/maps";


MapboxGL.setAccessToken('MAPBOX_TOKEN_GOES_HERE');

export default App = () => {

  return (
    <View style={{flex: 1, height: "100%", width: "100%" }}>
      <MapboxGL.MapView
        styleURL={MapboxGL.StyleURL.Street}
        zoomLevel={16}
        centerCoordinate={[3.3362400, 6.5790100]}
        style={{flex: 1}}>
          <MapboxGL.Camera
            zoomLevel={16}
            centerCoordinate={[3.3362400, 6.5790100]}
            animationMode={'flyTo'}
            animationDuration={0}
          >
          </MapboxGL.Camera>
      </MapboxGL.MapView>
    </View>
  )
}

Next, run the app on the emulator to verify the map still shows up. Run the follow command on your terminal to run the app on your ios simulator

yarn ios

You should see the app running on your ios simulator with a beautiful map.

Next, we would be adding a point annotation on the map. To do that, let's create a function to show our annotation point. The code looks like this

const renderAnnotations = () => {
    return (
      <MapboxGL.PointAnnotation
        key="pointAnnotation"
        id="pointAnnotation"
        coordinate={[3.3362400, 6.5790100]}>
        <View style={{
                  height: 30, 
                  width: 30, 
                  backgroundColor: '#00cccc', 
                  borderRadius: 50, 
                  borderColor: '#fff', 
                  borderWidth: 3
        		}} />
      </MapboxGL.PointAnnotation>
    );
  }

From the code above, we are using the PointAnnotation Component from Mapbox to render the point on the map. The component takes some props. One of the prop is the coordinate prop. This coordinate props shows us where the point would be located on the map. In most cases, it is the same coordinates you have in the MapView Component. We also added a View component and styled it as our point indicator.

Next, we would call this function in the MapView component as shown below

 <MapboxGL.MapView
        styleURL={MapboxGL.StyleURL.Street}
        zoomLevel={16}
        centerCoordinate={[3.3362400, 6.5790100]}
        style={{flex: 1}}>
          <MapboxGL.Camera
            zoomLevel={16}
            centerCoordinate={[3.3362400, 6.5790100]}
            animationMode={'flyTo'}
            animationDuration={0}
          >
          </MapboxGL.Camera>
          {renderAnnotations()} // => function called here
      </MapboxGL.MapView>

Putting everything together, this is the entire App.js component with point annotation

import React from "react";
import { View } from "react-native";
import MapboxGL from "@react-native-mapbox-gl/maps";


MapboxGL.setAccessToken('MAPBOX_TOKEN_GOES_HERE');

export default App = () => {

  const renderAnnotations = () => {
    return (
      <MapboxGL.PointAnnotation
        key="pointAnnotation"
        id="pointAnnotation"
        coordinate={[3.3362400, 6.5790100]}>
        <View style={{
                  height: 30, 
                  width: 30, 
                  backgroundColor: '#00cccc', 
                  borderRadius: 50, 
                  borderColor: '#fff', 
                  borderWidth: 3
                }} />
      </MapboxGL.PointAnnotation>
    );
  }

  return (
    <View style={{flex: 1, height: "100%", width: "100%" }}>
      <MapboxGL.MapView
        styleURL={MapboxGL.StyleURL.Street}
        zoomLevel={16}
        centerCoordinate={[3.3362400, 6.5790100]}
        style={{flex: 1}}>
          <MapboxGL.Camera
            zoomLevel={16}
            centerCoordinate={[3.3362400, 6.5790100]}
            animationMode={'flyTo'}
            animationDuration={0}
          >
          </MapboxGL.Camera>
          {renderAnnotations()}
      </MapboxGL.MapView>
    </View>
  )
}

You should see the map on the simulator with a point at the center. If not, you can run yarn ios or just reload the simulator. The simulator should look like this

And that is it!!!. 🎉 🎉 🎉 🎉 🎉 🎉. In my next article, I would be showing you how you can add two points on the map connected by a polyline.

To check out the previous article, Click here

PART I Ultimate Guide to integrating Mapbox with React Native

PART III - Guide to adding polylines to Mapbox