openlayers 3 wms getfeatureinfo popup

Question

I want to add an OSM map with WMS layers to my webpage, which includes some information about layers. The best way for me would be to create the popup with getFeatureInfoUrl request, but unfortunatelly I'm not that experienced to do this. I've tried a lot of codes and tutorials but it doesn't work.

I wrote something like this:

var osm = new ol.layer.Tile({
	source: new ol.source.OSM()
});
var wms = new ol.layer.Tile({
	source: new ol.source.TileWMS(({
	url: 'http://localhost:8081/geoserver/KORTOWO/wms',
	params: {'LAYERS': 'roads', 'TILED': "true"},
	serverType: 'geoserver',
 })),
 title: "Roads"
});


var map = new ol.Map({
    target: 'map',
    layers: [osm,wms],
    view: new ol.View({
        center: ol.proj.transform([20.45, 53.75], 'EPSG:4326', 'EPSG:3857'),
        zoom: 14
    })
});


var popup = new ol.Overlay.Popup();
map.addOverlay(popup);

map.on('singleclick', function(evt) {
popup.getElementById('info').innerHTML = '';
  var viewResolution = /** @type {number} */ (view.getResolution());
  var url = wms.getGetFeatureInfoUrl(
      evt.coordinate, viewResolution, 'EPSG:3857',
      {'INFO_FORMAT': 'text/html'});
  if (url) {
    popup.getElementById('info').innerHTML =
        '<iframe seamless src="' + url + '"></iframe>';
  }
    
    popup.show(evt.coordinate, url);
});

Can you help me how to modify the code to make it works? I'm using OpenLayers3.

Greetings, Karolina

Answer 1

UPDATE 2

Wrapping this in a function would be (not tested):

map.on('singleclick', function(evt) {
    var layerWithWmsSource = map.forEachLayerAtPixel(evt.pixel, 
            function(layer) {
        // return only layers with ol.source.TileWMS
        var source = layer.getSource();
        if (source instanceof ol.source.TileWMS) {
            return layer;
        }
    });
    if (layerWithWmsSource) {
        getInfo(evt, layerWithWmsSource);
    }
});

function getInfo(evt, layer) {
  var resolution = map.getView().getResolution();
  var url = layer.getSource().getGetFeatureInfoUrl(evt.coordinate, 
    resolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'});
  if (url) {
    var content = '<p>' + url + '</p>';
    popup.show(evt.coordinate, content);
  }
}

---

UPDATE: getGetFeatureInfoUrl() is method of ol.source.TileWMS so modify to:

var url = wms.getSource().getGetFeatureInfoUrl(evt.coordinate, resolution,
        'EPSG:3857', {'INFO_FORMAT': 'text/html'});

---

Maybe you solve with these modifications:

map.on('singleclick', function(evt) {
  var resolution = map.getView().getResolution();

  var url = wms.getSource().getGetFeatureInfoUrl(evt.coordinate, resolution,
    'EPSG:3857', {'INFO_FORMAT': 'text/html'});

  if (url) {
    // maybe you don't want|need an <iframe> inside popup
    var content = '<iframe seamless src="' + url + '"></iframe>';
    popup.show(evt.coordinate, content);
  } else {
    // maybe you hide the popup here
    popup.hide();
  }
});