mapbox / mapbox/mapbox-gl-js

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

Open
#12,811 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs information :pray:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No source file, test, or entry point is named. Start by reproducing the two fill-color expressions from the report in mapbox-gl-js and compare the aggregated expression's numeric result with the step thresholds and rendered colors. Done means identifying whether the expression evaluates incorrectly or the reported thresholds are mismatched, then recording the finding in a focused regression test or documentation update.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.