Multiple marker selection within a box in leaflet

Question

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'))
},

Answer 1

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.

Answer 2

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].getLatLng())) {
      console.log(markers[i]);
    }
  }
});