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-example
Code language: Shell Session (shell)

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

npm install react-map-gl
Code 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)
https://gist.github.com/sureshgadupu/a820d84296363af5978a9492c48db668

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)
https://gist.github.com/sureshgadupu/3f763d75c8b0a8da0acee55920e2e198

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

cd react-map-gl-example npm start
Code 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)
https://gist.github.com/sureshgadupu/755b1f28cfecde01341d475c59faffd6

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

viewport

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.

Similar Posts