Combining popup info from overlapping polygons in Mapbox GL JS

Question

I've tried several solutions, but I'm having trouble populating a popup with information from overlapping polygons. When there are polygons that overlap, I want to drill down and pull the names from all polygons at the click point. Any help on this would be awesome.

 // When a click event occurs on a feature in the states layer, open a popup at the 
location of the click, with description HTML from its properties.


map.on('click', 'testlayer', function (e) {
    new mapboxgl.Popup()
        .setLngLat(e.lngLat)
        .setHTML(e.features[0].properties.name)
        .addTo(map);
});

The jsfiddle here

Answer 1

Within your map.on('click') callback, e.features is an array of all features from testlayer at the point clicked.

So instead of only choosing the first in your popup, you can display all values like this:

map.on('click', 'testlayer', function (e) {
    new mapboxgl.Popup()
        .setLngLat(e.lngLat)
        .setHTML(e.features.map(function(feature) { return feature.properties.name; }).join(', '))
        .addTo(map);
});

This extracts the name property from each feature and joins them into a string separated by ,.