Create a responsive map with Mapbox in React

In one of my personal projects I wanted to implement a feature that would allow users to pin their travel destinations using dynamic map, with a React frontend and Ruby on Rails for the backend.

Let's dive in and look at how to create a fully responsive map with custom Markers using Mapbox in our React application.

SETTING UP

Using Mapbox requires an access token. Let's see how you can obtain your own Mapbox API key (it's super easy)

Step 1
In order to be able to use MapBox, we need to create a free Mapbox account to get an accessToken to be able to use the map on your website.

Go to https://www.mapbox.com/signup/ and create a Mapbox account.

Step 2
In order to get the token you will need to provide your billing information, but don't worry, Mapbox offers you 50,000 map loads free per month, which is very generous for doing all the local development as well as publishing small personal projects.

Create a new token using the blue button as below after signup, then copy it to the clipboard by clicking on the button.

Step 3.
Make sure you protect your token! Never post your token anywhere, or leave it unprotected. You don't want anyone taking advantage of your token.
To protect your token, in the root of your project, create an .env.local file and add your token to it:

/* .env.local */
REACT_APP_MAPBOX_ACCESS_TOKEN=YOUR_TOKEN_HERE

INSTALLATION
Using react-map-gl requires react >= 16.3.

In order to include MapBox into our React application, we will use react-map-gl, a set of React components created by engineers at Uber for Mapbox GL JS that can be easily included in our React application.

npm install --save react-map-gl mapbox-gl

STYLING
The current Mapbox-gl release requires its stylesheet to be included at all times. The marker, popup and navigation components in react-map-gl also need the stylesheet to work properly.

// app.js
import 'mapbox-gl/dist/mapbox-gl.css';

Time to DISPLAY MAP

To add a map, first we need to import the map into our component, in my case it is src/Map.js

import ReactMapGL from "react-map-gl";

Next, we will initialize default state for our map with the required coordinates: latitude, longitude, the size of the map(width, height), and zoom for the viewport.

 const [viewport, setViewport] = useState({
    latitude: 50.5821,
    longitude: 7.0216,
    width: "80vw",
    height: "80vh",
    zoom: 3,
  });

These values will all change as our user interacts with the map.

We are now ready to setup the MapGL component in the render method

<ReactMapGL
        {...viewport}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        mapStyle="mapbox://styles/cl9fv02ny000h14o0576ux3mj"
        onViewportChange={(viewport) => {
          setViewport(viewport);
        }}
>
</ReactMapGl>

mapStyle is used to select the type of map you want to render. You can create your own style through Mapbox studio or pick any of the predefined styles, copy the map style link and insert your mapStyle

onViewportChange is required in order to update viewport with new coordinates when a user interacts with the map

Save your changes. Now you should be able to see your interactive new Mapbox map!

---

Now, let's add some Place Markers on the map!

First, we need to import Marker at the top of our component.

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

The fun part is, you can you any icon or image as your Markers, I found the icon I want to use and imported it as well

import marker from "../assets/marker.png";

My custom backend holds locations data, which contains longitude and latitude, and I want to create a marker for each location.

The render below is modified to include the marker display in the form of a Pin Icon based on the locations data.

<ReactMapGL
        {...viewport}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        mapStyle="mapbox://styles/cl9fv02ny000h14o0576ux3mj"
        onViewportChange={(viewport) => {
          setViewport(viewport);
        }}
      >
        {locations.map((location) => (
          <Marker
            key={location.id}
            latitude={location.latitude}
            longitude={location.longitude}
          >
              <img src={marker} alt="place marker" />
          </Marker>
        ))}
</ReactMapGL>

...and just like that we have our beautiful interactive map with custom markers!

We looked at how to display a map with markers at specific coordinates in a React Application, using MapBox GL JS library through the components provided by the react-map-gl. This library provides a lot of functionalities and styling around maps and can be explored further depending on your interest and requirements.

Next time we will look at how to display Popups, navigation control and display a sidebar with coordinates of the map and its zoom level.