How to use Mapbox GL with React

What is Mapbox?

Mapbox is a live location platform that allows developers to create interactive and intuitive map interfaces for a variety of applications. On the web, this is done using a JavaScript library called Mapbox GL JS which uses Web GL to render interactive maps from vector lines and Mapbox Styles.

Are you looking to build map interfaces with React? Thanks to Uber engineers we can do this relatively easily through a package called react-map-gl which provides React integration for mapbox-gl as well as an easy-to-use component library to build on.

In this article, we are going to make use of react-map-gl to build two map components, one that displays your current location and another that allows you to search for locations across the globe.

First, we’ll bootstrap our application with create-react-app by running create-react-app mapbox-react.

Locating your position

We would like to start with pinpointing one’s location. With react-map-gl we can do just that using an in-built component called GeolocateControl which allows us to track the user’s location through the browser. Before we can do this, we have to initiate the map using the MapGL component from react-map-gl. Let’s look at how we do this in code and to make things interesting we’ll use React Hooks.

Let’s install react-map-gl by running npm install react-map-gl.

Now let’s set up our component.

import React,{ useState } from 'react'
import MapGL, {GeolocateControl } from 'react-map-gl'
import config from '../config'
import 'mapbox-gl/dist/mapbox-gl.css'

const TOKEN=config.REACT_APP_TOKEN

const geolocateStyle = {
  float: 'left',
  margin: '50px',
  padding: '10px'
};

const Map = () => {

  const [viewport, setViewPort ] = useState({
    width: "100%",
    height: 900,
    latitude: 0,
    longitude: 0,
    zoom: 2
  })

  const _onViewportChange = viewport => setViewPort({...viewport, transitionDuration: 3000 })
  
  return (
    <div style={{ margin: '0 auto'}}>
      <h1 style={{textAlign: 'center', fontSize: '25px', fontWeight: 'bolder' }}>GeoLocator: Click To Find Your Location or click <a href="/search">here</a> to search for a location</h1>
      <MapGL
        {...viewport}
        mapboxApiAccessToken={TOKEN}
        mapStyle="mapbox://styles/mapbox/dark-v8"
        onViewportChange={_onViewportChange}
      >
        <GeolocateControl
          style={geolocateStyle}
          positionOptions={{enableHighAccuracy: true}}
          trackUserLocation={true}
        />
      </MapGL>
    </div>
  )
}

export default Map

The code shown above creates a map with the ability to pinpoint your current position by clicking on a button at the top left corner of the page. Let us breakdown how that works.

To initiate our map, we initiate our Map component and use the state Hook to initiate an object called viewport which we’ll feed to the MapGL component as props. We’ll use viewport to initiate the initial coordinates of the map along with its zoom and size.

We also initiate a setViewport function that will be used to update the values of the viewport. The MapGL component takes three more props, mapboxApiAccessToken which is the access token required to make calls to the mapbox API and can be obtained from mapbox. mapStyle links to a variety of map styles provided by mapbox, in this case, we’ll use dark mode.

The last prop is onViewportChange which is a function that we use to update our viewport. That’s it, just like that we have a functional map! Now we need to add the location services.

To add geolocation, we import the GeolocateControl component which we’ll provide three props to. The first is some the styling declared as geolocateStyle earlier passed as a React style object, this determines the size and placement of the button that triggers the geolocation service. The next prop us positionOptions which is an object containing the options passed to the Geolocation API to get and watch the user’s position such as enabling high accuracy which we will do by setting enableHighAccuracy to true. We also set a prop called trackUserLocation to true, this makes the geolocate button a toggle that monitors and updates the user’s location when it changes.

Searching for a location

To be able to search for a user’s location we shall build on the capabilities of react-map-gl using a package called react-map-gl-geocoder which is a React wrapper for the mapbox-gl-geocoder for use with react-map-gl.

To install it, run npm install react-map-gl-geocoder

We’ll also be using deck-gl, a visualization framework from Uber, to add an overlay marking the area we have searched on our map for greater readability. To install it run npm install deck.gl.

Great, now we are ready to build our component, which we will name SearchableMap, our code should look like this:

import "mapbox-gl/dist/mapbox-gl.css"
import "react-map-gl-geocoder/dist/mapbox-gl-geocoder.css"
import React, { Component } from 'react'
import MapGL from "react-map-gl";
import DeckGL, { GeoJsonLayer } from "deck.gl";
import Geocoder from "react-map-gl-geocoder";

const token = process.env.REACT_APP_TOKEN 

class SearchableMap extends Component {
  state = { 
    viewport :{
      latitude: 0,
      longitude: 0,
      zoom: 1
    },
    searchResultLayer: null
  }

  mapRef = React.createRef()

  handleViewportChange = viewport => {
    this.setState({
      viewport: { ...this.state.viewport, ...viewport }
    })
  }
  // if you are happy with Geocoder default settings, you can just use handleViewportChange directly
  handleGeocoderViewportChange = viewport => {
    const geocoderDefaultOverrides = { transitionDuration: 1000 };

    return this.handleViewportChange({
      ...viewport,
      ...geocoderDefaultOverrides
    });
  };

  handleOnResult = event => {
    this.setState({
      searchResultLayer: new GeoJsonLayer({
        id: "search-result",
        data: event.result.geometry,
        getFillColor: [255, 0, 0, 128],
        getRadius: 1000,
        pointRadiusMinPixels: 10,
        pointRadiusMaxPixels: 10
      })
    })
  }

    render(){
      const { viewport, searchResultLayer} = this.state
      return (
        <div style={{ height: '100vh'}}>
          <h1 style={{textAlign: 'center', fontSize: '25px', fontWeight: 'bolder' }}>Use the search bar to find a location or click <a href="/">here</a> to find your location</h1>
          <MapGL 
            ref={this.mapRef}
            {...viewport}
            mapStyle="mapbox://styles/mapbox/streets-v9"
            width="100%"
            height="90%"
            onViewportChange={this.handleViewportChange}
            mapboxApiAccessToken={token}
            >
              <Geocoder 
                mapRef={this.mapRef}
                onResult={this.handleOnResult}
                onViewportChange={this.handleGeocoderViewportChange}
                mapboxApiAccessToken={token}
                position='top-left'
              />
            </MapGL>
            <DeckGL {...viewport} layers={[searchResultLayer]} />
        </div>
      )
    }
}

export default SearchableMap;

First, we create a map container with the MapGL component, as we did in the previous component. Next, we use the Geocoder component from react-map-gl-geocoder which is a search component that returns the coordinates of a given location from the Mapbox API.

It takes a few props. The onResult prop is a function that is called when a result parameter is returned from the search and in our case, it creates a GeoJsonLayer object and places it in state as searchResultLayer. This GeoJsonLayer is then used to create a deck-gl layer over the map indicating the location searched for in the map.

Just like the MapGL component, the Geocoder also has an onViewportChange function that is called to update the map, in our case we’ve chosen to create a separate function to handle this called handleGeocoderViewportChange so as to override the transition duration when updating the viewport on the map. If you wish to use the defaults, you can use the same viewport change handler as MapGL. The geocoder also requires the mapbox token to access the mapbox API and fetch locations.

When searching, our geocoder will suggest some locations as shown below.

You will also notice we create and use a Ref that we use to integrate the two components, and it is passed to both components as a mapRef prop.

The last piece in our searchable map is the deck.gl layer we had created data for. This will render on the map when we search for an area. It is passed the viewport details as well as the searchResultLayer which it uses to generate the dot over our location as shown below.

And that’s it, we have a searchable map!

Routing

You will notice I placed links to the components at the top of each component. Now let us edit App.js to add routing to link these two components. We’ll be using react-router-dom to achieve this, run npm install react-router-dom. All set, let’s add our routes.

import React from 'react'
import './App.css'
import Map from  './components/Map'
import SearchableMap from './components/SearchableMap';
import { Route, Switch, BrowserRouter } from 'react-router-dom'

function App() {
  return (
      <div>
        <BrowserRouter >
        <Switch>
            <Route exact path="/" component={Map} />
            <Route exact path="/search" component={SearchableMap} />
        </Switch>
        </BrowserRouter>
      </div>
  )
}
export default App

Great, we are all set up, run your app to play around with the two components. Here’s how they will look once complete.

Conclusion

Mapbox GL is a great tool for creating interactive map interfaces and with react-map-gl it’s even easier to integrate into React applications. In addition to this the surrounding ecosystem of packages from Uber, you can expand on its functionality to create a variety of great looking interfaces using deck-gl to create stunning looking overlays.

Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — start monitoring for free.