0

I have a map a at the link below:

http://gis.xyz/openlayers/openlayer.html

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...

http://openlayers.org/en/v3.1.1/examples/popup.html?q=popup

http://openlayers.org/en/v3.1.1/examples/getfeatureinfo-tile.html?q=popup

Is there any chance to have a working sample somewhere?

5

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.hide();
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
                .getSource()
                .getGetFeatureInfoUrl(
                    evt.coordinate,
                    map.getView().getResolution(),
                    map.getView().getProjection(),
                    {
                        'INFO_FORMAT': 'application/json',
                        'propertyName': 'NAME,AREA_CODE,DESCRIPTIO'
                    }
                );

    reqwest({
        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 '15 at 10:07
  • Does the error message say anything about Cross Origin Request Sharing? – Ravi Mehta Feb 6 '15 at 16:33
  • I solved this issue, I moved the html file to geoserver root directory – Tamas Kosa Feb 10 '15 at 14:10
  • Anyone who tested this code on openlayers 5? – csandreas1 Mar 14 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.