React-Map-GL – React wrapper around MapboxGL JS

Today I am going to show you, how to use the React-map-gl framework to render the web map.

In the previous blog posts, I have shown you how to render the web maps and add visualization to it on the browser using the MapboxGL JS.

While MapboxGL JS great library there are frameworks like React-map-gl, DeckGL which makes our work easy by providing a wrapper around it.

I will write a few blog posts covering these frameworks.

React-map-gl is a React friendly API wrapper around MapboxGL JS.

Follow the steps below to show the map using the react-map-gl

Step 1) First, create a React JS application

npx create-react-app react-map-gl-exampleCode language: Shell Session (shell)

Step 2) Next, install the react-map-gl package

npm install react-map-glCode language: Shell Session (shell)

Step 3) Add a state variable to App.js for holding latitude, longitude, zoom, pitch, bearing, width, and height. We will name the state variable as “viewport”

const [viewport, setViewport] = useState({
    latitude: 0.0,
    longitude: 0.0,
    width: "100vw",
    height: "100vh",
    zoom: 1.25,
  });Code language: Java (java)

Step 5) Next, in the render method of App.js, we will add <ReadMapGL> component which displays the map.

<ReactMapGL
        {...viewport}
        mapboxApiAccessToken={accessToken}
        mapStyle={"mapbox://styles/mapbox/outdoors-v11"}
        onViewportChange={(viewport) => {
          setViewport(viewport);
        }}
 />Code language: JavaScript (javascript)

Step 6) Change the directory to ‘react-map-gl-example’ and start the application

cd react-map-gl-example
npm startCode language: Shell Session (shell)

Now point your browser to ‘http://localhost:3000’ and you should see the map on the browser like below

Out of three properties passed to <ReactMapGL> component, I have already discussed mapboxApiAccessToken, mapStyle in previous articles.

onViewportChange property updates the Latitude, Longitude, and Zoom as map changes based on user interactions.

Latitude, Longitude is set to the center of the map displayed on the browser.

Let’s display the viewport information of the map.

 <ReactMapGL
        {...viewport}
        mapboxApiAccessToken={accessToken}
        mapStyle={"mapbox://styles/mapbox/outdoors-v11"}
        onViewportChange={(viewport) => {
          setViewport(viewport);
        }}
      >
        <div className="viewPortnfo">
          <div>
            <strong>Longitude:</strong>
            <span> {viewport.longitude}</span>
          </div>
          <div>
            <strong>Latitude:</strong> <span>{viewport.latitude}</span>
          </div>
          <div>
            <strong>Zoom:</strong> <span>{viewport.zoom}</span>
          </div>
        </div>
      </ReactMapGL>Code language: JavaScript (javascript)

Below image shows the updated viewport values on the left-hand side corner

In the next article, we will see how to add visualizations to the map using the framework.

You can download the source code for this blog post from GitHub.