Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Canvas CircleMarker flicker on cluster animation

See original GitHub issue

Originally https://github.com/Leaflet/Leaflet/issues/5011, reported by @stefanhagiu

When:

There is a markercluster
Which has its animated option is set to true
And has L.CircleMarkers instead of L.Markers
And the markers are rendered in a L.Canvas

then, the CircleMarkers will flicker during a zoom animation, as the cluster marker is destroyed/created and the individual markers are destroyed/created.

Reproducible test case:

using leaflet + marker cluster + svg [ works as expected ]: https://codepen.io/anon/pen/YGLbGq?editors=1010
using leaflet + marker cluster + canvas [ fails to work ]: https://codepen.io/anon/pen/PGZONy?editors=1010
using leaflet + canvas [ no clustering works as expected]: https://codepen.io/anon/pen/wzjbgP?editors=1010

Issue Analytics

State:
Created 7 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

ghybscommented, Oct 15, 2016

Looks like it is caused by L.Canvas flag layer._removed https://github.com/Leaflet/Leaflet/blob/master/src/layer/vector/Canvas.js#L95

It is set when layer is removed from canvas, but cleared only on deferred _draw. Therefore when adding the layer to the canvas, it catches the flag and removes the layer from canvas just after having adding it…

Clearing that flag when calling _initPath looks to fix the issue. https://github.com/Leaflet/Leaflet/blob/master/src/layer/vector/Canvas.js#L87

Fixed Plunker: https://plnkr.co/edit/jm1qNpdEpPJPDRdXk9ja?p=preview

0reactions

IvanSanchezcommented, Oct 27, 2016

Fixed upstream in https://github.com/Leaflet/Leaflet/issues/5011