mapbox-gl-js
mapbox-gl-js copied to clipboard
Incorrect Color on Zoom for Non-Opaque Fill Polygons with Dusk/Night Lighting
mapbox-gl-js version: v3.10.0, others untested
browser: Chrome and Firefox, others untested
Steps to Trigger Behavior
- Set the
lightPresettonightordusk - 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.
- 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.