mapbox / mapbox/mapbox-gl-js

Incorrect Color on Zoom for Non-Opaque Fill Polygons with Dusk/Night Lighting

Open
#13,411 8 comments 1 reaction 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

**mapbox-gl-js version**: v3.10.0, others untested

**browser**: Chrome and Firefox, others untested

### Steps to Trigger Behavior

1. Set the `lightPreset` to `night` or `dusk`
2. Add a polygon source and layer to the map with a color, an opacity within (0.0, 1.0) and an emissive strength of 1.
3. Zoom in and out between roughly a zoom level of 13 and 14

### Reproducible Example
```
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/standard',
zoom: 15,
center: [-74.02803044931156, 40.69935650338837]
});

map.on('style.load', () => {
map.setConfigProperty('basemap', 'lightPreset', 'night');
map.addSource('polygon-source', {
type: 'geojson',
data: {
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [[
[-74.03523913092677, 40.703543421598965],
[-74.03523913092677, 40.69468447346813],
[-74.02018228787509, 40.69468447346813],
[-74.02018228787509, 40.703543421598965],
[-74.03523913092677, 40.703543421598965]
]]
}
}
});
map.addLayer({
id: 'polygon-layer',
type: 'fill',
source: 'polygon-source',
paint: {
'fill-color': 'red',
'fill-emissive-strength': 1,
'fill-opacity': 0.5
}
});
});
```

### Expected Behavior
The polygon should remain the same shade of its configured fill color regardless of the current zoom level.

### Actual Behavior
The polygon's fill color abruptly becomes much lighter as soon as the zoom level falls below roughly 14.

### Further Details/Explanation
This does not seem to happen with dawn or day lighting, nor any of the non-standard map styles. I feel that this is erroneous behavior for polygon coloring, at least with the presence of the `emissive-strength` property.

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

Start by running the reproducible map setup with the Standard style, night or dusk lightPreset, and the fill-color, fill-opacity, and fill-emissive-strength properties. Investigate the fill rendering behavior while zooming between levels 13 and 14. Done means the polygon keeps the configured color across that zoom range without regressing other lighting presets or styles.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.