search

maplibre / maplibre-gl-js

MapLibre GL JS - Interactive vector tile maps in the browser
https://maplibre.org/maplibre-gl-js/docs/
Other
6.75k stars 727 forks source link

fill-color-transition not honored on first 1-2 transitions, if the fill-color is an expression #4961

Open birkskyum opened 4 weeks ago

birkskyum commented 4 weeks ago

Repro here: https://codepen.io/birkskyum-1471370946/pen/NWQzdZG

changing the color will be instant on 1-2 first clicks, despite a "fill-color-transition": { "duration": 2000 },

This issue go away by replacing the fill-color expression:

"fill-color": ["match",["get","ADM0_A3"],["ATA","GRL"],"#FFFFFF","#EAB38F"]

With a string color:

"fill-color": "green"

Demo

The video show that the first time i click on the expression fill-color, the transition is instant, and then it's normal for subsequent clicks.

Changing the fill-color to "green" makes the first clock behave as expected as well

https://github.com/user-attachments/assets/49154673-ab3b-4b0a-8d00-eafb5fc509cc

popkinj commented 3 weeks ago

I'm in this space at the moment.

I currently use a mix of D3's color, scale and interpolation tools to transition things in a requestAnimationFrame function. I'm doing this because I (maybe falsely) assumed there was no paint expression support for color.

Is there something in the works for color transformation that I haven't stumbled on? Maybe I can help out here or elsewhere.

birkskyum commented 3 weeks ago

@popkinj , there are color transitions in place already - example here. Try clicking the small color squared boxes.

The repro I made this ticket for, is that the first transition unfortunately happen instantaneous, and the second can be a bit late in animating, but it does work afterwards.

popkinj commented 3 weeks ago

Got it. Thanks @birkskyum . Think I'll have a little look. Fixing this will definitely help what I'm working on.