How to use Mapbox GL on React (hooks), displaying map on your component - Part 1

#mapbox #react #frontend #webdev

The reason why I've got to use Mapbox GL

As of today, I am fortunate enough to work for Bridges To Prosperity as a part of the Lab's unit of Lambda School. (Lambda Labs are like a big side-team-project where you get to solve problems for an organization in 8 weeks. My team includes 5 web developers and 3 data scientists). Bridges To Prosperity is a United States-based nonprofit organization that has connected over one million people, has built over 290 footbridges, and expanded to 18 countries across Southeast Asia, Africa, and Central and South America. In Order to help improve education and reduce poverty.

As the title of this post says, This is "Part 1" and I plan on adding posts implementing all the user stories as an individual frontend developer and as part of a team.

Bridges to Prosperity asked our team to visualize data about their bridges on a map, and we decided to use Mapbox library to implement this. Mapbox is a powerful library that will help you to visualize locations and add cool features to the map. Mapbox is a popular library that companies like Uber uses as the map system for their app. Here's my team's project link if you want to see our final product.

We will go over the User stories (or goals we are have for this project):

The user will be able to see the map on the website, beginning at a location of Bridges to Prosperity’s choice.
The user will be able to view the map in full screen view.
The user can click one of the bridges and the user will be able to see a popup with information in detail about the bridge.
The user will be able to filter bridges based on its own status (which can be 'Rejected', 'Identified', 'Complete', 'Confirmed', 'Prospecting', or 'Under Construction').
The user will be able to use a search bar on the map and it allows the user to look up bridges in specific locations.

Writing user stories will help you planning on what to build. It forces you to see how and what your users would see things. We always have to remind ourselves that your app will be used by users and, users are the one who make your app valuable.

Our team has used Trello as a tool to keep track of what everyone is working on and avoid more than one team member working on the same feature.

One Thing You Should Know Before Using Mapbox on React

This Can Save Your Time and Hair Loss

Before I get more technical, let me stop you and see if your project will be using Vanilla JavaScript or React. If you are using Vanilla JavaScript, then you should stop reading this blog because my team will not use Mapbox JS GL. Mapbox JS GL is not a good library to use with React because it forces you to manipulate the DOM (Document Object Model). In react, it is not good practice to manipulate the DOM since React itself is using the virtual DOM for you.

My team was introduced to use Mapbox JS GL at first but after trying to add some features, I could not stop thinking myself, “why we are to manipulate the DOM when we are not supposed to?”, Then after some research I just found out there is React Map GL available for my team to use. After we took a big pivotal point, it made our life easier 💪.

How to display React Map GL then?

In order to use this library, you will need to do a npm install on your React app. Open your terminal on the app and type:

npm install --save react-map-gl

This will let you import the component to display a map. After successfully installing the library to your app, go ahead and make a component file that's to display the Mapbox. Then you will need to import the ReactMapGL component from the library. On the top of your editor before you define your component import this as follows:

import ReactMapGL from 'react-map-gl';

Then you will need to create useState to set your map for where and how close your map want to be zoomed in as a default. I named it viewport and coded it as follows:

  const [viewport, setViewport] = useState({
    latitude: -1.9444,
    longitude: 30.0616,
    zoom: 7.8,
    bearing: 0,
    pitch: 0,
  });

Now you would want to render the React Map GL component in your return statement as follows:

  return (
    <div className="mapbox-react">
      <ReactMapGL
        {...viewport}
        width="1000px"
        height="500px"
        mapStyle="mapbox://styles/mapbox/streets-v11"
        onViewportChange={nextViewport => setViewport(nextViewport)}
        mapboxApiAccessToken={Your-token-needs-to-go-here}
      />
    </div>
  );

As you can see above, you can change the size of the Mapbox inside the component by changing width and height. Then you will notice, you will need an access token from the Mapbox. Let's find out how to get an access token from Mapbox.

How to Get an Access Token from Mapbox

You will need to create an account at the mapbox webiste to get an access token. (You do not need to pay any amount of money since there is a free option.) These are the steps to get the access token:

Create an account, and log in
Click "Tokens" on the top menu
Click "+ Create a token" button
Name your own token and check the options you want to add to your Mapbox.
Then click "Create token" down below.
Your token should be made in the list.
Copy it and paste it into that attribute.

If you want to secure the token when you are pushing it to GitHub, I'd personally suggest you create an environment file inside your React app and access the token from there. I named the token as REACT_APP_MAPBOX_TOKEN in the env file.

Here's how the whole component should look:

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

const MapboxExample= () => {
  const [viewport, setViewport] = useState({
    latitude: -1.9444,
    longitude: 30.0616,
    zoom: 7.8,
    bearing: 0,
    pitch: 0,
  });

  return (
    <div className="mapbox-react">
      <ReactMapGL
        {...viewport}
        width="1000px"
        height="500px"
        mapStyle="mapbox://styles/mapbox/streets-v11"
        onViewportChange={nextViewport => setViewport(nextViewport)}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
      />
    </div>
  );
};

export default MapboxExample;

Once you entered the token into the mapbox Api Access Token inside the component. Your Mapbox should now display successfully as shown below!

Thank you for reading my first tech post. I know there are lots of things to improve on. If you have any feedback, you are welcome to give me feedback. 😊😊😊 Thank you!