0
225
Vistaswhy does setPaintProperty with fill-color and stops add extra colors to layers in mapbox-gl?
I am trying to build data driven choropleth map of a US state using mapbox-gl, Issue i am facing is that,i have just three colors in my stops but i can see map is being made with more than 3 colors, my best guess is that library is interpolating colors on it's own, if that is the case how can i stop it from doing so ?
details:
i start with default stops
[
[-1, "#FFF"],
[-1, "#AFA"],
[-1, "#FAF"],
]
these are just placeholder values, after data arrives i build stops again with actual values
[
[
19,
"#afc5ff"
],
[
22,
"#376eff"
],
[
28,
"#1c3780"
]
]
once stops are calculated i add source to map, add layer and paint the layer
map.current.addSource("counties", {
type: "geojson",
data,
});
map.current.addLayer({
id: "county",
type: "fill",
source: "counties",
});
map.current.setPaintProperty("county", "fill-color", {
property: options.property,
stops,
});
after doing all map that is rendered contains colors that are not in my stops (marked by red numbers in image below).
1 Respuestas
Responde la pregunta0
Solved with help of reply on github issue i opened regarding this.
Copied response:
Hi @mfaizan1 you're right that stops will interpolate between the values. The step expression should work better for you. This example in particular shows how to set a circle's color to one of three options. Your code should end up looking something like this:
map.current.setPaintProperty("county", "fill-color", [
'step',
['get', 'someCountableProperty'],
'#afc5ff', // any item where `someCountableProperty` is <= 19 will be displayed with this color
19,
'#376eff', // any item where `someCountableProperty` is <= 22 && > 19 will be displayed with this color
22,
'#1c3780' // any item where `someCountableProperty` is > 22 will be displayed with this color
]);