How to slow the zoom transition speed in Leaflet?

Question

I'd like to slow the speed of the zoom transition in Leaflet, but I haven't figured out how.

I'm using map.setView() a few times to change the zoom level.

---

I've tried the solution suggested here: Setting a slower zoom speed

Which is to increase the transition time in CSS for

.leaflet-zoom-anim .leaflet-zoom-animated {
    transition: 2s;
}

But, it doesn't seem to work. It starts to slow down, but then just jumps to the zoom level, so it doesn't look smooth at all.

---

The pan animation, and duration works great.

I've tried all these options:

map.setView([lat, long], 14, {
    pan: {
        animate: true,
        duration: 1.5
    },
    zoom: {
        animate: true
    }
});

and

var map = L.map("map", {
    center: [45.2403, -123.8512],
    zoom: 12,
    fadeAnimation: true,
    zoomAnimation: true
});

But nothing seems to slow or smooth the zoom transition.

Answer 1

Your map.flyTo() has the options malformed, you want

map.flyTo([lat, long], 14, {
        animate: true,
        duration: 1.5
});

See Doc's pan-options. The same parameters will work fine also with panTo() and setView() methods.

Answer 2

After looking closer at the documentation, I found it's better to use:

flyTo(<LatLng> latlng, <Number> zoom?, 
    <Zoom/pan options> options?
)

Instead of:

setView(<LatLng> center, <Number> zoom?,
    <Zoom/pan options> options?
)

At least for my purpose. It slows the zoom down, and appears a bit more smooth. However, it'd be nice to have more control over the zoom speed, but this is good enough for now.

Answer 3

But, it doesn't seem to work. It starts to slow down, but then just jumps to the zoom level

That's because of this one line of code here, with a hard-coded duration:

https://github.com/Leaflet/Leaflet/blob/release-v1.0.3/src/map/Map.js#L1573

setTimeout(L.bind(this._onZoomTransitionEnd, this), 250);

Ideally, the zoom animations in Leaflet 1.x would be defined by the CSS transform. However, problems with cross-browser compatibility made necessary to hard-code that timeout.

You could overload the private _animateZoom by doing something like L.Map.prototype._animateZoom = function (center, zoom, startAnim, noUpdate) { ... }, doing an ugly copy-paste of the original but changing the duration there. That, however, is a very very ugly hack and totally not recommended.

Answer 4

With ReactLeaflet v2 this worked for me:

    createLeafletElement() {
        if (L.Browser.chrome) {
            L.Browser.passiveEvents = true                                  // to better performance
        }
        const MapInfo = L.Control.extend({
            onAdd: (map) => {
                map.setZoom(26, { animate: true, duration: 2000 })
                this.panelDiv = L.DomUtil.create('newZoomDiv');
                return this.panelDiv;
            }
        });

        return new MapInfo();
    }