Paint properties involving ["get", ...] are only evaluated at integer zoom levels
I have defined a style layer whose fill color depends on the zoom level. The source layer defines a fillColor property and the different source feature colors fade to a uniform black when zooming in:
map.addLayer({
id: 'my-style-layer',
type: 'fill',
source: 'my-source-layer',
paint: {
'fill-color': [
'interpolate',
['linear'],
['zoom'],
16.5,
['get', 'fillColor'],
19.0,
'#000000',
],
},
layout: {},
});
Now the colors do fade to black, but the fill-color is apparently only evaluated at integer zoom steps leading to a very jagged animation as there are only 3 zoom steps where the colors change.
If I hardcode both near & far colors, i.e. replace ['get', 'fillColor'], -> '#ffffff', then the fill-color is evaluated also at fractional zoom changes and the animation is smooth (but obviously with the wrong color when zoomed out)
I understand that layout properties are only re-evaluated at integer zoom levels, but this is a paint property and according to the documentation is also evaluated at fractional zoom levels (https://docs.mapbox.com/style-spec/reference/expressions/)
mapbox-gl-js version:
Version 3.5.1
browser:
Chrome
It's a paint property but it is data-driven, which means the values for it have to be evaluated during data processing when loading the tiles and processing features, since we can't reevaluate the value for every feature on every frame in real time — this would be too costly. This is just the way data-driven properties are implemented in general. We might need to improve documentation around limitations like this, but there's no way to fix this on GL JS side because of its technical architecture.
Is there a way to manually trigger reevaluation? We don't really care too much about the colors while there is a lot going on, but when idle it would be nice to adjust the colors to the values according to the fractional zoom level and not the most-recent integral zoom level.