A Leaflet control to do a box zoom
npm install leaflet-control-boxzoomA 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
For the impatient, you can copy-paste from the live demo at http://gregallensworth.github.io/L.Control.BoxZoom/
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:
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.