7

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.

6

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.

| improve this answer | |
  • 1
    Ivan: are you telling me that monkey patching private methods is not recommended? – atlefren Feb 15 '17 at 14:37
6

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.

| improve this answer | |
4

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.