nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

What is the best way to select features from multiple layers in 4.x?

MattStayner

I have a map that contains features services, map services and graphic layers. What is the best way to select multiple features from multiple layers? For example, I want a user to be able to select a point in a mass of features from multiple layers and cycle through the features in a custom side panel to find the feature they are interested in.

I tried using hitTest, but that only returns the first feature from each layer. Too bad.

I found this example for 3.x. Would this be the best approach in 4.x as well? Any chance I could get one of your awesome working codepen examples using 4.x?

Query and QuertyTask are kind of pain because the buffer needs to change based on the zoom level. I know the API is already accounting for that using hitTest and other methods. Are there any other approaches we should consider? For example, in 3.x, we used var popup = map.infoWindow and connect.connect(popup, "onSetFeatures", function() {}) to trigger the custom panel based on a click on the map. Is there an equivalent approach in 4.x?

Find more posts tagged with

Accepted answers

JohnGrayson

I wonder if this might help in your use-case:

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#fetchFeatures

https://developers.arcgis.com/javascript/latest/sample-code/widgets-feature-multiplelayers/

All comments

JohnGrayson

I wonder if this might help in your use-case:

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#fetchFeatures

https://developers.arcgis.com/javascript/latest/sample-code/widgets-feature-multiplelayers/

MattStayner

The Esri widget Popup looks like it is what we are looking for. We will give it a try. Thanks!

jkumartry1980

Hi Matt,

Have you tried this option, I need solution for similar task. Could you please share the idea?

MattStayner

@jkumartry1980 Yes, I got it working, but it took a bit to get everything in place.

First, I added the popupTemplate to all the feature layers in my map

layerToAdd = new FeatureLayer(layer.service_url, {
  outFields: ['*'],
  id: layerName,
  popupTemplate: {}, // required to trigger info panel
  visible
})

Then I listened for a click on the view, and looked at all of the results:

this.view.on('click', async (event) => {
  // Use popup to select features on the map. Only features with popupTemplate enabled will be selected
  const resp = await view.popup.fetchFeatures(event)
  const results = await resp.allGraphicsPromise
  if (Array.isArray(results)) {
    if (results.length === 0) {
      this.$emit('pointer-clicked-outside')
      return
    }
    const popupResults = results.filter((r) => {
      //do something with results, like highlight the selected feature
      await this.highlightItem(r)
    })
  }
})

Lastly, I highlighted the selected graphic

async highlightItem (gisInfo) {
    const { view } = this
    if (gisInfo.layer) {
      const layerView = await view.whenLayerView(gisInfo.layer)
      const selected = layerView.highlight(gisInfo)
      this.highlightSelect.push(selected)
    } else if (gisInfo?.sourceLayer?.layer) {
      const layerView = await view.whenLayerView(
        gisInfo.sourceLayer.layer
      )
      const selected = layerView.highlight(gisInfo)
      this.highlightSelect.push(selected)
    }
}

I stripped out the code that wasn't applicable. I'm not sure if what I have above will work exactly as-is, but hopefully it gets you on the right track.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.