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.
You can remove the default zoom control by setting the zoomControl option of the map options to false.
A zoom level or scale is a number that defines how large or small the contents of a map appear in a map view . Scale is a ratio between measurements on a map view and measurements in the real-world.
A reset view control for Leaflet. Move the map then click the reset button to see the reset effect.
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.)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With