Skip to content
Branch: master
Go to file
Code

Latest commit

heyman committed 1afaf21 Apr 5, 2020
Merge pull request #37 from eyseman/master
Added new function getBBoxCoordinates and updated readme

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Sep 11, 2017

README.rst

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.

longitude.me

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});
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.

License

MIT License

About

Leaflet plugin for letting users select an area of the map using a rectangle, and get the bounding box

Resources

Releases

No releases published
You can’t perform that action at this time.