Mapbox-gl-js: Disabling transition for text on MapBox

Created on 29 May 2018  Â·  4Comments  Â·  Source: mapbox/mapbox-gl-js

I'm using clusters in my map, and the numbers (text) inside the cluster circle
(like in the mapbox example https://www.mapbox.com/mapbox-gl-js/example/cluster/).

Each time the cluster number is being updated, (We have moving features) the number (text) inside the cluster is fading in and out.

I'm trying to disable this tranistion using the following settings without success.

Thanks in advance.

`
paint: {

            "text-opacity": 1,
            "text-opacity-transition": {
                "duration": 0
            }

        }`

Most helpful comment

yes what you're seeing is labels fading in – to disable this behavior in advance of a more long-term fix (#6692) you can use text-allow-overlap: true

All 4 comments

the number (text) inside the cluster is fading in and out

Maybe this is a label fade-in and not a transition, more information here:

https://github.com/mapbox/mapbox-gl-js/issues/6694
https://github.com/mapbox/mapbox-gl-js/pull/6702
https://github.com/mapbox/mapbox-gl-js/issues/6519#issuecomment-390001993

yes what you're seeing is labels fading in – to disable this behavior in advance of a more long-term fix (#6692) you can use text-allow-overlap: true

Worked like a charm! Thanks

FYI. Was able to correct label fading in using the fadeDuration map option to lower the default value. This works very well for this 'blinking issue' with labels that are associated with moving/updating data source. Documented here: https://docs.mapbox.com/mapbox-gl-js/api/map/

Was this page helpful?
0 / 5 - 0 ratings