How do I only use the top layer or feature clicked on a multilayer OpenLayers3 map?

Question

I have a map where some states are clickable, and some cities individually within those states are clickable. Each layer needs to open a different pop-up or overlay. Right now I'm using forEachFeatureAtPixel (I've tried forEachLayerAtPixel also). These obviously return each layer, so then my colorbox is duplicating in the instances where a pin or city feature is on top of a state feature.

When a pin is sitting on top of another layer, I'd like to only use the top layer instead of iterating through each feature. I'm having a hard time identifying the clicked layer, or top layer, in my logic. I'm not sure which method would be correct for this use case.

Answer 1

The correct way to do that is using layerFilter option of forEachFeatureAtPixel method. Use a condition to compare layers like that:

map.forEachFeatureAtPixel(pixel, {
        layerFilter: function (layer) {
            return layer === topLayer;
        }
    }, ...
);

Answer 2

The answer is super simple, and I should've seen it before. I'm only keeping this answering this instead of deleting it because someone else could make a similar mistake, and this may help.

Basically you need to set someting to track how many layers there are, and then put in some sort of flag at the layer level to validate the correct layer when there are many. That way you can say if i > 1 use layerX instead of layerY AFTER forEachLayerAtPixel.

Answer 3

Given that your layer (and or features) have a zIndex you can use the getFeatureAtPixel();

The topmost, highest zIndexed feature, will be at the zero index of the feature array returned from the getFeatureAtPixel() method.

    const featureArray = _xyz.map.getFeaturesAtPixel(e.pixel);

    if (!featureArray) return;

    const topFeature = featureArray[0];