How to display Markers on a Mapbox Map in React

This is part 2 of a multi-part React tutorial on Mapbox.

In part 1, we simply focus on displaying a map and adding a geocoder to look up addresses. We even managed to re-center our map to the selected address.

Note: To learn how to display a Mapbox map and a geocoder in React, don't hesitate to check it out!

While very nice, a map doesn’t quite feel as complete without markers to show us what’s important.

So let’s get started!

Step 1. Create and display a marker component

We have our map and our geocoder. We can look up addresses and select one.

Let’s now display a marker on that particular address. Our react-map-gl library also comes with a handy Marker component.

import ReactMapGL, { Marker } from 'react-map-gl';

This component will allow us to display a marker if we have selected an address. In our state, we will add a tempMarker set to null and in our onSelected function, we will set tempMarker to the latitude/longitude it returned.

onSelected = (viewport, item) => {
      this.setState({
        viewport,
        tempMarker: {
          name: item.place_name,
          longitude: item.center[0],
          latitude: item.center[1]
        }
      })
}

Then inside our ReactMapGL component, we can display our Marker component:

{ tempMarker &&
    <Marker
      longitude={tempMarker.longitude}
      latitude={tempMarker.latitude}>
      <div className="marker temporary-marker"><span></span></div>
    </Marker>
}

Our Marker component takes a latitude and a longitude along with its content. You can style your marker however you want. I am simply going to use an empty div with some CSS to make it look like a normal marker.

Here is the CSS I am using to style my marker:

Step 2. Add Markers to your Mapbox map

This is good, but everytime I select an address, the marker changes. What if I want to save my previous results? Can I have more than one marker? The answer is yes.

First, I am going to include an add button beside my geocoder. When a user looks up an address and is satisfied with the placement of the marker, it can be made permanent.

<Button color="primary" onClick={this.add}>Add</Button>

Then, in our add function, we simply add our tempMarker to our markers array and set tempMarker back to null.

add = () => {
    var { tempMarker } = this.state
    this.setState(prevState => ({
       markers: [...prevState.markers, tempMarker],
       tempMarker: null
     }))
}

Second, I am going to display a marker for every addresses we saved.

I created a CustomMarker component which 1) will number our marker and 2) not use the temporary-marker class so we can differentiate our permanent vs temporary markers based on colour.

const CustomMarker = ({index, marker}) => {
  return (
    <Marker
      longitude={marker.longitude}
      latitude={marker.latitude}>
      <div className="marker">
        <span><b>{index + 1}</b></span>
      </div>
    </Marker>
)};

Then again, inside the ReactMapGL component, I will use CustomMarker to display our markers.

{
  this.state.markers.map((marker, index) => {
    return(
      <CustomMarker
        key={`marker-${index}`}
        index={index}
        marker={marker}
      />
     )
  })
}

Here is the end result: