Showing OpenLayers 3 popup for a specific layer

Question

I am trying to get the information through a WMS stream for a single layer, but when I click on any point on the map my popup appears empty.

map.on('singleclick', 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': 'text/javascript',
                        'format_options': 'callback:parseResponse',
                        'propertyName': 'NAME,AREA_CODE,DESCRIPTIO'
                    }
                );
    reqwest({
         url: url,
         type: 'jsonp',
         jsonpCallbackName: 'parseResponse'
    }).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);
    });
  }
});

How could I get information for a specific layer ?

Answer 1

To get information for a specific WMS layer, at a specific position, you have to create a URL string to request that information from the server. That's the purpose of a GetFeatureInfo request.

Example:

http://demo.boundlessgeo.com/geoserver/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=topp%3Astates&LAYERS=topp%3Astates&TILED=true&INFO_FORMAT=application%2Fjson&I=204&J=178&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&STYLES=&BBOX=-12523442.714243278%2C5009377.085697312%2C-10018754.171394622%2C7514065.628545968

In your code, you have to create such URL on the click event. Then you fetch the URL and you handle the response. If you choose the application/json format, you can use that to create a nice popup, for example. If you choose text/html format, you already receive a HTML formated response.

I've prepared a OL3 GetFeatureInfo fiddle for you, that creates the proper GetFeatureInfo URL.

Open the developer tools in your browser and check the requests sent in the network tab. Change the INFO_FORMAT parameter to see the difference.