https://github.com/w8r/leaflet-area-select
Control to just select an area and provide bbox for it
https://github.com/w8r/leaflet-area-select
area leaflet leaflet-plugins select
Last synced: about 1 year ago
JSON representation
Control to just select an area and provide bbox for it
- Host: GitHub
- URL: https://github.com/w8r/leaflet-area-select
- Owner: w8r
- License: mit
- Created: 2015-10-12T13:18:17.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2024-10-02T09:13:29.000Z (over 1 year ago)
- Last Synced: 2025-03-29T15:05:49.794Z (about 1 year ago)
- Topics: area, leaflet, leaflet-plugins, select
- Language: JavaScript
- Homepage: https://w8r.github.io/leaflet-area-select/
- Size: 1.4 MB
- Stars: 35
- Watchers: 1
- Forks: 16
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# leaflet-area-select [](https://badge.fury.io/js/leaflet-area-select) [](https://circleci.com/gh/w8r/leaflet-area-select/tree/leaflet-1.0)
Control to just select an area and provide bbox for it
## [Demo](http://w8r.github.io/leaflet-area-select/)
## Include
### Browserify, Webpack
```shell
npm install --save leaflet-area-select
```
```javascript
var SelectArea = require("leaflet-area-select");
// or
import SelectArea from "leaflet-area-select";
```
### Browser
```html
```
## Usage
Including the handler into the project will automatically add it to the `L.Map`,
so to enable/disable it you can use methods:
```javascript
let map = new L.Map("map", {
selectArea: true, // will enable it by default
});
// or
map.selectArea.enable();
map.on("selectarea:selected", (e) => {
console.log(e.bounds.toBBoxString()); // lon, lat, lon, lat
});
// You can restrict selection area like this:
const bounds = map.getBounds().pad(-0.25); // save current map bounds as restriction area
// check restricted area on start and move
map.selectArea.setValidate((layerPoint) => {
return bounds.contains(this._map.layerPointToLatLng(layerPoint));
});
// now switch it off
map.selectArea.setValidate();
```
### Key-strokes
```javascript
// dragging will be enabled and you can
// start selecting with Ctrl key pressed
map.selectArea.setControlKey(true);
// box-zoom will be disabled and you can
// start selecting with Shift key pressed
map.selectArea.setShiftKey(true);
```
## License
MIT