How can I get a QGIS2Web project to display info for multiple layers in a popup?

Question

I have built a project in QGIS and QGIS2 Web that has multiple polygon layers that overlap each other. I am trying to get the info pop up to display the data for all of the overlapping layers at a point.

I have tried exporting the project to OpenLayers and to Leaflet neither seems to work.

The OpenLayers version is here http://knowwhereconsulting.co.uk/WebMaps/lgsstest/ The Leaflet version is here http://knowwhereconsulting.co.uk/WebMaps/LGSS/

Anyone know how to fix this?

Answer 1

As @tom-chadwin mentioned it's not currently supported but you should be able to implement a basic version by making the following changes to your exported OL3 code:

Replace the onSingleClick function in resources/qgis2web.js with:

var onSingleClick = function(evt) {
    if (doHover) {
        return;
    }
    var pixel = map.getEventPixel(evt.originalEvent);
    var coord = evt.coordinate;
    var popupField;
    var popupText = '';
    var currentFeature;
    var currentFeatureKeys;
    map.forEachFeatureAtPixel(pixel, function(feature, layer) {
        currentFeature = feature;
        currentFeatureKeys = currentFeature.getKeys();
        var field = getPopupFields(layersList, layer);
        if (field == NO_POPUP) {
        } else {
            popupText += '<h2>' + layer.get('title') + '</h2>';
            if (field == ALL_FIELDS) {
                popupText += '<table>';
                for (var i=0; i<currentFeatureKeys.length; i++) {
                    if (currentFeatureKeys[i] != 'geometry') {
                        popupField = '<th>' + currentFeatureKeys[i] + ':</th><td>'
                        popupField += (currentFeature.get(currentFeatureKeys[i]) != null ? Autolinker.link(String(currentFeature.get(currentFeatureKeys[i]))) + '</td>' : '');
                        popupText += '<tr>' + popupField + '</tr>';
                    }
                }
                popupText += '</table>';
            } else {
                var value = feature.get(field);
                if (value) {
                    popupText += '<strong>' + field + ':</strong> '+ value;
                }  
            }          
        }
    });
    if (popupText) {
        overlayPopup.setPosition(coord);
        content.innerHTML = popupText;
        container.style.display = 'block';        
    } else {
        container.style.display = 'none';
        closer.blur();
    }
};

Add some CSS for the popup in resources/qgis2web.css:

div#popup-content {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;
}

I'll probably look at proposing a more complete implementation to qgis2web when I've got some time.

Answer 2

At the moment, this is unsupported in qgis2web. While it should not be too hard in Openlayers exports with some development, Leaflet doesn't support selection of multiple stacked features with one click. I believe it could be done with a point-in-polygon plugin. However, using this approach by default for detecting clicks would slow maps down considerably, I believe.