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

Jonatas Walker · Accepted Answer · 2015-11-14T10:11:23.503

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();
  }
});

edited Nov 14 '15 at 10:11

answered Nov 13 '15 at 16:26

Jonatas Walker

13,583
5
53
82

unfortunatelly nothing happend :( I have the information, that wms.getFeatureInfoUrl is not a function ... – karolina Nov 13 '15 at 20:29
Note, maybe you don't want an `` on popup. – Jonatas Walker Nov 13 '15 at 21:24
Thank you very much, it works! :) One more question: what if I want to use this code to more than one layer? Should I copy it and change the name of the layer in the url section or there is some easier way? – karolina Nov 13 '15 at 21:43
Remember, this is only valid for `ol.source.TileWMS`, so if you more than one, you could wrap it in a function. Let me know if this is your case. – Jonatas Walker Nov 14 '15 at 08:21
In fact I wanted to add more than one wms layer. Can you help me how to write it in a function? – karolina Nov 14 '15 at 09:17
@karolina One more update. See if this is what you have in mind. – Jonatas Walker Nov 14 '15 at 10:12
@JonatasWalker I have tried your solution and it works looking at response in consloe, but I cant popualte my iframe with more than the last layer (it is overwritten)..ideas how to do that? – JasonBK Dec 04 '17 at 20:47

openlayers 3 wms getfeatureinfo popup

1 Answers1