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 Aug 9 '16 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 Aug 9 '16 at 17:12
  • Feel free to edit the question – Ian Turton Aug 9 '16 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 – Hicham Zouarhi Aug 10 '16 at 13:44
  • 1
    @JasonBK thanks for the answer, upvoted it so that hopefully a moderator will notice it – Hicham Zouarhi Aug 11 '16 at 13:37

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');

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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