How do you make a choropleth map with Mapbox GL JS, and an object?

1
votes

I'm struggling to find the right information in order to create a choropleth map using mapbox. Their examples are very vague.

I currently have a geojson showing the polygons for all the UK counties. I used map.addLayer to add this to the map, but at the moment, the whole map is the same color: 

        map.addLayer({
        "id": 'counties',
        "type": "fill",
        "source": {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": counties
            }
        },
        "layout": {},
        "paint": {
            "fill-color": fill,
            "fill-opacity": 0.8
        }
    });

counties is the geojson file, which also includes a property called 'County'. In addition, I have returned an object, which returns key, value pairs of counties, and the number of times it appeared in my data, respectively:

{
    "Bristol": 2,
    "Cheshire": 1,
    "City and County of the City of London": 14,
    "City of Aberdeen": 1,
    "City of Edinburgh": 3
}

How can I create a choropleth map using the data from my object, to return as different shades/color for the layer (e.g, counties such as Cheshire would be a lighter color, because the value is one, but City and County of the City of London would have a darker color because the value is 14?

2
javascriptmapboxmapbox-gl-jschoropleth

2 Answers

0
votes

The simplest way is using the mapbox-choropleth library.

0
votes

How is your geojson structured?

The easiest way would be for your features to have a property called "frequency" for example. Then you can use Mapbox GL JS data-driven styling like this:

'fill-color': {
property: 'frequency',
stops: [[2, '#fff'], [5, '#f00']]
}

Check this post by Mapbox: https://blog.mapbox.com/data-driven-styling-for-fill-layers-in-mapbox-gl-js-80bb5292af4e