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?

  • Comments are not for extended discussion; this conversation has been moved to chat.
    – Ian Turton
    Commented Aug 9, 2016 at 16:41
  • @iant since you have been very unhelpful, I don't wish to chat - I would prefer you remove the 'duplicate' flag and let someone else edit this post, thanks.
    – JasonBK
    Commented Aug 9, 2016 at 17:12
  • Feel free to edit the question
    – Ian Turton
    Commented Aug 9, 2016 at 17:48
  • 1
    @JasonBK I don't think that it's doable using WMS since it displays the features as an image, you probably should use WFS instead Commented Aug 10, 2016 at 13:44
  • 1
    @JasonBK thanks for the answer, upvoted it so that hopefully a moderator will notice it Commented Aug 11, 2016 at 13:37

1 Answer 1


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

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) {

                    'placement': 'top',
                    'html': true,
                    'content': '<iframe seamless src="' + url + '"></iframe>'


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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.