2

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?

2
  • 2
    See mapbox.com/mapbox-gl-js/style-spec#expressions using expressions you can set the fill color dynamically based on the feature properties. Apr 24, 2018 at 7:16
  • Thanks! I used this: paint': { 'fill-color' : { "property": "color", "stops": [ [0, 'white'], [1, 'yellow'], [2, 'orange'], [3, 'red'], [4, 'violet'] ] }, 'fill-opacity' : 0.5 } Apr 24, 2018 at 9:20

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.