How to slow the zoom transition speed in Leaflet?

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.


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.


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.

Tags:

Leaflet

Zoom