Feature widget - Query graphics from multiple layers

This sample is similar to the Feature widget in a side panel sample with the exception that this sample demonstrates working with multiple layers of different types. It uses two different layers: one imagery layer and one feature layer and shows how to use the Popup's fetchFeatures method. The method returns an array of graphics at a given screen location and the information based on the layer's associated PopupTemplate is displayed in a Calcite Panel.

How it works

First, listen for the view's click event using reactiveUtils and pass this into the fetchFeatures method.

1
2
3
4
5
6
7
8
reactiveUtils.on(
  () => view,
  "click",
  async (event) => {
    // Call fetchFeatures and pass in the click event location.
    const fetchFeaturesResponse = await view.popup.fetchFeatures(event);
    ...
});

Next, iterate through all of the returned graphics and pass each graphic into the Feature widget's graphic property. If a graphic comes from a feature layer, highlight the graphic in the map using the layerView.highlight method.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Iterate through the returned graphics once the allGraphicsPromise resolves.
const graphics = await fetchFeaturesResponse.allGraphicsPromise;
if (graphics.length > 0) {
  graphics.forEach((graphic) => {
    const featureChild = new Feature({
      container: document.createElement("div"),
      graphic: graphic
    });
    // If the graphic comes from a feature layer, add a highlight
    // to that feature using the layerView.highlight method.
    if (graphic.layer.type === "feature") {
      layerViews.forEach((layerView) => {
        if (graphic.layer.name === layerView.layer.name) {
          handles.add(layerView.highlight(graphic));
        }
      });
    }
  }
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close