heyman / leaflet-areaselect

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

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

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

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

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

See it in action

Check out the bundled example.

Author

AreaSelect is developed by Jonatan Heyman.

License

MIT License

leaflet-areaselect's Issues

ability to set max and min width, height

As the title says. Essentially my goal is to create rectangles that are limited on size in sq. km for example no rectangle greater than 900 sq. km.

However in this case limiting the zoom level and then also limiting this to say 500px would work great

IE9 area selector shows up beneath tile layer

I know everyone hates this kind of issue, but does anyone know if it's possible to get this to work in IE9?

It does look like the area selector shows up right when the page loads, but then the tile layer covers it. There's no errors or anything.

(using https://saucelabs.com to test)

Line no 44 error

this._container.remove is not a function

this._container.remove();

I am just creating button like this
var areaSelect , toggle = true;
$("#button").on("click",function(){
if(toggle)
{
areaSelect = L.areaSelect().addTo(map)
}else{
areaSelect.remove();
}
toggle = !toggle;
})

Let me know if am wrong.

Firefox issue: Invalid LatLng object: (NaN, NaN)

Resize attempts in Firefox (I only tested versions 31.0 and 32.0.3) result in a seizing up of the map and areaselect box. It becomes largely unusable.

Leaflet logs an error to the console:
Error: Invalid LatLng object: (NaN, NaN)

I'll try additional versions and in different environments later.

Issue sometimes while resizing

Steps to reproduce:

1. Click at extrem border of a handle
2. Drag nouse very fast outside of the handle

Actual behaviour: resizing stopps and is even no more possible for this handle until an other one has been used in between

Expected behaviour: normal resizing operation

Background: The problem sits on the fact that some browsers recognize this behaviour as drag&drop eventsand then stop to send mouse move events. It can be fixed by simply a event.preventDefault() in the initial onMouseDown event handler.

Overlapped or not fully covered shade in the interface

Hi, I would like to point out one question about the shades' display effect. I initialize the areselect with default parameters but the result shows that the different shades didn't connect perfectly with each other (the white line in the left part of the picture), then I found you use Math.round function to deal with the shade's width and height in _render function in the code, so isn't any potential problem to cause white line appeared in the initialization process? I also found the white line would disappeared occasionally, but can't control its' appearance during my scaling operations.

Best.

Invalid BBOX coordinates

When using Google Chrome, I sometimes getinvalid BBOX coordinates. The bug seems to occur rather sporadically, however, it seems to come up when one zooms in without touching the polygon and then asks for the coordinates (e.g. invokes getBounds()).

Ability to select a circle area instead of rectangle

Would love this added feature.

Angular problem

Hi

I cannot load the module using angular 7. I have several other leaflet plugins working, but this one just wont load.
Any idea why

areaselect displayed below tile layer

When I add the areaselect plugin to the map, the rectangle will be displayed below the tile layer. I haven't set any zIndex for the layer and just followed the example given here. Has somebody else faced this problem, too? Maybe this is related to issue #12. However, I have this problem with Firefox 45.4.0 and IE 11.

This is my code:

// Set up the map
var center = new L.LatLng(52, 10);
var map = L.map('map').setView(center, 13);
// Add the tile layer
L.tileLayer(urlToTileLayer).addTo(map);
// Add the area select overlay
var areaSelectOptions = {
    width: 200,
    height: 300
};
var areaSelect = L.areaSelect(areaSelectOptions);
areaSelect.addTo(map);

Does not work with touch devices

Currently, the plugin only listens to mouse events, and therefore doesn't work with touch devices. It should handle touch events as well.

New feature with "getDimensions" Function

It's really helpful to find the plugin of leaflet when I do my research project recent times, thanks for your efforts of previous developing works. An extra demand came to my mind when I need to handle multiple map instances in an synchronized way, and I add one function to solve my little problem.

The demand shows here: I need to synchronize the different maps when I zoom in/out or pan anyone among of them, as well as synchronize the areaselect area, a simple way is to exposed the dimensions of the operating box when the areaselect area detects change and then my other function can set the dimensions of box in other maps with the gotten dimension data, but there is not getDimensions function yet, so I added it, shows in #23 .

I also updated README with the usage.

Best.

Update demo URL

Hi all!

I noticed that the demo URL in the README needs an update from:

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

To:

https://heyman.github.io/leaflet-areaselect/example/

Are you aware of that? :) Thank you so much!

IE11 rendering issues

Hi,
I was thinking of doing something similar to your plugin and I tried it out in my Windows 8 app (which runs into IE11) and I get rendering glitches when panning, sometimes it even freezes. I can also reproduce it in IE11 on your example page:
http://heyman.github.io/leaflet-areaselect/example/
It is very easy to reproduce but hard to screenshot because the glitch disappear quite quickly

Fabien

Lng is wrong in certain parts of the world

With this map

I get these bounds

What's 'getBBoxCoordinates' for?

Hey. I've used your tool in one of my projects and as a beginner I've gained a lot of experience from it. Thanks a lot.

In short, I'd like to know what getBBoxCoordinates function exists for :)
I haven't noticed it called in the js file, I suppose you would use it somewhere else.

Releasing a version

Hello!

We are using your plugin in our project, can you please release it so we (and actually other people) could make a reference to exact version of plugin.

Thanks a lot in advance!

p.s. update an example page, it's still not working ;)

Add option to disable to resize the rectangle

This is a feature request. It would be nice to add a option to disable the ability to re-size the rectangle.

npm : package.json

Please add package.json support for npm.

README jsfiddle cloudmade tiles no longer work

README.rst links a Jsfiddle example, but the cloudmade tiles no longer work. Needs swapping for openstreetmap or mapquest open tiles http://harrywood.co.uk/maps/examples/leaflet/mapquest.view.html

Wrong mouse cursor in shaded areas

Steps to reproduce:

1. move mouse cursor inside non-shaded (aka selected) area
2. grab cursor is shown
3. move map with click&drag
4. grabbing cursor is shown
5. move mouse cursor inside shaded area
6. normal cursor is shown
7. move map with click&drag
8. normal cursor is shown

Actual behaviour: in shaded area normal cursor is shown

Expected behaviour: same cursor as normally used in map should be used