Multiple marker selection within a box in leaflet

16
votes

I need to select multiple markers in a map. Something like this: Box/Rectangle Draw Selection in Google Maps but with Leaflet and OSM.

I think it could be done by modifying the zoom box that appears when you shift click and drag in an OSM map, but I don't know how to do it.

Edit: I rewrote the _onMouseUp function, as L. Sanna suggested and ended up with something like this:

_onMouseUp: function (e) {

    this._finish();

    var map = this._map,
    layerPoint = map.mouseEventToLayerPoint(e);

    if (this._startLayerPoint.equals(layerPoint)) { return; }

    var bounds = new L.LatLngBounds(
    map.layerPointToLatLng(this._startLayerPoint),
    map.layerPointToLatLng(layerPoint));

    var t=0;
    var selected = new Array();

    for (var i = 0; i < addressPoints.length; i++) {
        var a = addressPoints[i];
        pt = new L.LatLng(a[0], a[1]);

        if (bounds.contains(pt) == true) {
            selected[t] = a[2];
            t++;
        }
    }

    alert(selected.join('\n'))
},
4
dictionaryleafletopenstreetmap
How did you do this exactly? Is there a way without thouching Leaflet Code? Like overriding this function? – mblaettermann
@mblaettermann: Check my answer. – fulvio
@deckard where does the addressPoints variable that is being iterated over come from? – gunner_dev

4 Answers

8
votes

I think it could be easy modificating the zoom box that appears when you shift clic and drag in an osm map, but I don't know how to do it

Good idea. The zoom Box is actually a functionality of leaflet.

Here is the code.

Just rewrite the _onMouseUp function to fit your needs.

7
votes

Have you tried something like this?

markers is an array of L.latLng() coordinates

map.on("boxzoomend", function(e) {
  for (var i = 0; i < markers.length; i++) {
    if (e.boxZoomBounds.contains(markers[i])) {
      console.log(markers[i]);
    }
  }
});
2
votes

Not enough points to comment, but in order to override the _onMouseUp function like OP posted in their edit, the leaflet tutorial gives a good explanation. Additionally, this post was very helpful and walks you through every step.

2
votes

A bit late to the party but it's also possible to achieve this using the leaflet-editable plugin.

// start drawing a rectangle
 function startSelection() {
    const rect = new L.Draw.Rectangle(this.map);
    rect.enable();

   this.map.on('draw:created', (e) => {
    // the rectangle will not be added to the map unless you
    // explicitly add it as a layer
    // get the bounds of the rect and check if your points
    // are contained in it
   });
}

Benefits of using this method

  1. Allow selection with any shape (polygon, circle, path, etc.)
  2. Allow selection using a button/programmatically (does not require holding down the shift key, which may be unknown to some users).
  3. Does not change the zoom box functionality