CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-jschoropleth
jrajak10
jrajak10

Reputation: 61

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

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?

Upvotes: 3

Views: 1356

Answers (2)

rodrigomd
rodrigomd

Reputation: 69

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

Upvotes: 1

Steve Bennett
Steve Bennett

Reputation: 126205

The simplest way is using the mapbox-choropleth library.

Upvotes: 1

Related Questions