2

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.

1 Answer 1

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.

2
  • I figured I would need to use hitTest, though I wasn't sure how to tie it all together. תודה Dror. You solution will work, but it requires rebuilding each popup from scratch using html and template strings. Thats OK, but as you can see in my linked codepen, I'm also using a line chart in my second popup. Trying to recreate this from scratch seems like a ton of work. Do you know if it would be possible to combine the hitTest method with existing PopupTemplate content? Nov 17, 2020 at 16:22
  • This seems unlikely as the content part of the popup needs either text, html or a template and it does not seem like you can create a template for multiple layers.you could add the line chart from another js library and include it in the popup, something like c3.js should be lightweight enough to suit your needs.
    – Dror Bogin
    Nov 17, 2020 at 18:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.