Search code examples
openlayers

Openlayers getFeatureInfoUrl - blank popup with fetch

Good morning, following the openlayers example on this site https://openlayers.org/en/latest/examples/getfeatureinfo-tile.html I am trying to update my openlayers 3 code exported from qgis2web (qgis plugin) because it calls an iframe that no longer works.

I ask for help because the popup is empty

I have posted a sample project on this site: https://www.ordonselli.com/z_wms_land_registry_italy/

I wrote this code in qgis2web.js to query the WMS layers and see the query result in the popup.

    var viewProjection = map.getView().getProjection();
    var viewResolution = map.getView().getResolution();
    for (i = 0; i < wms_layers.length; i++) {
      if (wms_layers[i][1]) {
        var url = wms_layers[i][0].getSource().getFeatureInfoUrl(
evt.coordinate, viewResolution, viewProjection, {
            INFO_FORMAT: "text/html"
          });
        if (url) {
          fetch(`https://api.allorigins.win/raw?url=${url}`)
            .then((response) => response.text())
            .then((html) => {
              overlayPopup.setPosition(coord);
              content.innerHTML = html;
              container.style.display = "block";
            });
        }
      }
    }

Why is the popup empty? enter image description here

Solution

  • When url pass a url which itself contains special characters such as ?, & and = to a proxy it needs to be url encoded

    Replace

    `https://api.allorigins.win/raw?url=${url}`

    with

    'https://api.allorigins.win/raw?url=' + encodeURIComponent(url)