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.

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).

---

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

2. Mapbox key

In order to use Mapbox, you will need an API key. Go to https://www.mapbox.com/ 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.

#react #programming #tutorial #mapping #mapbox