mapbox / mapbox/mapbox-gl-js

text-field formatting colors arent working as intended when nested inside step zoom

Open
#13,512 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

**mapbox-gl-js version**: 3.13.0

**browser**: Chrome

### Steps to Trigger Behavior

1. Use your own mapbox key in the provided example
2. 'airspace-labels-altitude' layer doesnt take colors into account properly in text-field

### Link to Demonstration

[https://jsbin.com/zixuwusexe/edit?html,output](url)

### Expected Behavior
In the example the inner ring of Lansing's airspace should have 2 colors for the text labels. The Class D text color is wrong.
In the latest version of the Flutter SDK this style works as intended. Seems to be an issue only with GLJS.

### Actual Behavior
Only 1 color is being used for this particular label.

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

Reproduce the issue in the linked JSBin with mapbox-gl-js 3.13.0, focusing on the airspace-labels-altitude text-field inside step zoom. Trace how nested step expressions determine label colors and compare the result with the Flutter SDK behavior; done means the inner ring displays both expected text colors in GLJS.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.