https://github.com/heyman/leaflet-areaselect

Leaflet plugin for letting users select an area of the map using a rectangle, and get the bounding box
https://github.com/heyman/leaflet-areaselect

Last synced: 1 day ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/heyman/leaflet-areaselect
• Owner: heyman
• Created: 2014-02-06T12:17:56.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2023-11-21T19:39:28.000Z (12 months ago)
• Last Synced: 2024-11-01T09:46:07.420Z (7 days ago)
• Language: JavaScript
• Homepage:
• Size: 43 KB
• Stars: 111
• Watchers: 5
• Forks: 39
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Leaflet AreaSelect [![npm version](https://badge.fury.io/js/@jonatanheyman%2Fleaflet-areaselect.svg)](https://badge.fury.io/js/@jonatanheyman%2Fleaflet-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](https://s3-eu-west-1.amazonaws.com/heyman.info/screenshots/leaflet-areaselect.jpg)

Another similar plugin is [leaflet-locationfilter](https://github.com/kajic/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

```javascript

    // Add it to the map

    var areaSelect = L.areaSelect({width:200, height:300, minWidth:40, minHeight:40, minHorizontalSpacing:40, minVerticalSpacing:100, keepAspectRatio:false});

    areaSelect.addTo(map);

    

    // Read the bounding 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();

```

#### To make it keep the aspect ratio:

```javascript

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

```

#### To set the selected area (not compatible with `keepAspectRatio:true`):

```javascript

    areaSelect.setBounds([{lat:59.2272559, lng:17.7606917}, {lat:59.4402838, lng:18.2000673}]);

```

## See it in action

Check out the [bundled example](http://heyman.github.io/leaflet-areaselect/example/).

## Author

AreaSelect is developed by [Jonatan Heyman](http://heyman.info).

## License

MIT License