[GIS] mapbox set fill-color dynamically

mapboxmapbox-gl-js

I'm using the Mapbox library and I have this function that processes a response of type JSON, but I want the color of every single feature to be dynamic based on a property of the feature itself:

function doSome(data) {
    
    map.addSource('hrd-src', {
        'type': 'geojson',
        'data': data
    });

    map.addLayer({
        'id': 'hrd-polygons',
        'type': 'fill',
        'source': 'hrd-src',
        'layout': {},
        'paint': {
            'fill-color': '#088',
            'fill-opacity': 0.8
        }
    });

    // Set filter to first hour of the day
    // 0 = mezzanotte del giorno corrente (0-23)
    filterBy(0);

    document.getElementById('slider').addEventListener('input', function(e) {
        var hour = parseInt(e.target.value, 10);
        filterBy(hour);
    });
}

Is it possible to set a dynamic value for the fill-color property?

Best Answer

Here you can find a complete article about this:
https://blog.mapbox.com/data-driven-styling-for-fill-layers-in-mapbox-gl-js-80bb5292af4e

If you use categorical attribute,
then you have to use 'type': 'categorical':
https://docs.mapbox.com/mapbox-gl-js/style-spec/#other-function

Related Question