Why does calling leaflet's setZoom twice results on the second being ignored?

Question

To reproduce this problem, you can go to http://leafletjs.com/ and in the javascript console, write the following:

> map.getZoom()
15
> map.setZoom(10);map.setZoom(1);
Object
> map.getZoom()
10

I was expecting the final getZoom to return 1. Why does this happen? The problem may be related with the zoom animation. If a setZoom is called before the animation ends, it gets ignored.

I'm integrating leaflet with emberjs and wanted to allow zoom changes by external changes. If the user changes zoom quickly, the effect isn't the desired.

Answer 1

L.Map.setZoom called L.Map.setView that called L.Map._animateZoomIfClose. If map._animatingZoom is true then any zoom will stop. map._animatingZoom work like look for zoom animation:

1. Check at L.Map._animateZoomIfClose if true stop zoom else call L.Map._animateZoom.
2. Set to true at L.Map._animateZoom and start css transition.
3. Set to false at L.Map._onZoomTransitionEnd on css transition end.

Why it's as is? I think because it's difficult break css transition work.

So if you will disable any css transform and transition your code must work right. You also can add own extension: if map._animatingZoom === true then put your action to array, when map._catchTransitionEnd called process this and shift your action from array and process:

if (L.DomUtil.TRANSITION) {
    L.Map.addInitHook(function () {
        L.DomEvent.on(this._mapPane, L.DomUtil.TRANSITION_END, function () {
            var zoom = this._zoomActions.shift();
            if (zoom !== undefined) {
                this.setZoom(zoom);
            }
        }, this);
    });
}

L.Map.include(!L.DomUtil.TRANSITION ? {} : {
    _zoomActions: [],
    queueZoom: function (zoom) {
        if (map._animatingZoom) {
            this._zoomActions.push(zoom);
        } else {
            this.setZoom(zoom);
        }
    }
});