Paint properties involving ["get", ...] are only evaluated at integer zoom levels
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
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:
```ts
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the reported fill-color expression from the issue with mapbox-gl-js 3.5.1, focusing on the paint-property evaluation path for ['get', 'fillColor'] and fractional zoom interpolation. Done means the feature-derived color changes smoothly between zoom levels instead of being reevaluated only at integer zooms.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100