1.3.0 • Published 4 years ago
@lweller/leaflet-areaselect v1.3.0
Leaflet AreaSelect
AreaSelect is a leaflet plugin for letting users select a square area (bounding box), using a resizable centered box on top of the map.
Another similar plugin is leaflet-locationfilter, which solves the same problem but provides a rectangle that is movable and not fixed to the center, but doesn't support keeping the aspect ratio.
Example Code
// Add it to the map
var areaSelect = L.areaSelect({width:200, height:300, minWidth:40, minHeight:40, minHorizontalSpacing:40, minVerticalSpacing:100});
areaSelect.addTo(map);
// Read the bouding box
var bounds = areaSelect.getBounds();
// Get a callback when the bounds change
areaSelect.on("change", function() {
console.log("Bounds:", this.getBounds());
});
// Set the dimensions of the box
areaSelect.setDimensions({width: 500, height: 500})
// And to remove it do:
//areaSelect.remove();
You can also make it keep the aspect ratio:
var areaSelect = L.areaSelect({width:200, height:300, keepAspectRatio:true});
If you need the coordinates for all four corners of the bounding box:
var bboxCoordinates = areaSelect.getBBoxCoordinates();
See it in action
Check out the bundled example, or this JSFiddle where I've set keepAspectRatio:true.
Author
AreaSelect is developed by Jonatan Heyman.
Further improvements made by Lucien Weller.
Change Log
1.2.1
- Initial Version published to npmjs under spoce lweller
1.3.0
- Feature: added events to cover the complete resizing cycle (resizsestart, resize, resizeend)
- Feature: exposed in type definition current dimension of area with getDimensions
- Fix: extending AreaSelect form Evented in type definition
- Fix: rendering when area select dimension are bigger than map
- Fix: position of handles when a scrollbar is display on page
License
MIT License