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
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:
Paint Configuration:
Expected Result (v3.2.0 - CORRECT):
All 7 color stops render smoothly across the raster values. The full spectrum is visible:
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:
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