Intro to Using Mapbox With React JS

As a geologist switching careers into the tech world, I was always looking for a way to incorporate my love of maps with my coding projects. There is just something about seeing a bunch of useful data plotted on a map that really appeals to me. Whether it is looking at geologic data, weather, COVID-19 cases or voting trends, maps just convey certain information better than other media can.

Mapbox is a component that allows developers to create interactive, customizable vector maps that can be accessed on the web. Some companies that use Mapbox include Facebook, Uber, The Weather Channel, Snapchat and Strava.

Mapbox GL JS

Mapbox GL JS is an open source Javascript library that was created to incorporate Mapbox into web applications. It is part of a cross-platform ecosystem called Mapbox GL which is compatible with applications on Android, iOS, macOS Qt, and React Native. Mapbox GL JS allows us to add Mapbox to our React app without too much hassle.

Getting Started

If you don’t have a react application created already, in the desired folder you want to store the app, input this in your command line interface:

create-react-app <app-name>

Next, cd into the folder where you created the project and open it up with your prefered text editor. To install the Mapbox GL JS library, input this line into the command line interface:

npm install react-map-gl

To be able to access to Mapbox, first we need to create an account at Mapbox.com. Next, click on “Tokens” in the navigation bar at the top of the page. This will direct you to a page that displays your access tokens. Here we need to click on “Create a token” to make a new one. We will be copying and pasting this token in our React code to be able to get our Mapbox component in our app.

For simplicity sake, in this example we are just going to add Mapbox in our “App.js” set up as a class component. At the top of the file, we need to include this line to import the map component into our app:

import ReactMapGL from 'react-map-gl'

At this point, your file should look something like this:

We also need to add the link for the .css file that will be needed for our map. Add this to the head in your index.html file:

<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />

To render the map component, we need to add this to our JSX:

<ReactMapGL></ReactMapGL>

The ReactMapGL component has has a lot of attributes that we can modify and there are a few that are required in order to get the basic map functionality working.

The first attribute we need to modify to get things working is our access token. This is the token that we applied for earlier using our Mapbox account. This In this case, I just copy and pasted it as a constant and assigned it to the ReactMapGL attribute called “mapboxApiAccessToken”. This is crucial. In a real situation you would want to hide your token somewhere on your backend so it would be harder for a stranger to access it.

The next attribute we need is called mapStyle. This is this is how your map is going to appear on the screen. The attribute just requires a string of a URL pointing to the style. We are going to store this string in a constant and call it in our attribute. There are a lot of different pre-built styles that you can use for your map from street textures to satellite images to terrain types. You can also build your own style using Mapbox studio. Below is a sample of a few different map styles.

The third attribute we need is going to be called from the state in our class component. Mapbox searches for a keyword called “viewport” to set the latitude and longitude of the center of what is rendered on the map, the size of the box the map is rendered in, as well as the zoom factor.

So in the state of our component we are going to set the initial values for “viewport”.

Next we are going to add this attribute to to the ReactMapGL component. I addition to that we are going to size the div that our map is sitting in. Our file should now look something like this:

If we run npm start, our app should look like the image below. We should have a rendering of the map centered on initial latitude and longitude we defined in state.

At this point we have rendered an image of a map on to our app centered at a specific latitude and longitude. We can add some interactivity to the map by using another attribute called “onViewportChange”. If we connect a callback function to this attribute that changes our state values for “viewport”, we can make the map change locations by dragging the mouse on the image. The zoom will also change if you scroll on your mouse wheel.

So let’s create our callback function and attach the it to the attributes in the ReactMapGL component. Your file should now look like this:

Now if we go back to our app, we can click and drag or use the scroll wheel to change our map view.

Thanks for reading my overview of creating and adding an interactive Mapbox component to a React app. In the future I plan to create more posts about Mapbox, its’ features and incorporating other data with it.