OpenLayers 3 WMS GetFeatureInfo popup

Question

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?

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.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);
    });

}});