CODEWITHSUNDEEP
javascriptreactjsmapboxmapbox-gl-jsmapbox-gl
Faizan Ul Haq
Faizan Ul Haq

Reputation: 561

why 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).

mapbox-gl adding extra colors to layers

Upvotes: 0

Views: 1858

Answers (1)

Faizan Ul Haq
Faizan Ul Haq

Reputation: 561

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
]);

Upvotes: 3

Related Questions