react-map-gl

Introduction to react-map-gl

react-map-gl is a React package that allows the integration of an interactive map in our React applications. The original tool is the Mapbox JavaScript library, this react-map-gl just acts like a wrapper to the Mapbox JavaScript so that using Mapbox in react applications become easier. This package was first made by Uber’s Visualization team to make powerful web apps for geospatial analysis and self-driving data visualization.

Maps are dynamically rendered using a combination of vector tiles and style rules using JavaScript and WebGL. Rendering the map in the browser rather than on the server allows the map's style and displayed data to change dynamically in response to user interaction.

It entirely relies on React and other reactive programming to handle the complexity of such applications. Now, let’s get started on how to use react map GL.

How to Use Mapbox GL in React?

So we have talked about what the react-map-gl is and a bit about its background. Now, it’s time to get our hands dirty!

Create React App

Since we are working on a React project, the very first step would be to create a react app using the good’ol command that you know.

Installations

Once the React application is set up, like any other package, we need to use NPM to install react map GL. Along with the react map GL, we also need the Mapbox GL JS.

Type the following to install both of the packages.

Using react-map-gl

Let’s start with a very basic one first, we will just take a standard latitude and longitude that will be focused on when our map first loads, we will be able to scroll the map and use it. Let’s take a look a the code.

The above code will make a full map taking the entire screen and will initially focus on Bangalore, those are the location coordinates for them. It will be a simple map with no styling, you can add styling if you want. For styles refer to the Styles | API | Mapbox.

react-map-gl Example

There are many cool things you can do with the react map gl! Let’s see a few of them.

• Creating crime statistics by the state for travelers, whenever you hover over a state it will show the crime rates over there. Like this Crime Heat Map - CodeSandbox
• You can make your application that needs to store addresses, this can be done using Geolocation. Like maybe a car rental application like this one! Car Rental - CodeSandbox
• A heatmap can also be made based on any other statistical data like the one in the first point, maybe population, rainfall in an area, and many more!

Use Cases of react-map-gl

Let's now study some use cases of react map GL along with their codes! These will be very helpful in building your projects!

Locating Your Current Position with react-map-gl

Let's make an app to check your current location. Using the react-map-gl package we can simply import a built-in component called GeolocateControl that allows us to track the user's location from the browser with just a click of a button.

But before using Mapbox style, we need a MAPBOX_TOKEN that we can get by creating an account for free. If you haven't already done so, you can visit this signup page.

Let's try implementing current position tracking in our React application with the following code.

Make sure to replace MAPBOX_TOKEN with the token that you get after creating your account.

The <Map/> component is used to set the map along with latitude and longitude and then the <GeolocateControl /> help us retrieve our current location with high accuracy.

The map you can get on your screen is something similar to this image above.

Searching for a Location Using react-map-gl

For doing this you need something known as geocoding, using this feature we can get the latitudes and longitudes of places when we search them by name. Let’s take a quick example and see.

To implement this we need deck.gl, another package developed by the Uber visualization team, this enhances the readability of the map!

To install deck.gl, we do the same old thing :

Let’s take a look at the code next.

To start with, we have the <Map /> component as we had in our earlier case. Next, from react-map-gl-geocoder we import our Geocoder component, which returns the location coordinates by calling the Mapbox API when we provide the name of a place to the API.

When the result parameter is returned from the search, the onResult function is called, in this case creating a GeoJsonLayer object and putting it into the searchResult state. This GeoJsonLayer is then used to create a Deck-Gl layer on the map showing the locations found on the map.

To update the map, the onViewportChange function in Geocoder is called. In this example, we will create another process called handleViewportChange to override the transition time when there is a viewport update on the map.

That’s how we can search a place using react-map-GL. The location we enter is suggested and it calls the API which returns all the details regarding that place as can be seen in the left panel in the above GIF.