I have a leaflet map (version 1.6.0) with zoom control. It works correctly most of the time, but what I noticed is that on zoom out the zoom delta is NOT always consistent. To clarify, this happens using the zoom control buttons. Tested using recent versions of Chrome and Firefox. Happens on both.

So I zoom out at 10.5, it goes to 10.25, zoom out again it goes to 10... then sometimes when I zoom out again, the map zooms out to 9.75 for a second, then goes to 9. This only seems to happen when I zoom out on an integer zoom level. This also happens intermittently and never happens on zoom in.

Zoom scroll wheel seems to work fine.

Map settings below:

 var Tempmap = L.map('Temap', {

   //  preferCanvas: true,  //for leaflet image plugin
     zoomSnap: 0.25,
     zoomControl:true, maxZoom:45, minZoom:1,
     center: ([44.35, -123.051]),
     zoomDelta: 0.25,
     zoom: 10.5,

I have tried 1.7dev with the same results.

I also have noticed that if I Pan with a current zoom level at a non-integer. The map pans correctly then zooms out to the next lower integer.

Some more background: I have 8 map objects on a web page, they are shown one at a time with user tab click. All maps have the same issue with zoom out(it does happen on a zoom in but much much less frequently than zoom out). I have been further inspecting and trying out different zoomDelta and zoomSnap values to not avail.

If I test with a single map only, I can NOT reproduce the zoom out problem (it works).

I notice that when this problem happens, the div class leaflet-map-pane style=transform translate3d and leaflet-zoom-animated style = transform translate3d get called twice. The first time, the URL shows # as 10.75 for a second then goes to 10 on the second call. or 9.75 then 9.

After more testing this is what I have noticed:

  • The URL Zoom and Lat /Long values change as I pan and zoom on a map. When I switch tabs to another map the URL Zoom and Lat/Long values change as I pan and zoom (this seems correct to me). However I have the zoom problem described above.

  • Trouble shooting with a limited version of the app, I have three maps. Here I notice that the URL Zoom and Position values change on the first map when I navigate. However for the two other maps: I tab to them and zoom and pan, the URL Zoom and Lat/ Long values to not change and are the same as the last view of the first map. All these three maps respond to navigation and zoom in/out correctly but the URL does not change for two of them.

Hoping that maybe this provides more clues as to what is happening.

  • Which Leaflet version are you using? Try the latest 1.7 beta available at leafletjs.com/download.html. – TomazicM Jun 5 at 11:04
  • 1
    Please edit your question to include a specific sequence of actions that triggers the problem: make it explicit whether it's scrollwheel zoom, zoom control buttons, +/- keys, or something else. – IvanSanchez Jun 5 at 11:51
  • Couldn't reproduce this behavior neither in Chrome or Firefox. Can you post you problematic code on JSFiddle or CodePen? – TomazicM Jun 6 at 18:38
  • Hello, Code is extensive. trying to break down code and extract problematic part. – Enviro Jun 8 at 18:59
  • Are these 8 tabs 8 different maps, each with separate map container? – TomazicM Jun 8 at 19:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.