This multi-part React tutorial will be covering how to use Mapbox to:

  • display a map
  • search an address
  • add markers
  • display a popup when clicking on a marker

and even removing a marker.

To not overwhelm people with a bunch of code, I will be splitting it up into three parts:

We will be using create-react-app for our base React app and using the react-map-gl and react-mapbox-gl-geocoder libraries for our map and geocoder respectively. As an option, I will be using reactstrap for styling (in case you are unfamiliar, reactstrap is Bootstrap for React).

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 project and install dependencies

    First, we will start by setting up our project.npx create-react-app mapbox-project

    cd mapbox-project
    npm i react-map-gl react-mapbox-gl-geocoder bootstrap reactstrap
    npm start

    Step 2. Get a Mapbox key

    In order to use Mapbox, you will need an API key. Go to and click on Sign In.

    Under the signin form, click on Sign Up for Mapbox. Once you are done signing up, you should be taken to your dashboard. If you weren’t automatically given a token, you can create one by clicking Create a token.

    creating a Mapbox access token

    Step 3. Create a React Map component

    Now that we have our API key, let’s start coding. First, we will focus on simply displaying a map thanks to the react-map-gl library. It comes with a ReactMapGL component which accepts a series of props.

    The obvious one is your API key but it also include:

    • the viewport (the latitude/longitude coordinates to center the map + zoom)
    • mapStyle (Mapbox offers a series of different styles for their map including streets but also light, dark, satellite, …)
    • onViewportChange (when the user drags the map, the viewport is updated)

    I am also going to include width and height to better display it.

    After saving, you should see a map centered to your viewport. Fairly straightforward!

    Step 4. Create a React Geocoder component

    Let’s continue by adding our Geocoder. Once again, we get a nice out-of-the-box component thanks to react-mapbox-gl-geocoder.

    import Geocoder from 'react-mapbox-gl-geocoder';

    Like ReactMapGL, it takes your Mapbox API key and viewport. It also accepts queryParams which allows me to narrow the results returned to a particular country (for this tutorial, let’s say I am only interested in Canadian addresses).


    In addition, it accepts an onSelected function which in our case, we want it to center our map to an address we selected.

    onSelected = (viewport, item) => {      

    When you select an address, it returns the viewport and the item selected. By updating our state to this new viewport, the map will automatically re-center to this new location.

    This is the end result:


    The following libraries are mentioned in this tutorial:





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


    After saving, you will now have a map and a geocoder. This latter allows you to look up addresses and on selection, to update the map to center on this point.

    This is a very nice start.

    For more Mapbox tutorials in React:

    How to display Markers on a Mapbox Map in React
    This tutorial will be covering how to create markers on a Mapbox map for a React app. We will be using the react-map-gl library.
    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.