[GIS] How to slow the zoom transition speed in Leaflet

leafletzoom

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.

Best Answer

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.