TransWikia.com

One popup for multiple layers in ArcGIS JS API

Geographic Information Systems Asked on July 6, 2021

I am trying to have multiple feature layers that all share one popup in an ArcGIS JS 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.

One Answer

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.

Correct answer by Dror Bogin on July 6, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP