How to Use Mapbox GL JS in a React App

Introduction

Building a map in a web app can be fun and useful. One great tool for this is Mapbox GL JS. This JavaScript library lets you create beautiful, interactive maps. In this article, we will walk through the steps to use Mapbox GL JS in a React app.

What is Mapbox GL JS?

Mapbox GL JS is a powerful library for rendering maps. It works with WebGL, which allows for smooth graphics on your website. With Mapbox, you can add layers, markers, and pop-ups to your maps. It is also highly customizable, so you can make your map look just how you want.

Setting Up Your React App

If you don’t have a React app yet, let’s create one. First, make sure you have Node.js installed on your machine. You can download it from the Node.js website.

Once you have Node.js, open your terminal and run the following command to create a new React app:

npx create-react-app my-mapbox-app

Change into your new app's folder:

cd my-mapbox-app

Now you are ready to install Mapbox GL JS.

Installing Mapbox GL JS

To add Mapbox GL JS to your app, you need to install it using npm. In your terminal, run this command:

npm install mapbox-gl

Next, you will want to create a Mapbox account if you haven’t done so. Head over to the Mapbox website and sign up. Once you have an account, you will need an access token. You can find this in your account settings.

Creating the Map Component

Now let’s create a new component for our map. Inside the src folder, create a new file named Map.js.

touch src/Map.js

Open Map.js and start coding! Here’s a basic structure for the map component:

import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

const Map = () => {
  const mapContainer = useRef(null);
  const map = useRef(null);

  useEffect(() => {
    if (map.current) return; // Prevent map from being added again
    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-74.5, 40], // [lng, lat]
      zoom: 9,
    });
  });

  return (
    <div>
      <div ref={mapContainer} style={{ width: '100%', height: '400px' }} />
    </div>
  );
};

export default Map;

Replace YOUR_MAPBOX_ACCESS_TOKEN with your actual access token from Mapbox. This code sets up a map centered on New York City with a zoom level of 9. The map will take up 400 pixels in height and the full width of its parent container.

Using the Map Component

Now it's time to use the Map component in your app. Open the src/App.js file and import the Map component:

import React from 'react';
import Map from './Map';

function App() {
  return (
    <div className="App">
      <h2>My Mapbox Map</h2>
      <Map />
    </div>
  );
}

export default App;

This code will show the map on the page. When you run your app, you should see the map displayed nicely.

Running Your App

Now you can run your app and see the map in action. In your terminal, type:

npm start

Your browser will open and the app will load. You should see your map displayed on the screen. If you do not see the map, check your access token and make sure you followed all the steps.

Customizing Your Map

One of the best parts of using Mapbox is how customizable it is. You can change the style of the map, add markers, and even handle user interactions. Here are a couple of ideas to get you started:

• Add markers for specific locations by creating new mapboxgl.Marker instances.
• Change the map style by using different style URLs from Mapbox.
• Listen for events like clicks and drags to make your map interactive.

Conclusion

Using Mapbox GL JS in a React app is straightforward and powerful. With just a few steps, you can create beautiful maps that enhance your web applications. Now that you know how to set it up, play around with the various features Mapbox offers. Happy mapping!