I am trying to find a way to change zoom by delta when using mouse wheel event (scroll) in Leaflet.

E.g. current map zoom is on 0 and if "scrolled" into map, zoom should be 5.

Also, zoom change should take zoom location in account.

E.g. map is 1000px * 1000px, then if mouse wheel is done on [x:1000, y:0], then it should be zoomed in that part (in right upper corner) and not random or in center.

Attempts / Results

  • adding mousewheel listener on map div - zoom delta working by calling zoomIn(), zoom position random, can not get info on coordinates since it is not Leaflet event
  • adding mousewheel listener on tile div - not able to do anything with it
  • adding zoomstart listener on map - not able to do anything with it

Use the zoomDelta map option to control how many zoom levels the map shall change when using keyboard controls or the zoom buttons, and the wheelPxPerZoomLevel option to control how fast the mouse wheel will change zoom levels.

Please note that scroll events are finicky, and depend on the web browser and your actual hardware. Some mice scroll in steps, some touchpads report a fine amount of scrolled pixels, some other are just weird. Assume that a "scroll click" is 60 pixels, and adjust the value of wheelPxPerZoomLevel accordingly - e.g. if you want to scroll 5 zoom levels at a time, use a value of (60/5)=12, and a zoomDelta of 5:

var map = L.map('map-container', {
    zoomDelta: 5,
    wheelPxPerZoomLevel: 12 
  • That's it! Thanks! Don't know how I missed this setting :/. Hopefully it will look good on most browsers and devices. Anyway, thanks! :) – myFirstStackOverflowQuestion Oct 12 '18 at 18:47

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.