fitBounds() and setMaxBounds()

1,851 views
Skip to first unread message

Johannes Mario Ringheim

unread,
Aug 12, 2013, 7:54:22 AM8/12/13
to leafl...@googlegroups.com
Hi. I am using fitBounds() and setMaxBounds() to display a certain area and to limit user's ability to pan or zoom outside of that. For this I am first doing fitBounds(), followed by setMaxBounds(map.getBounds()).

What I have discovered is that in some situations (seemingly dependant on width/height of the map), setMaxBounds will set the minimum zoom one level too high. The consequence is that the user can't zoom out to view the whole area, and the map does not display the whole area at once when the app is started.

I have made two JSFiddles which demonstrates the problem.

This one works fine:
http://jsfiddle.net/4yYWt/7/

In this one, the bounds seem to be as they should, but I can't zoom out to view the whole area:
http://jsfiddle.net/4yYWt/8/

Is it something I am doing wrong? Or is this a bug in Leaflet?

Thanks for any input.

amir lamdan

unread,
Aug 13, 2013, 8:18:32 AM8/13/13
to leafl...@googlegroups.com
in the one that doesn't work your bounds are probably smaller than the size of the map div - which causes the map to zoom back in.
expand your boundaries or change the map div size or add an event listener for onclick the zoomout botton

amir lamdan

unread,
Aug 13, 2013, 9:34:33 AM8/13/13
to leafl...@googlegroups.com
by the way. How would you add an event listener to the zoomout botton?


On Monday, August 12, 2013 7:54:22 AM UTC-4, Johannes Mario Ringheim wrote:

Johannes Mario Ringheim

unread,
Aug 15, 2013, 9:13:31 AM8/15/13
to leafl...@googlegroups.com
As you can see from the second fiddle, I do map.setMaxBounds(map.getBounds()), *after* fitBounds has run. My understanding is that it will take the *current* bounds and make them the maximum. In other words, setMaxBounds should be set to exactly the view I get from fitBounds.

I have made a third fiddle which shows that fitBounds seems to be working perfectly, by commenting out setMaxBounds:

http://jsfiddle.net/4yYWt/10/

Could it be map.getBounds() which is faulty here?
Reply all
Reply to author
Forward
0 new messages