1

I am using QGIS 3.28.5, I installed qgis2web 3.16.0. I created an interactive web map and I included pop-ups. However, I have some fields in the attribute table that are empty (there is no data). Those fields still show up in the pop-up, as shown below. enter image description here

Once you export the map, there is this html file that you can edit. I edited it and there are no empty fields anymore HOWEVER you can do that only AFTER you exported the map. I want to make those changes BEFORE I create the map because I want to apply those changes to future projects too. Does anyone have any idea how can I achieve this? I tried by making changes in the qgis2web.js file but nothing seems to work. Thanks!

EDIT: This is how I manually made the changes. I just modified this part of the code for EVERY attribute. And it works just fine. This file is actually the HTML output. The file that you open in your browser to see the map. enter image description here enter image description here

2
  • Can you edit the question describing how to manually make changes after export? Explain which file you modify and which pieces of code you add so that I can explain to you which plugin files you need to modify. Also add if you export to openlayers or leaflets. Jun 28, 2023 at 12:22
  • @andreaordonselli I modified the HTML file, the file that you actually open in your browser to see your map. I modified the pop up function to exclude those fields. I simply wrote: if (feature.properties['Ime'] !== null && feature.properties['Ime'] !== '') And this works well. I export to leaflets. I will describe it in more detail in the question, I will edit it.
    – J.Sara
    Jun 29, 2023 at 11:23

1 Answer 1

0

Reach the path C:\Users\Utente\AppData\Roaming\QGIS\QGIS3\profiles\default\python\plugins\qgis2web and edit the file leafletScriptStrings.py modifying def popFuncsScript(table): as follows. Close and reopen QGIS, open your project and export it with Leaflet, you will notice that the code I added will appear in every layer, excluding rows with no data. ATTENTION: make a backup of the original file before editing it

def popFuncsScript(table):
    popFuncs = """
            var popupContent = %s;
            layer.bindPopup(popupContent, {maxHeight: 400});
            
            var popup = layer.getPopup();
            var content = popup.getContent();
            var updatedContent = removeEmptyRowsFromPopupContent(content);
            popup.setContent(updatedContent);
            }

            function removeEmptyRowsFromPopupContent(content) {
              var tempDiv = document.createElement('div');
              tempDiv.innerHTML = content;

              var rows = tempDiv.querySelectorAll('tr');

              for (var i = 0; i < rows.length; i++) {
                var td = rows[i].querySelector('td');

                if (td && td.innerHTML.trim() === '') {
                  rows[i].parentNode.removeChild(rows[i]);
                }
              }

              return tempDiv.innerHTML;""" % table
    return popFuncs
2
  • it works well! Thanks a lot!
    – J.Sara
    Jun 30, 2023 at 5:49
  • Check carefully, in my project I noticed that some properties, although empty, still appeared in the popup. Please mark the answer as good if it solved your question. Jun 30, 2023 at 8:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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