mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.2k stars 2.22k forks source link

`fill-color-transition` has no effect when updating feature state #11748

Open fdansv opened 2 years ago

fdansv commented 2 years ago

Hi y'all. I have a fill layer where I want to change its features' fill color according to some featureState in them, but applying a transition in between. The paint properties of this layer are as follows:

paint: {
  'fill-color-transition': {
    duration: 300,
    delay: 50,
  },
  'fill-color': [
    'to-color',
    ['feature-state', 'fill'],
    "#687287",
  ]
},

My expectation would be that once I call setFeatureState on one of that layer's features, the color will be gradually changed as specified in thefill-color-transition` property. But so far it's just switching colors without transition.

Additionally, when trying to debug with queryRenderedFeatures, the transition property seems to have been set to undefined, which seems unusual.

paint: {
  fill-color: Ge {r: 0.00784313725490196, g: 0.2627450980392157, b: 0.45098039215686275, a: 1},
  fill-color-transition: undefined
}

The docs don't seem super clear on whether transitions are compatible with feature state changes, as opposed to paint property changes (indeed, going that route seems to work as expected but I need to change individual feature states, not the whole layer). So I wanted to know if there's anything here I'm doing wrong.

Thank you!

mourner commented 2 years ago

As far as I understand, transitions for feature-state-dependent properties are not supported in the same way as data-driven properties don't, since we have to maintain these values in vertex data as opposed to global property changes (non-data-driven, updated through WebGL uniforms). We should make this clearer in the docs.