CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3leaflet
user3685514
user3685514

Reputation: 41

leaflet location-filter example and draggable-resizeable rectangular area-select on a map

I need to select an rectangular area on a map and identify markers that fall within that area. Ideally, rectangle should be draggable and resizeable. I am not too particular about the mapping and Google or Mapbox or Leaflet would all work just fine.

I found location-filter for Leaflet (https://github.com/kajic/leaflet-locationfilter/), which does seem to do the job. However, I couldn't find simple example code that shows how to use it. It has been used on tripcode.com but it is hard to make anything out of what is going on. Does anyone have any experience with location-filter? If so, can you please point me to simple example of how to use it?

Are there similar examples for other mapping services particularly google maps?

Thanks.

Upvotes: 3

Views: 4070

Answers (2)

Ilja Zverev
Ilja Zverev

Reputation: 953

For my bbox page I've snatched two files: SimpleShape, Rectangle from Leaflet.draw plugin and fixed them for better usability. The code for the rectangle is simple:

var rect = L.rectangle([[59.9, 29.9], [60.1, 30.1]]);
map.addLayer(rect);
rect.editing.enable();

rect.on('edit', function() { console.log(rect.getBounds().getBBoxString()); });

For advanced things like centering the rectangle on screen, see source code for the page.

Upvotes: 6

Marko Letic
Marko Letic

Reputation: 2550

When you are drawing the markers onto the map you will need to add them to some kind of an array which will contain the lat/lng pair of each marker.

You can use Leaflet.draw to draw the rectangle and modify it to return top left and bottom right coordinates on mouse up. On mouse up you can go over the entire list and which elements fit inside that bounding box.

This solution is just an example, there are many ways you can do this.

Upvotes: 1

Related Questions