MAPBOX- how to use minimum and maximum value of features from GeoJSON in Data Driven Styling

Question

Currently, I am manually setting the stops but my GeoJSON files have different ranges and I have to set stops values every time. Is it possible to use min and max value of a property within a map.addLayer function? and then divide it into a range of values? I am currently parsing the GeoJSON to get minimum and maximum value and I am not sure if mapbox provides this functionality.

map.addLayer({
    'id': 'heatmap',
    'type': 'circle',
    'source': "sourceGeoJSON",
    paint: {
        'circle-color': { 
        property:'pH',
        stops: [
        [6,'#6879FB'],
        [8,'#68FB75'],
        [9, '#F94B18'], 
        [10, '#F92918']
        ]; 
    },
    'circle-opacity': 1.0
    }
});

Steve Bennett Steve Bennett · Accepted Answer · 2017-10-11T11:46:34

Mapbox-GL-JS doesn't provide any automatic binning functionality. It's pretty trivial to create linear bins over a range:

phvals = sourceGeoJSON.features.map(f => f.properties.pH);
min = Math.min(...phvals);
max = Math.max(...phvals);
range = max-min;

map.addLayer({
    'id': 'heatmap',
    'type': 'circle',
    'source': "sourceGeoJSON",
    paint: {
        'circle-color': { 
        property:'pH',
        stops: [
        [min,'#6879FB'],
        [min + 1/3*range,'#68FB75'],
        [min + 2/3*range, '#F94B18'], 
        [max, '#F92918']
        ]; 
    },
    'circle-opacity': 1.0
    }
});

To go further, consider using something like the ckmeans function in the Simple Statistics package.

MAPBOX- how to use minimum and maximum value of features from GeoJSON in Data Driven Styling

1 Answers