How to integrate Mapbox into a React app

Stewart Tan
Nov 5, 2019 · 2 min read
Photo by henry perks on Unsplash

Mapbox is one of the open source mapping platform other than well known Google Map. It is powerful and potential to load large amount of data (Point, Symbol, Polygon, Line, etc) into map using WebGL technology. Due to this, it’s able to handle large amount of data without compromising the performance. Furthermore, Mapbox are also support free tier pricing which is good for start up business and only cost higher as business grow. In this tutorial, we are going to integrate Mapbox into ReactJS web application, start from the scratch in just 5 minutes.

NPM (version > 8.1) and Node (version >5.6) must be installed in local machine. First and foremost, create the ReactJS application using npx command as follow:

npx create-react-app my-react-mapbox
cd my-react-mapbox

Next install mapbox official npm package as dependancy:

npm i mapbox-gl

Before we start to modify the code, we need go to Mapbox to create an account to get the Mapbox API Key, which we will required put into the code in later example. Next, modify the app.js code using code editor. In this example, we are using Visual Code Studio to modify the code. Copy and paste the code into app.js as follow:

File: App.js

With all things ready in place, we can run build in local server to see the result using react-script build in command:

npm start

After compiled successfully, the browser should be automatically opened and navigate to http://localhost:3000 and show the result as below:

http://localhost:3000

Of course in this example, we are only showing how to integrate Mapbox into ReactJS web application. The Mapbox is able to do more than that and create much more powerful application which in my experience, it is on par and cheaper compare to Google Map.

JavaScript in Plain English

Learn the web's most important programming language.

Stewart Tan

Written by

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade