Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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.1.


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 options = {
    modal: true,
    title: "Box area zoom"
var control = L.control.zoomBox(options);


  • modal: (boolean, default = false); if false, it deactivates after each use; if true, zoomBox control stays active until you click on the control again to deactivate options (like a toggle button)
  • position: (string, default = "topleft"); position of the control
  • title: (string, default = "Zoom to specific area") title attribute for the control
  • className: (string, default = "leaflet-zoom-box-icon") className of the control link, which you can use to override the default styling; the active class will also be toggled for this element, when the control is activated; you can also override the control container style by creating a new CSS rule for .leaflet-zoom-box-control
  • content: (string, default = "") html content to set as innerHTML of the control link; used in conjunction with the className option, you can use svg or html code to customize the control (see examples/customContent.html)
  • addToZoomControl: (bool, default = false) if true, it will attempt to add the control to the map's existing zoomControl container; if false, the control link will be placed in a its own container


  • leaflet-zoom-box-icon className is now used for the control link; use of leaflet-zoom-box-control a {...} to style the control link in the CSS has been removed.


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