[GIS] OpenLayers 3 / Geoserver – add popup w/ attributes to Image layer

fields-attributesgeoserverlayersopenlayerspopup

I have a web app using OpenLayers 3, with several layers added as image layers, like so:

 mylayer= new ol.layer.Image({
     source: new ol.source.ImageWMS({
         url: 'http://server/geoserver/opengeo/wms',
         params: { 'LAYERS': 'layername' },
         serverType: 'geoserver'
     })
 });

I would like to have an info window popup on the click of a feature , I am following the example here : http://openlayers.org/en/v3.11.1/examples/icon.html

I have Bootstrap and JQuery in my app (these are both needed for this example) and am not getting any errors, but no results either..

..this example is for a vector layer, and so far I haven't been able to get this to work for me…Is there a way I can do this with an image layer? or do I need to add the layer as a vector layer?

Best Answer

I had already tried the method given in the 'duplicate' answer, which works for vector layers but not image layers. I also noted this in the link posted in my original question, which the editor apparently did not read.

This solution uses a Bootstrap popup - - it is based on code from this example

var element = document.getElementById('popup');

var popup = new ol.Overlay({
    element: element,
    positioning: 'bottom-center',
    stopEvent: false
});
map.addOverlay(popup);

var wmsSource = window.globals.map.getLayers().getArray()[5].getSource();
map.on('singleclick', function (evt) {
    document.getElementById('popup').innerHTML = '';
    var viewResolution = 10; ///** @type {number} */ (mapView.getResolution());
    var url = wmsSource.getGetFeatureInfoUrl(
        evt.coordinate, viewResolution, 'EPSG:3857',
        { 'INFO_FORMAT': 'text/html' });
    if (url) {

                popup.setPosition(evt.coordinate);
                $(element).popover({
                    'placement': 'top',
                    'html': true,
                    'content': '<iframe seamless src="' + url + '"></iframe>'

                });

                $(element).popover('show');
                 $(element).css('display', 'block');

    }
Related Question