mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.26k stars 2.23k forks source link

Agregation ('+') in expression fill-color does not render proper color #12811

Open Captain-Oski opened 1 year ago

Captain-Oski commented 1 year ago

I have this style for my fill layer

"fill-color": [
  "step",
  ["to-number", ["get","total"]],
    "#d1eeea",
    2, "#68abb8",
    4, "#2a5674"
]

image

Works well values are filled with the right colors,

Now instead of the TOTAL I want to agregate the 6 variables that make the total. (each is between 0 and 1)

Like this :

"fill-color": [
 "step",
              [
                "+",
                ["to-number", ["get","acp_sociale"]],
                ["to-number", ["get", "acp_econo"]],
                ["to-number", ["get", "cp_enviro"]],
                ["to-number", ["get", "acp_securite"]],
                ["to-number", ["get", "acp_proximite"]],
                ["to-number", ["get", "acp_cultsportloisir"]]
              ]
]

Issue :

The hexagons are filled with bad colors e.g : The hex should be in the intermediate color not in the highest ranked one.

image

Any hint why this would happen ?

Thank you all, have a pleasant day

stepankuzmin commented 1 year ago

Hi @Captain-Oski,

Thank you for opening this ticket. Please provide a minimal, complete, verifiable demonstration of the issue to help the maintainers and community understand and address the problem accurately. We recommend using https://jsbin.com/.