1

I want my features to smoothly transition different to colors based on its data.

For this I apply a new map.setPaintProperty but then the 'fill-color-transition' property becomes lost, forever.. Some code from a Maplibre jsfiddle

Mapboxgl seems to have same issue jsfiddle mapbox

layer paint property:

  paint: {
    'fill-color-transition': {
        duration: 3700

    },
    'fill-color': 'blue',
    'fill-opacity': .6
}

//it properly smoothly changes the colors
map.setPaintProperty('polygons-layer','fill-color','orange')

map.setPaintProperty(
    'polygons-layer',
    'fill-color',
    [
        'match',
        ['get', 'id'],
        1, 'red',
        'gray' 
    ],
    'rgba(236, 235, 235, 0.1)' // Default color for all other cases
);


setTimeout(function() {
    //transition not working anymore 
    map.setPaintProperty('polygons-layer', 'fill-color', 'orange')
}, 2000)
6
  • Works without problems in Mapbox GL JS, so it seems like a bug in Maplibre GL JS.
    – TomazicM
    Commented Jan 29 at 19:27
  • Mentioned JSFiddle is still using Maplibre.
    – TomazicM
    Commented Jan 30 at 8:50
  • See working JSFiddle with Mapbox GL JS: jsfiddle.net/TomazicM/7e3akowc
    – TomazicM
    Commented Jan 30 at 9:21
  • sorry @TomazicM i just updated the mapbox jsfiddle jsfiddle.net/perikut/Lpgtx43v/11 and problem persists. Take into account that you are not applying a new symbolization before the transition as I do below (transitions stop working then) map.setPaintProperty( 'polygons-layer', 'fill-color', [ 'match', ['get', 'id'], 1, 'red', 'gray' ], 'rgba(236, 235, 235, 0.1)' // Default color for all other cases ); Commented Jan 30 at 9:51
  • Yes, you are right. After filter is used in the style, transition does not work any more. Seems like a bug.
    – TomazicM
    Commented Jan 30 at 15:07

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.