Rapid Zoom In/Out does a bad animation about leaflet.markercluster

[danzel]

Looks like zooming out one level at a time before the animation finishes break it. Zooming in by itself is fine.

[danzel]

No I lie. Happens on zoom ins too, just less obvious.
Put the mouse in the corner of the zoom and do it.

[danzel]

Have fiddled with this all day. It's a pain to fix!

The issue is:

User hits zoom out.
[zoomstart]
[zoomanim]
Map does zoom out animation.
[zoomend]
Clusterer starts moving all markers towards their cluster position, queues up an event to remove them and add the cluster when the animation is done (250ms)

Then the silly user immediately hits zoom out before that timeout has fired, so:
[zoomstart]
[zoomanim]
Map does zoom out animation.
(In the middle of the animation the timeout fires and puts the markers on the map in the wrong place. I think)
[zoom end]
Clusterer does the same as above and fixes everything up.

My attempt to fix it was to remember the timeout when we set it up and if zoomstart fires before the timeout triggers then to call the timeout function then and clear the timeout. This should mean that the points are on the map as they should be, but it doesn't really work as expected as the new clusters get added at the location they should be at after the zoom animation rather than the location before and then .

One other problem is that when the user starts the second zoom out, the markers may be part way through their animation to move to their cluster location, so their location isn't known.

[danzel]

Okay, managed to get it to go!
The secret was to add the new (for the new zoom level) clusters to the map immediately after a zoom, but only make them visible when we want.
This means they are always correctly positioned (as leaflet looks after it for us) so the zoom animations don't break! yay!

[mourner]

Masterful fix David, awesome :)