A Leaflet control to do a box zoom. Not everyone knows about holding down Shift, and prefer to have a visible, clickable button to do box zooms.
Switch branches/tags
Clone or download

README.md

L.Control.BoxZoom

A Leaflet control to do a box zoom. Not everyone knows about holding down Shift, and prefer to have a visible, clickable button to do box zooms.

Beyond that, this control also supports improvements over the stock box zoom behavior:

  • ability to force an aspect ratio for the drawn zoom-box

Installation and Example

Super Quick

For the impatient, you can copy-paste from the live demo at http://gregallensworth.github.io/L.Control.BoxZoom/

More Detailed

The dist/ folder contains the essentials: a JS file, a CSS file, and a single SVG icon.

Simply include the JS and CSS as usual:

<script src="dist/leaflet-control-boxzoom.js"></script>
<link rel="stylesheet" href="dist/leaflet-control-boxzoom.css" />

Then add the Control to your map:

L.Control.boxzoom({ position:'topleft' }).addTo(map);

Contructor Options are as follows:

  • enableShiftDrag Enable the original functionality of Leaflet's shift-drag box zoom, in addition to the button. Defaults to false to disable Leaflet's shift-draw behavior, so the button must be used.
  • keepOn Boolean. Controls whether the zoombox button will remain active after zooming. Defaults to false (after zoom, turn off).
  • aspectRatio Number of fraction. Force the box to the given width-to-height aspect ratio. Easiest if you express it as a fraction e.g. aspectRatio: 8/7 Defaults to null so no aspect ratio will be enforced and any box may be drawn.
  • title A tooltip when the user hovers their mouse over the control.
  • position Any of the usual position flags for a L.Control subclass: topright, topleft, and so on.
  • divClasses Add classes to the div that holds the Leaflet control.
  • iconClasses Any valid classes for an icon element. Used for easily adding a custom icon to the button.