To reproduce this problem, you can go to / 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.

To reproduce this problem, you can go to http://leafletjs./ 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.

• javascript
• leaflet

Share Improve this question Follow asked Mar 28, 2013 at 0:10 miguelcobainmiguelcobain 4,75455 gold badges3434 silver badges4545 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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);
        }
    }
});