OpenLayers – Resolving TypeError for WMS GetFeatureInfoUrl

openlayers

I am trying to trigger WMS GetFeatureInfo requests on click.
Like this example: https://openlayers.org/en/latest/examples/getfeatureinfo-tile.html but on a popup.

As of now, I have the popup working and only have to display the attributes inside popup-content element, but I am unable to make the click function work;

Here is the code: 

   map.on('singleclick', function(evt) {
      document.getElementById('popup-content').innerHTML = '';
      var viewResolution = map.getView().getResolution(); 
      var url = wms_layer.getFeatureInfoUrl(
        evt.coordinate, viewResolution, 'EPSG:3857',
        {'INFO_FORMAT': 'text/html'});
      if (url) {
        fetch(url)
          .then(function (response) { return response.text(); })
          .then(function (html) {
            document.getElementById('popup-content').innerHTML = html;
          });
      }
    });

ERROR: Uncaught TypeError: wms_layer.getFeatureInfoUrl is not a function.

EDIT:
Okay, so I added the .getSource() to my code, which gave me the correct request, BUT it gave me the "Cross-Origin Read Blocking (CORB) blocked cross-origin response", which after some reading, I tried to fix by changing Apache port.

Well it ruined everything including all the GetMap requests, so I changed it back to same port, but it still won't load anything…
Any idea why?

Even thought ports are now the same as before and it should go back to (CORB) error…

net::ERR_SSL_PROTOCOL_ERROR

Best Answer

Final code : 

map.on('singleclick', function(evt) {

      content.innerHTML = '';
      var viewResolution = map.getView().getResolution(); 
      var url = wms_layer.getSource().getFeatureInfoUrl(
        evt.coordinate, viewResolution, 'EPSG:3857',
        {'INFO_FORMAT': 'text/html'});
      if (url) {
        fetch(url)
          .then(function (response) { return response.text(); })
          .then(function (html) {
            content.innerHTML = html;
          });
      }

      popup.setPosition(evt.coordinate); 

    });

ERROR: Uncaught TypeError: wms_layer.getFeatureInfoUrl is not a function.

Fixed by adding wms_layer.getSource().getFeatureInfoUrl(...) .

Which then gave me a different error ;

ERROR: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource

Fixed by adding this on WEB.XML ( dir : geoserver/webapps/geoserver/WEB-INF/web.xml )

<filter>
    <filter-name>cross-origin</filter-name>
    <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>cross-origin</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
Related Question