consbio/leaflet.zoombox

Zoom box control for Leaflet

Leaflet.ZoomBox

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.

Install

From NPM:

npm install leaflet-zoombox

Usage

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);
map.addControl(control);

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

Changes:

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

Credits:

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

Contributors:

• Brendan Ward
• Nik Stevenson-Molnar
• Kaveh Karimi-Asli
• Andreas Adelsberger
• Isaac Nygaard

See Also:

L.Control.BoxZoom: an alternative implementation

leaflet.zoombox's Issues

Rectangle stays visible when right click

When you left-click and drag, drawing the rectangle, and you right-click before you release the left button the rectangle doesn't disappear.

Disable map events under the zoombox button

Same issue as here

Control causes a click event on the map at the end of boxzoom

When this control is added to a map, using the box zoom (either with this control, or by using the built-in shift+click) results in a click event on the map when the user releases the mouse.

Update to Leaflet 1.1

[accessibility] Control should have `role="button"`

The control is conveyed as link to screen reader users, the control should be role="button" (same as Leaflet controls).

Zoom out by box

Hi,
First, thanks for your plugin, it’s very useful.
But I have one question; do you think it’s possible to do a zoom out by box?
Do you have some ideas?
Thanks.

Incorrect name binding issue with Angular-CLI / Webpack

Hi, there is an issue with your library (which is great) for Angular-CLI with Webpack.

Since there are no typings, we need to add the file in the script array in the .angular-cli.json file :

"scripts": [
        "../node_modules/leaflet-zoombox/L.Control.ZoomBox.js",
      ],

And add a global variable that would let us bind this one to the ones we need in the library in the typings.d.ts file.

declare var zoomBox: any;

The issue is that we can't declare a variable such as L.Control.ZoomBox or L.control.zoomBox because of the dots.

And thus it doesn't work at all : TypeError: L.control.zoomBox is not a function

---

Changing the name in the library makes it work correctly :

ZoomBox = L.Control.extend({
  ...
});

zoomBox = function (options) {
  return new ZoomBox(options);
};

when binded correctly and called in my files :

  declare var zoomBox: any;

  initZoomBox(map) {
    const control = zoomBox({ modal: false });
    map.addControl(control);
  }

please release to npm and or bower

Also please add a version via tagging.

[accessibility] `title` does not label the control

The title should be set on the <a> control instead of the parent <div>. This ensures users with screen readers can access the title description.

Demo page broken

Tested in latest Firefox.

R implementation

This seems like an amazing tool, but I'm using the the R version of leaflet. Is there some way to make your plugin work for that platform? I imagine that using htmlwidgets::onRender() could be used to get the CSS and javascript in the right places, but I can't quite get it to work. I have the contents of the package in the current working directory, but nothing quite seems to work.

m <- leaflet() %>%
addTiles() %>% addMouseCoordinates() %>% addLayersControl() %>%
addMeasure() %>%
addMiniMap( toggleDisplay = TRUE,
position = "topright") %>% addDrawToolbar() %>% addFullscreenControl() %>% # htmlwidgets::onRender(paste0("

<script src=\"L.Control.ZoomBox.min.js\"></script> var options = { modal: true, title: 'Box area zoom' }; var control = L.control.zoomBox(options); map.addControl(control);"))

boxZoom outline does not show for Leaflet 1.0 beta