How to select which feature overlay in case of overlapping or same geometry in OpenLayers

Question

I created a map in which an overlay is opened clicking on the features. But I have problem if more than one feature are in overlapping, or worse, when features have the same geometry.

I use this code to show the overlay. But when two features have the same geometry only one overlay is shown.

const overlayContainerElement = document.querySelector('.overlay-container');

    const overlayLayer = new ol.Overlay ({
        element: overlayContainerElement
    });
    map.addOverlay(overlayLayer);
    const overlayFeatureName = document.getElementById('feature-name');
    const overlayFeatureAdditionalinfo = document.getElementById('feature-additionalinfo');


    map.on('click', function(e){
        overlayLayer.setPosition(undefined);
        map.forEachFeatureAtPixel(e.pixel, function (feature, layer){
            let clickedCoordinate = e.coordinate;
            let clickedFeatureName = feature.get('Number')
            let clickedFeatureInfo = feature.get('Text');
            overlayLayer.setPosition(clickedCoordinate);
            overlayFeatureName.innerHTML = clickedFeatureName;
            overlayFeatureAdditionalinfo.innerHTML = clickedFeatureInfo;
        },
        {
            layerFilter: function(layerCandidate){
                if (layerCandidate.get('title') === "Title") {
                    return 1;
                }
            }
        })
    });

Any idea how to configure a way in order to select which feature detail I want to see? So after clicking, if two features are under the mouse, a sort of list is shown to select what overlay I want to open.

Answer 1

Instead of updating your overlay inside the map.forEachFeatureAtPixel method, you could use the map.forEachFeatureAtPixel method to collect all features that were clicked, and then work with an Array of features.

Something like this (untested / unfinished):

        var features = [];
        map.forEachFeatureAtPixel(e.pixel, function (feature, layer){
          features.push(feature);
        },
        {
            layerFilter: function(layerCandidate){
                if (layerCandidate.get('title') === "Title") {
                    return 1;
                }
            }
        });

        // And then, you could iterate on your features and show information as a list in your overlay.

        // todo - loop here
        /*
            let clickedCoordinate = e.coordinate;
            let clickedFeatureName = feature.get('Number')
            let clickedFeatureInfo = feature.get('Text');
            overlayLayer.setPosition(clickedCoordinate);
            overlayFeatureName.innerHTML = clickedFeatureName;
            overlayFeatureAdditionalinfo.innerHTML = clickedFeatureInfo;
        */

You could have your overlay show a list of results in a "summary" fashion, and clicking on one of the feature name (for example) could show its full details within the overlay.

HTH