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!

Want to become a Next.js pro?

I am putting together an online course on Next.js. If you are interested, sign up and I will keep you updated.

    We won't send you spam. Unsubscribe at any time.

    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) => {
            tempMarker: {
              name: item.place_name,

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

    { tempMarker &&
          <div className="marker temporary-marker"><span></span></div>

    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 (
          <div className="marker">
            <span><b>{index + 1}</b></span>

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

    {, index) => {

    Here is the end result:


    The following libraries are useful for this tutorial:





    And here is the link to Mapbox and it's examples:


    This is it for Part 2! So far, we have displayed a map, added a geocoder and saved addresses to be displayed as markers.

    Just to recap, we have learned how to display a Mapbox map and geocoder in React. Next, we will go over how to create popups and remove markers on a Mapbox map.

    For more Mapbox tutorials in React:

    How to display a Mapbox Map and Geocoder in React
    This tutorial will be covering how to use Mapbox to display a map and a geocoder in React with the react-map-gl and react-mapbox-gl-geocoder libraries.
    How to display Popups on a Mapbox Map in React
    This tutorial will be covering how to display popups on a Mapbox map in a React app with the react-map-gl library.