Truly smooth zooming in Leaflet

Question

For a few days, I've been trying to find out how to make Leaflet have fluid zoom, and by that I mean the one that can be found in for example OpenSeadragon. I've been playing around with the zoomSnap, wheelDebounceTime and wheelPxPerZoomLevel settings on the Map object, but all to no avail.

Fluid zoom has a huge 'wow'-factor and on top of that I would like to use Leaflet Draw to have users annotate tiled old maps, for storytelling purposes.

Is there anyone that has successfully achieved OpenSeadragon-style zooming? The .flyTo() method seems to relatively be able to smoothly zoom in and out, as does the TouchZoom handler. Also, when clicking the zoom-buttons the image zooms in smoothly. But I can't for the life of me figure out how to use that on scroll events.

Can anyone point me in the right direction?

A demo of the problem can be found here.

Answer 1

There is a Leaflet plugin called SmoothWheelZoom that has partial zoom levels for a smoother looking effect when zooming in or zooming out. SmoothWheelZoom is not listed on Leaflet's plugins page.

(It looks exactly like the OpenLayers smooth zoom.)

Answer 2

Leaflet now has partial zoom levels:

A feature introduced in Leaflet 1.0.0 was the concept of fractional zoom. Before this, the zoom level of the map could be only an integer number (0, 1, 2, and so on); but now you can use fractional numbers like 1.5 or 1.25.

Fractional zoom is disabled by default. To enable it, use the map’s zoomSnap option. The zoomSnap option has a default value of 1 (which means that the zoom level of the map can be 0, 1, 2, and so on).
[...]
zoomSnap can be set to zero. This means that Leaflet will not snap the zoom level.

This works especially well with pinch-zoom on smartphone, but it isn't as reactive as what I've seen on MapBox or OpenLayers.

---

See this article for a live demo with explanations

Answer 3

I don't think it is possible to get a truely smooth zoom given the current zoom implementation in the library, however it is possible to control the timings of the animations:

const map = L.map('map', {
    // 1 / 10th of the original zoom step
    zoomSnap: .1,
    // Faster debounce time while zooming
    wheelDebounceTime: 100
})

To reduce the animations you'll have to override some CSS rules:

  .leaflet-zoom-anim
  .leaflet-zoom-animated {
    transition-timing-function: linear;
    transition-duration: 100ms;
  }