React + Mapbox GeoJSON Example

May 04, 2020

Here’s an example of how to create a Mapbox map in React using a GeoJSON data set. When I started building my first React Mapbox map I built them around some of the other pre-built components out there like ReactMapboxGL or react-map-gl. Both of these wrappers are great but eventually figured out I was better able to control all the Mapbox features on my own by targeting the Mapbox GL JS libary directly vs using a another component.

This example uses React hooks but could easily be updated for a class component if that is what you are working with. Below is one component called Districts that loads Minnesota’s eight congressional districts from a separate geojson file. After loading the districts they are given a unique fill-color and added as a layer.

You can view the entire React Mapbox GeoJSON example project in the GitHub repository or you can view a live example at clintmcmahon.github.io/react-mapbox-example

Districts.js React Component

import React, { useState, useEffect, useRef } from "react";
import mnDistricts from "./data/mn/mn-districts.geojson";
import ReactDOM from 'react-dom';
import mapboxgl from 'mapbox-gl';

function Districts(props) {
mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_KEY;
const mapContainer = useRef(null);
const [long, setLong] = useState(-94.503809);
const [lat, setLat] = useState(46.443226);
const [zoom, setZoom] = useState(4.5);
const [hoveredDistrict, _setHoveredDistrict] = useState(null);
const hoveredDistrictRef = useRef(hoveredDistrict);


const setHoveredDistrict = data => {
    hoveredDistrictRef.current = data;
    _setHoveredDistrict(data);
};

useEffect(() => {

    let map = new mapboxgl.Map({
        container: mapContainer.current,
        style: "mapbox://styles/mapbox/light-v10",
        center: [long, lat],
        zoom: zoom
    });


        // Add zoom and rotation controls to the map.
        map.addControl(new mapboxgl.NavigationControl());
    map.once("load", function () {

        map.addSource('district-source', {
            'type': 'geojson',
            'data': mnDistricts
        });

        map.addLayer({
            'id': 'district-layer',
            'type': 'fill',
            'source': 'district-source',
            'layout': {},
            'paint': {
                'fill-color': [
                    'match',
                    ['get', 'CD116FP'],
                    '01',
                    '#5AA5D7',
                    '02',
                    '#02735E',
                    '03',
                    '#00E0EF',
                    '04',
                    '#84D0D9',
                    '05',
                    '#202359',
                    '06',
                    '#CE7529',
                    '07',
                    '#00AE6C',
                    '08',
                    '#0056A3',
                    /* other */ '#ffffff'
                ],
                'fill-opacity': [
                    'case',
                    ['boolean', ['feature-state', 'hover'], false],
                    .8,
                    0.5
                ]
            }
        });

        map.on('mousemove', 'district-layer', function (e) {
            if (e.features.length > 0) {
                if (hoveredDistrictRef.current && hoveredDistrictRef.current > -1) {

                    map.setFeatureState(
                        { source: 'district-source', id: hoveredDistrictRef.current },
                        { hover: false }
                    );
                }

                let _hoveredDistrict = e.features[0].id;

                map.setFeatureState(
                    { source: 'district-source', id: _hoveredDistrict },
                    { hover: true }
                );

                setHoveredDistrict(_hoveredDistrict);
            }

        });

        // When the mouse leaves the state-fill layer, update the feature state of the
        // previously hovered feature.
        map.on('mouseleave', 'district-layer', function () {
            if (hoveredDistrictRef.current) {
                map.setFeatureState(
                    { source: 'district-source', id: hoveredDistrictRef.current },
                    { hover: false }
                );
            }
            setHoveredDistrict(null);
        });

    });

}, []);

return (
    <div className="district-map-wrapper">
        <div id="districtDetailMap" className="map">
            <div style={{ height: "100%" }} ref={mapContainer}>

            </div>
        </div>
    </div>
);



}


export default Districts;

Minnesota Congressional Districts GeoJSON

This geojson data set represents Minnesota’s eight congressional districts that I pulled from the US Census. Each feature has a property “CD116FP” that I’m using to set the fill-color of each district layer. The GeoJSON data is so big I didn’t include it in this blog post but you can download it from the Github repo.

You can view the source on Github.

That’s it. Happy coding!