Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Truly smooth zooming in Leaflet

Tags:

leaflet

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.

like image 950
Léon Rodenburg Avatar asked Jan 20 '17 08:01

Léon Rodenburg


People also ask

How do I get rid of the zoom button on my leaflet?

You can remove the default zoom control by setting the zoomControl option of the map options to false.

What is zoom level?

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.

How do you reset the map on leaflet?

A reset view control for Leaflet. Move the map then click the reset button to see the reset effect.


1 Answers

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.)

like image 100
stevevance Avatar answered Sep 23 '22 19:09

stevevance