mapbox / mapbox/mapbox-gl-js

raster-color-mix multi-channel decode broken in mapbox-gl-js (v3.3.0 to v3.20.0)

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

Nobody has claimed this yet.

auto-triaged 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.20.0

### Browser and version

Chrome Version 146.0.7680.153

### Expected behavior

Each pixel encodes a packed 24-bit integer across RGB channels:

- index = R×65536 + G×256 + B
- Example: depth -10m → index 2990 → R=0, G=11, B=174
- Tile data range: 2922–2999 (depths -78m to -1m)

Paint Configuration:
```
paint: {
'raster-color-mix': [0, 65280, 255, 0],
'raster-color': [
'interpolate',
['linear'],
['raster-value'],
2922, '#440154', // Purple (deepest -78m)
2935, '#31688e', // Blue
2948, '#35b779', // Green
2961, '#90d743', // Yellow-green
2974, '#fde725', // Yellow
2987, '#fd8d3c', // Orange
2999, '#f00' // Red (shallowest -1m)
],
'raster-color-range': [0, 4000]
}
```

### Expected Result (v3.2.0 - CORRECT):
All 7 color stops render smoothly across the raster values. The full spectrum is visible:

- Deep areas (2922-2940) display purple/blue
- Mid-depth areas (2940-2970) display blue-green through yellow-green
- Shallow areas (2970-2999) display yellow through orange to red
- Color scaling correctly interpolates between all 7 stops based on raster-value position

### Actual behavior

Multi-channel raster-color-mix with raster-color interpolation produces incorrect color scaling/interpolation in v3.3.0 and newer. The issue is not a cut-off or truncation, but rather a failure in the interpolation mathematics or color scaling logic that causes only a portion of the color palette to render, with the remaining colors missing or misinterpreted.

### Actual Result (v3.3.0+ - WRONG COLORS):
Only the first 2–3 color stops render correctly. The remaining stops (stops 4–7) either:

- Do not render at all
- Render with incorrect colors
- Appear to use incorrect interpolation scaling

Instead of the full purple→blue→green→yellow-green→yellow→orange→red spectrum, only purple and blue colors appear across the entire dataset. The intermediate and later stops are either ignored or severely misinterpreted, suggesting that the color interpolation scaling or the multi-channel raster-value decoding has changed.

### Link to the demonstration

https://stackblitz.com/edit/nuxt-starter-kxktbpsx?file=app.vue,package.json

### Steps to trigger the unexpected behavior

Change mapbox-gl version in the package.json from 3.2.0 to 3.20.0, then recompile.

### Relevant log output

```shell

```

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 regression using the StackBlitz app.vue and package.json, comparing mapbox-gl-js 3.2.0 with 3.20.0. Trace raster-color-mix and raster-value handling from that example, then verify that all seven color stops render with the expected interpolation across values 2922–2999.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.