All Projects → w8r → leaflet-area-select

w8r / leaflet-area-select

Licence: MIT license
Control to just select an area and provide bbox for it

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to leaflet-area-select

Leaflet.TileLayer.Fallback
Replaces missing Tiles by scaled lower zoom Tiles
Stars: ✭ 29 (+7.41%)
Mutual labels:  leaflet, leaflet-plugins
esri-leaflet-vector
Display ArcGIS Online vector basemaps w/ Esri Leaflet
Stars: ✭ 39 (+44.44%)
Mutual labels:  leaflet, leaflet-plugins
Leaflet Geoman
🍂🗺️ The most powerful leaflet plugin for drawing and editing geometry layers
Stars: ✭ 1,088 (+3929.63%)
Mutual labels:  leaflet, leaflet-plugins
Leaflet.flowecharts
leaflet plugin for Baidu Echarts
Stars: ✭ 17 (-37.04%)
Mutual labels:  leaflet, leaflet-plugins
Geopackage Js
GeoPackage JavaScript Library
Stars: ✭ 191 (+607.41%)
Mutual labels:  leaflet, leaflet-plugins
Leaflet.markercluster.freezable
Adds ability to freeze clusters at specified zoom
Stars: ✭ 21 (-22.22%)
Mutual labels:  leaflet, leaflet-plugins
Leaflet.featuregroup.subgroup
Creates a Feature Group that adds its child layers into a parent group when added to a map (e.g. through L.Control.Layers)
Stars: ✭ 79 (+192.59%)
Mutual labels:  leaflet, leaflet-plugins
Leaflet Ant Path
🌿🐜 Creates a leaflet polyline with a 'ant-path' animated flux
Stars: ✭ 296 (+996.3%)
Mutual labels:  leaflet, leaflet-plugins
Leaflet.browser.print
A leaflet plugin which allows users to print the map directly from the browser
Stars: ✭ 94 (+248.15%)
Mutual labels:  leaflet, leaflet-plugins
Leaflet Gps
Simple leaflet control plugin for tracking gps position
Stars: ✭ 90 (+233.33%)
Mutual labels:  leaflet, leaflet-plugins
Heatmap.js
🔥 JavaScript Library for HTML5 canvas based heatmaps
Stars: ✭ 5,685 (+20955.56%)
Mutual labels:  leaflet, leaflet-plugins
Leaflet Panel Layers
Leaflet Control Layers extended with support groups and icons
Stars: ✭ 210 (+677.78%)
Mutual labels:  leaflet, leaflet-plugins
Iclient Javascript
Modern GIS Web Client for JavaScript, based on Leaflet\OpenLayers\MapboxGL-JS\Classic(iClient8C), enhanced with ECharts\D3\MapV etc. Contributed by SuperMap & community.
Stars: ✭ 593 (+2096.3%)
Mutual labels:  leaflet, leaflet-plugins
Leaflet.extras2
Extra functionality for leaflet R package.
Stars: ✭ 37 (+37.04%)
Mutual labels:  leaflet, leaflet-plugins
Leaflet.markercluster
Marker Clustering plugin for Leaflet
Stars: ✭ 3,305 (+12140.74%)
Mutual labels:  leaflet, leaflet-plugins
Leaflet.path.drag
Drag functionality for Leaflet vector layers
Stars: ✭ 72 (+166.67%)
Mutual labels:  leaflet, leaflet-plugins
Leaflet-active-area
A Leaflet plugin to center the map not in the center of the map but inside a DIV. Useful for responsive design.
Stars: ✭ 99 (+266.67%)
Mutual labels:  leaflet, leaflet-plugins
Leaflet.pixioverlay
Bring Pixi.js power to Leaflet maps
Stars: ✭ 264 (+877.78%)
Mutual labels:  leaflet, leaflet-plugins
Leaflet.layergroup.collision
Leaflet plugin for uncluttering L.Markers using basic collision detection.
Stars: ✭ 82 (+203.7%)
Mutual labels:  leaflet, leaflet-plugins
Ngx Leaflet Starter
A soup of Angular and Leaflet
Stars: ✭ 208 (+670.37%)
Mutual labels:  leaflet, leaflet-plugins

leaflet-area-select npm version CircleCI

Control to just select an area and provide bbox for it

Demo

Include

Browserify, Webpack

npm install --save leaflet-area-select
var SelectArea = require('leaflet-area-select');
// or
import SelectArea from 'leaflet-area-select';

Browser

<script type="text/javascript" src="path/to/Map.SelectArea.min.js"></script>

Usage

Including the handler into the project will automatically add it to the L.Map, so to enable/disable it you can use methods:

let map = new L.Map('map', {
  selectArea: true // will enable it by default
});

// or
map.selectArea.enable();

map.on('areaselected', (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

// dragging will be enabled and you can
// start selecting with Ctrl key pressed
map.selectArea.setCtrlKey(true);

// box-zoom will be disabled and you can
// start selecting with Shift key pressed
map.selectArea.setCtrlKey(true);

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].