Leaflet plugin for letting users select an area of the map using a rectangle, and get the bounding box
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
heyman Merge pull request #30 from savolkov/master
Now https really everywhere
Latest commit d0910cc Sep 11, 2017


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

// 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:

You can also make it keep the aspect ratio:

var areaSelect = L.areaSelect({width:200, height:300, keepAspectRatio:true});

See it in action

Check out the bundled example, or this JSFiddle where I've set keepAspectRatio:true.


AreaSelect is developed by Jonatan Heyman.


MIT License