I have a map a at the link below:


I added one of my GeoServer WMS layers to the map, now I try to add the attributes window pop up on click. I found to examples on the OpenLayers 3 homepage, but I cannot put together a working code...



Is there any chance to have a working sample somewhere?

1 Answer 1


I used to following tutorial to figure out how to get popups on WMS and WFS layers. Maybe it will be useful to you.

Here is some of the relevant code

map.on('click', function(evt) {

// Hide existing popup and reset it's offset
popup.setOffset([0, 0]);

// Attempt to find a marker from the planningAppsLayer
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
    return feature;

if (feature) {

    var coord = feature.getGeometry().getCoordinates();
    var props = feature.getProperties();
    var info = "<h2><a href='" + props.caseurl + "'>" + props.casereference + "</a></h2>";
        info += "<p>" + props.locationtext + "</p>";
        info += "<p>Status: " + props.status + " " + props.statusdesc + "</p>";
    // Offset the popup so it points at the middle of the marker not the tip
    popup.setOffset([0, -22]);
    popup.show(coord, info);

} else {

    var url = districtLayer
                        'INFO_FORMAT': 'application/json',
                        'propertyName': 'NAME,AREA_CODE,DESCRIPTIO'

        url: url,
        type: 'json',
    }).then(function (data) {
        var feature = data.features[0];
        var props = feature.properties;
        var info = "<h2>" + props.NAME + "</h2><p>" + props.DESCRIPTIO + "</p>";
        popup.show(evt.coordinate, info);

  • The link is really helpful, and this will be the solution, however I cannot make it work because of a "XMLHttpRequest cannot load" issue...
    – Tamas Kosa
    Feb 6, 2015 at 10:07
  • Does the error message say anything about Cross Origin Request Sharing?
    – Ravi Mehta
    Feb 6, 2015 at 16:33
  • I solved this issue, I moved the html file to geoserver root directory
    – Tamas Kosa
    Feb 10, 2015 at 14:10
  • Anyone who tested this code on openlayers 5?
    – csandreas1
    Mar 14, 2019 at 7:35

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.