0

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/leaflet@1.0.3/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: '&copy; <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.

  • 1
    Check out gis.stackexchange.com/questions/315564/… it was a point in polygon thing. – Bill Chappell Aug 15 at 13:24
  • Typically when clicking on an area of the map, users are only shown info in a pop up for one feature at a time. In order to view the info for another feature below the top one, the user cycles through the pop ups for everything at the clicked location. This is standard UX for 99% of the GIS applications. Do you want to see everything at that location in one popup? Or do you want to be able to cycle through pop ups? – Stella Aug 15 at 19:52
  • Thank you Bill and @Stella. Being able to cycle through the popups would be ideal. But dispaying all the information at once would also work. I would be happy if I was able to achieve any of the two. – Angel Aug 16 at 10:14
1

Here are a couple working examples. I take a mouse click event, get coords and use Turf to do a point in polygon check if it's there return some attribute to a variable. Next do the same thing for the second layer and third put the values in a bootstrap dialog.

Right click view source to see my code.

Note turf.inside should now be turf.booleanPointInPolygon, but in my page either works, however inside has been depreciated.

Using a bootstrap dialog: http://www.gistechsolutions.com/leaflet/DEMO/pointsinpoly/ Using a bootstrap dialog with Tabs http://www.gistechsolutions.com/leaflet/DEMO/pointsinpoly/indextab.html Zip file of my pages and datafiles. http://www.gistechsolutions.com/leaflet/DEMO/pointsinpoly/pointsinpoly.zip

  • This is a very nice solution. I'll see if I can manage to apply this on my map, thank you! – Angel Aug 16 at 16:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.