Zoom box control for Leaflet
JavaScript CSS HTML
Latest commit 49e6cc3 Dec 8, 2016 @brendan-ward brendan-ward bumped version



A zoom box control for Leaflet.

It allows you to draw an area on the map to zoom into. See the example.

Tested with Leaflet 1.0.


From Bower:

bower install Leaflet.ZoomBox

From NPM:

npm install leaflet-zoombox


Include the CSS:

<link rel="stylesheet" href="L.Control.ZoomBox.css" />

Include the JavaScript:

<script src="L.Control.ZoomBox.min.js"></script>

This control uses Google Material Icons by default.

Example usage:

var control = L.control.zoomBox({
    modal: true,  // If false (default), it deactivates after each use.  
                  // If true, zoomBox control stays active until you click on the control to deactivate.
    // position: "topleft",                  
    // className: "customClass"  // Class to use to provide icon instead of Font Awesome
    // title: "My custom title" // a custom title


Developed with support from the South Atlantic Landscape Conservation Cooperative, and maintained with support from Peninsular Florida LCC and the U.S. Forest Service Northwest Regional Climate Hub.

Binding to the map's zoom box (shift-click) was inspired by ScanEx


See Also:

L.Control.BoxZoom: an alternative implementation