One popup for multiple layers in ArcGIS JS API

Question

I am trying to have multiple feature layers that all share one popup in an ArcGIS JavaScript map. As far as I know, the only way to define a popup is on a specific layer, when you do something like:

const myFeatureLayer = new FeatureLayer({
  url: '...',
  popupTemplate: {
    ...popupTemplateStuffHere
  }
})

When a map has multiple layers, each with their own popups, an ArcGIS map will allow you to toggle through them. But I can't seem to find a way to have all the content from all the different popups end up on a single popup element.

Take this codepen example. There are 2 layers, each describing some data according to county in the US. Each layer has a popup, so when you click a county, you can see the two popups, but only by tabbing through them with the arrows in the bottom right (< 1 of 2 >, < 2 of 2 >, etc.) And each popup has data that comes from fields specific to that layer. How can I conglomerate them? I do know that similar things can be done with a Feature widget, but I want this in a popup that opens when the map is clicked.

Answer 1

The arcgis js api has the hitTest function in views, you can use that to get all the layers under the mouse click and create a new popup with all the data you want to show.

Using something like this should work for simple objectid showing of every layer:

var hitResults;
var popupContent =''
view.on("click", function(event) {
    hitResults=[]

    view.hitTest(event).then(function (response) {
        if (response.results.length) {

            for(var i=0;i<response.results.length;i++ ){

                hitResults.push([response.results[i].graphic.layer.title ,response.results[i].graphic.attributes])
                popupContent += `<b>${response.results[i].graphic.layer.title}</b>: ${response.results[i].graphic.attributes['objectid']}<br>`
            }
            

            view.popup.autoOpenEnabled = false;

            view.popup.open({
            // Set the popup's title to the coordinates of the location
            title: "multiple layer results",
            location: event.mapPoint,
            content: popupContent
            });

        }
    })

 
});

I am also guessing you would want to show different fields from each layer, so you should think about trying the filter option like in the code sample esri provides.