Leaflet maxBounds doesn't prevent zooming out

This is by design, or rather said, by default. The devs (me included) thought "well, users already have minZoom to prevent this kind of thing", so the focus was on making sure that the maxBounds were always visible when zoomed out.

As a workaround, you might want to run something like:

 map.setMinZoom( map.getBoundsZoom( map.options.maxBounds ) );

Be aware that this might change if the map container is resized.


As another workaround, I used the properties said in here!, especifically that the width or height of the world is 256*Math.pow(2, zoomLevel) pixels.

Then, considering that the width and height of the map can be caught through javascript (clientWidth and clientHeight), the minZoom to not show beyond the bounds would be:

minZoom = Math.ceil(Math.log2(Math.max(width, height) / 256))

Which is just a development of the previous formula used with the map's width and height to find a minZoom value.