I have two polygon layers (polygons) that overlap. I've created a leaflet map using qgis2web. The issues is that, if I click on the overlapping area, the popup only shows information for the topmost layer.
Is there a simple way to show information for all the overlapping features? Here you can download my project: overlappingpolygons.zip
<div id="map">
</div>
<script src="js/qgis2web_expressions.js"></script>
<script src="http://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="js/leaflet.rotatedMarker.js"></script>
<script src="js/leaflet.pattern.js"></script>
<script src="js/leaflet-hash.js"></script>
<script src="js/Autolinker.min.js"></script>
<script src="js/rbush.min.js"></script>
<script src="js/labelgun.min.js"></script>
<script src="js/labels.js"></script>
<script src="data/polygonlayer1_0.js"></script>
<script src="data/polygonlayer2_1.js"></script>
<script>
var map = L.map('map', {
zoomControl:true, maxZoom:28, minZoom:1
}).fitBounds([[43.3692589418,-4.4186720562],[43.3951151,-4.35991701571]]);
var hash = new L.Hash(map);
map.attributionControl.addAttribution('<a href="https://github.com/tomchadwin/qgis2web" target="_blank">qgis2web</a>');
var bounds_group = new L.featureGroup([]);
var basemap0 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
maxZoom: 28
});
basemap0.addTo(map);
function setBounds() {
}
function pop_polygonlayer1_0(feature, layer) {
var popupContent = '<table>\
<tr>\
<th scope="row">id</th>\
<td>' + (feature.properties['id'] !== null ? Autolinker.link(String(feature.properties['id'])) : '') + '</td>\
</tr>\
<tr>\
<th scope="row">Name</th>\
<td>' + (feature.properties['Name'] !== null ? Autolinker.link(String(feature.properties['Name'])) : '') + '</td>\
</tr>\
<tr>\
<th scope="row">Code</th>\
<td>' + (feature.properties['Code'] !== null ? Autolinker.link(String(feature.properties['Code'])) : '') + '</td>\
</tr>\
<tr>\
<th scope="row">Type</th>\
<td>' + (feature.properties['Type'] !== null ? Autolinker.link(String(feature.properties['Type'])) : '') + '</td>\
</tr>\
</table>';
layer.bindPopup(popupContent, {maxHeight: 400});
}
function style_polygonlayer1_0_0() {
return {
pane: 'pane_polygonlayer1_0',
opacity: 1,
color: 'rgba(0,0,0,1.0)',
dashArray: '',
lineCap: 'butt',
lineJoin: 'miter',
weight: 1.0,
fill: true,
fillOpacity: 1,
fillColor: 'rgba(255,207,32,0.701960784314)',
}
}
map.createPane('pane_polygonlayer1_0');
map.getPane('pane_polygonlayer1_0').style.zIndex = 400;
map.getPane('pane_polygonlayer1_0').style['mix-blend-mode'] = 'normal';
var layer_polygonlayer1_0 = new L.geoJson(json_polygonlayer1_0, {
attribution: '<a href=""></a>',
pane: 'pane_polygonlayer1_0',
onEachFeature: pop_polygonlayer1_0,
style: style_polygonlayer1_0_0,
});
bounds_group.addLayer(layer_polygonlayer1_0);
map.addLayer(layer_polygonlayer1_0);
function pop_polygonlayer2_1(feature, layer) {
var popupContent = '<table>\
<tr>\
<th scope="row">id</th>\
<td>' + (feature.properties['id'] !== null ? Autolinker.link(String(feature.properties['id'])) : '') + '</td>\
</tr>\
<tr>\
<th scope="row">Name</th>\
<td>' + (feature.properties['Name'] !== null ? Autolinker.link(String(feature.properties['Name'])) : '') + '</td>\
</tr>\
<tr>\
<th scope="row">Code</th>\
<td>' + (feature.properties['Code'] !== null ? Autolinker.link(String(feature.properties['Code'])) : '') + '</td>\
</tr>\
<tr>\
<th scope="row">Type</th>\
<td>' + (feature.properties['Type'] !== null ? Autolinker.link(String(feature.properties['Type'])) : '') + '</td>\
</tr>\
</table>';
layer.bindPopup(popupContent, {maxHeight: 400});
}
function style_polygonlayer2_1_0() {
return {
pane: 'pane_polygonlayer2_1',
opacity: 1,
color: 'rgba(0,0,0,1.0)',
dashArray: '',
lineCap: 'butt',
lineJoin: 'miter',
weight: 1.0,
fill: true,
fillOpacity: 1,
fillColor: 'rgba(255,89,89,0.701960784314)',
}
}
map.createPane('pane_polygonlayer2_1');
map.getPane('pane_polygonlayer2_1').style.zIndex = 401;
map.getPane('pane_polygonlayer2_1').style['mix-blend-mode'] = 'normal';
var layer_polygonlayer2_1 = new L.geoJson(json_polygonlayer2_1, {
attribution: '<a href=""></a>',
pane: 'pane_polygonlayer2_1',
onEachFeature: pop_polygonlayer2_1,
style: style_polygonlayer2_1_0,
});
bounds_group.addLayer(layer_polygonlayer2_1);
map.addLayer(layer_polygonlayer2_1);
var baseMaps = {};
L.control.layers(baseMaps,{'<img src="legend/polygonlayer2_1.png" /> polygonlayer2': layer_polygonlayer2_1,'<img src="legend/polygonlayer1_0.png" /> polygonlayer1': layer_polygonlayer1_0,},{collapsed:false}).addTo(map);
setBounds();
</script>
From what I've read here, I think I should probably use the point in polygon plugin?
This is my first week working with Leaflet and I am a bit lost.
