Restricts Leaflet's map bounds to area not covered by any map controls


This Leaflet plugin overloads some of the map's methods (setView, fitBounds, setZoom) so that the bounds are relative to the area of the map not covered by any map controls (hence "controlled" bounds). The center of the map becomes the center of that area.


Try the example page !


Include the javascript file after including the main Leaflet library:

<script src="Leaflet.ControlledBounds.js"></script>

The useful bounds of the map will be cut down to the largest area not covered by any map controls (instances of L.Control added to the map).

Then, the map will center itself in the center of that DIV when calling setView, setZoom, fitBounds, getBounds, or zooming in/out.


The plugin will not detect changes in the size (or position) of the map controls. If the controls change under controlled circumstances (e.g. panels expanding), run invalidateSize():


The plugin has only been tested with Leaflet 0.7.x. It will most probably not work well with Leaflet 1.0's flyTo and flyToBounds methods.


Licensed under the Apache 2.0 license. See the LICENSE file for details.

Contains code from Leaflet-active-area.