Openlayers 3 Popup

Question

I have added popup functionality to my web map. I have however attempted to restrict the popup to the specified layer in the condition statement. However, the extent seems to be set by an underlying layer, has anyone had this issue before? ie. I have a pipeline layer which extends over the boundaries of a polygon layer. The popups work when clicking a pipeline which overlays the polygon layer, however fails when clicking the line which extends past these polygon boundaries.

My popup code is:

function sewer_pipeline_popup() {
    map.on('singleclick', function(evt) {
    var coordinate = evt.coordinate;
    var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
        if (layer === sewer_pipelines) {
        return feature;
    }
        });
    var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
        coordinate, 'EPSG:3857', 'EPSG:4326'));

    var content = '<h3>' + feature.get('precinct__') + '</h3>';
        content += '<h5>' + 'Sewer Infrastructure: ' + 'R' + feature.get('sewer_cost') + '-00' + '</h5>';
        content += '<h5>' + 'Water Infrastructure: ' + 'R' + feature.get('water_cost') + '-00' + '</h5>';
        content += '<h5>' + 'Roads/SW Infrastructure: ' + 'R' + feature.get('r_sw_cost') + '-00' + '</h5>';
        content += '<h5>' + 'Electricity Infrastructure: ' + 'R' + feature.get('elec_cost') + '-00' + '</h5>';
        content += '<h5>' + 'Total Infrastructure: ' + 'R' + feature.get('tot_cost') + '-00' + '</h5>';
        content += '<h5>You clicked here: ' + hdms + '</h5>';

    content_element.innerHTML = content;

    overlay.setPosition(coordinate);
});

My layers are being served as GeoJSON.

Answer 1

Even though your anonymous function only returns a feature when layer === sewer_pipelines, it is still implicitly returning undefined when this condition is not met. So, when you have multiple features returned, I assume feature will be set to the last return value, which would be undefined for layers that are not sewer_pipelines.

Instead of returning the feature from map.forEachFeatureAtPixel() and storing the result, your anonymous function should be assigning the result to a variable defined in the parent scope.

var selectedFeature = null;
map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
    if (layer === sewer_pipelines) {
        selectedFeature = feature;
    }
});
if (selectedFeature) {
    // display your popup for the selected feature
}