Get all the features of all layers clicked in the leaflet

Question

I am using a booklet. Does anyone have a suggestion for a function that will return all functions from all layers that the user clicks?

For example, I have a point layer and a polygon. When the user clicks a point, I would like to display the attributes of a point and a polygon below that point. If the user clicks only the polygon, he should display only the attributes of the polygon.

Thanks in advance for your help.

Answer 1

• Capture point, clicked on the event that passed with the handler click
• Create bounding box for point ( L.latLngBounds)
• Scroll each visible layer in map._layers
• : , _layers;
• .
• , 1,
• , , , .

( : , . , 3 4.)

// Create the map
var map = L.map('map').setView([39.5, -0.5], 5);

// Set up the OSM layer
var baseLayer1 = L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    name: "Base layer 1"
  }).addTo(map);

function clickHandler(e) {
  var clickBounds = L.latLngBounds(e.latlng, e.latlng);

  var intersectingFeatures = [];
  for (var l in map._layers) {
    var overlay = map._layers[l];
    if (overlay._layers) {
      for (var f in overlay._layers) {
        var feature = overlay._layers[f];
        var bounds;
        if (feature.getBounds) bounds = feature.getBounds();
        else if (feature._latlng) {
          bounds = L.latLngBounds(feature._latlng, feature._latlng);
        }
        if (bounds && clickBounds.intersects(bounds)) {
          intersectingFeatures.push(feature);
        }
      }
    }
  }
  // if at least one feature found, show it
  if (intersectingFeatures.length) {
    var html = "Found features: " + intersectingFeatures.length + "<br/>" + intersectingFeatures.map(function(o) {
      return o.properties.type
    }).join('<br/>');

    map.openPopup(html, e.latlng, {
      offset: L.point(0, -24)
    });
  }
}

map.on("click", clickHandler);

// add some markers
function createMarker(lat, lng) {
  var marker = L.marker([lat, lng]);
  marker.on("click", clickHandler);
  marker.properties = {
    type: "point"
  }; // add some dummy properties; usually would be geojson
  return marker;
}
var markers = [createMarker(36.9, -2.45), createMarker(36.9, -2.659), createMarker(36.83711, -2.464459)];

// create group to hold markers, it will be added as an overlay
var overlay = L.featureGroup(markers).addTo(map);

// show features
map.fitBounds(overlay.getBounds(), {
  maxZoom: 11
});

// create another layer for shapes or whatever
var circle = L.circle([36.9, -2.45], 2250, {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5
});
circle.on('click', clickHandler);
circle.properties = {
  type: "circle"
};
var overlay2 = L.featureGroup([circle]).addTo(map);

#map {
  height: 400px;
}

<script src="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.js"></script>
<link href="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.css" rel="stylesheet" />
<div id="map"></div>

Hide result

JS Fiddle , , , : http://jsfiddle.net/xn8opdjq/

Answer 2

@nothingisnecessary response, . pip ( )