I have a polygon layer with overlapping polygons. When clicking on a spot with more than one polygon eg. overlapping polygons, the popup shows the property of only one feature (the topmost?). Is there a way to show the content of the same attribute of several objects in one popup?
[GIS] Leaflet: A way to show information of overlapping polygon of the same layer
leafletpopup
Related Solutions
One option would be to use leaflet point in poly (leaflet.pip) which is available through Mapbox: https://www.mapbox.com/mapbox.js/example/v1.0.0/point-in-polygon/ Or as a leaflet plugin: https://github.com/mapbox/leaflet-pip
The fiddle here: http://jsfiddle.net/TnX96/136/ will show exactly how this would work. Or see the code below....
HTML be sure to include the PIP library:
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-pip/v0.0.2/leaflet-pip.js'></script>
Javascript:
var map = new L.Map('map', {center: new L.LatLng(51, -100), zoom: 4});
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var ggl = new L.Google();
var ggl2 = new L.Google('TERRAIN');
map.addLayer(osm);
map.addControl(new L.Control.Layers( {'Street Maps':osm, 'Satellite':ggl, 'Terrain':ggl2}, {}));
function handleClick(e) {
var html = '';
var match = leafletPip.pointInLayer(
// the clicked point
e.latlng,
// this layer
streets,
// whether to stop at first match
false);
if (match.length) {
for (var i = 0; i < match.length; i++) {
html += "<br>"+"_____"+
"<br><b>" + match[i].feature.properties.title + ", " + match[i].feature.properties.subtitle + ":</b>" +
"<br>Scale: " + match[i].feature.properties.Scale +
"<br>Year Published: " + match[i].feature.properties.year +
"<br><br><b>URL for map:</b> <a>" + match[i].feature.properties.location2 + "</a>"+
"<br><b>URL for cropped, georeferenced map:</b> <a>"+ match[i].feature.properties.location1 + "</a>"+
"<br><b>URL for KML:</b> <a>" + match[i].feature.properties.location3 +"</a>"
}
}
if (html) {
map.openPopup(html, e.latlng);
}
}
var streets = new L.geoJson(histMap)
.on('click', handleClick)
.addTo(map);
If you want to save the data only for that session, then this can achieved by the following code. I've basically re-arranged the code that you have written, along with the code to show the data in the Popup.
map.on('draw:created', function (e) {
//ADDS THE LAYER TO THE MAP
featureGroup.addLayer(e.layer);
e.layer.on('click', function(){
//IF THE POPUP'S CONTENT HAS BEEN 'SAVED' AS AN ATTRIBUTE OF THE GEOMETRY - IN OTHER WORDS, THE USER HAS EDITED THE POPUP CONTENT
if(e.layer.hello){
//If we have the data, then we will show only the content of the hello variable
e.layer.bindPopup(e.layer.hello).openPopup();
}
else{
//we do not have the data; Hence we will show the editing functionality
//SETS THE BASIC FORMAT, INCLUDING BUTTONS FOR ADDING C
popUpFields = "<button class='add_content'>Add content</button><div class='content_container'></div><button class='popup_save'>Save</button>";
//Open the Popup
e.layer.bindPopup(popUpFields).openPopup();
//Bind the click event on the Add content Button
$(document).on("click", ".add_content", function(){
$(this).next(".content_container").append("Hello popup!");
});
//bind the click event on the save button
$('.popup_save').click(function(){
//THE USER SAVES THEIR POPUP CONTENT, WRITING THE ADDED CONTENT TO AN ATTRIBUTE OF THE LAYER
e.layer.hello = $(this).prev().html();
});
};
});
});
Best Answer
onEachFeature is the issue, you tied a single popup to each feature and you can only click on one at a time. The traditional popup will not work. To select more then one polygon, you have to use a map on Click, and grab the coordinates and use them in a point in poly loop, this will let you grab all the polygons the point touches.
Now you can open a div like a popup and put the results in it. Or put a table on a side panel and put the results there. It's not a real popup solution but you are not clicking on a single polygon.