qgis2web, popups with information are displaying for the bottom layer (not the top layer)

Question

I have a map, the very bottom (behind) layer contains united states (polygons for each state); and the very top layer contains my study locations (points layer).

The layers are displaying correctly, but when I hover over one of my study location points, the information is given as "Montana", which is the information for my "behind" united states layer and not for my "top" study locations layer. (Please see photo 1)

I changed the order of my layers (put the field locations behind the US polygons). I can't see my field locations, because they are hidden behind the polygons, BUT now when I hover over my study site locations (even though I can't see them) the information for my study site appears.

It seems that even though the map is displaying layers in the correct order, the information for popup-on-hover is accessed in reverse order. This is true for qgis2web preview within the QGIS desktop and once I extract the files and look at my Index.html in a web browser.

I added a duplicate of my study sites layer, behind the united states layer (but this is an ugly fix and the "Study Sites copy" layer shows up in the layer switcher, which will confuse the user) (Please see photo 2)

Can someone help me understand the connection between the order of layers which I think is determined in the layers.js:

var layersList = [lyr_USA1,lyr_MajorUSCities2,lyr_MT3,lyr_MTRoads4,lyr_MTCities5,lyr_StudySites6];   

--> The USA layer already has 1 attached to it?

and the qgis2web.js code

map.forEachFeatureAtPixel(pixel, function(feature, layer)

How can I order layers in a different way (one layersList to display the layers and reverse layersList to extract hover popup information)?

Answer 1

After debugging for a number of hours (being out of practice and all), I found a simple solution:

The issue is that map.forEachFeatureAtPixel loop reads features in the following order: top-most to bottom-most. Since the bottom-most feature is read last, it overwrites the popupText table with its information.

My solution was to add a counter and only populating the popupText if counter = 1 (only get information from the first read feature, which is the top-most feature).

(alternative solution is to declare the popupText = '<table>' outside of the map.forEachFeatureAtPixel loop, in which case the table will get populated with information from multiple features)

var counter = 1;

map.forEachFeatureAtPixel(pixel, function(feature, layer) {  // goes through features that are present as that pixel coordinate
    currentFeature = feature; 
    currentFeatureKeys = currentFeature.getKeys(); //currentFeatureKeys is an array with field names
    var doPopup = false;      

    //this loop checks if current feature contains at least one field that is not set to 'hidden'
    for (k in layer.get('fieldImages')) { 
        if (layer.get('fieldImages')[k] != "Hidden") {  
            doPopup = true;
        }
    } 

    if (counter == 1){
        if (doPopup) {
            popupText = '<table>';
            for (var i=0; i<currentFeatureKeys.length; i++) {
                if (currentFeatureKeys[i] != 'geometry') { 
                    popupField = '';
                    if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "inline label") {  //checks if label-type is a header or an inline (displayed on top or beside the value)
                        popupField += '<th>' + layer.get('fieldAliases')[currentFeatureKeys[i]] + ':</th><td>'; // 
                    } else {
                        popupField += '<td colspan="2">';
                    }
                    if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "header label") {
                        popupField += '<strong>' + layer.get('fieldAliases')[currentFeatureKeys[i]] + ':</strong><br />'; //
                    }
                    if (layer.get('fieldImages')[currentFeatureKeys[i]] != "Photo") { // checks if the actual value is a string or a link to a photo
                        popupField += (currentFeature.get(currentFeatureKeys[i]) != null ? Autolinker.link(String(currentFeature.get(currentFeatureKeys[i]))) + '</td>' : '');  // currentFeature.get(currentFeatureKeys[i])) this is the actual value at that pixel for that field
                    } else {
                        popupField += (currentFeature.get(currentFeatureKeys[i]) != null ? '<img src="images/' + currentFeature.get(currentFeatureKeys[i]).replace(/[\\\/:]/g, '_').trim()  + '" /></td>' : '');
                    }
                    popupText = popupText + '<tr>' + popupField + '</tr>'; //popupField gets appended to the popupText table
                }
            }
            popupText = popupText + '</table>';
        }
    }
    counter++;

});

Answer 2

Looks like you've found a bug in qgis2web. Until it's fixed, in QGIS, for your background states layer, try setting every field's edit widget to Hidden. That should prevent any popup for that layer, which should mean you get the correct info on hover.