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.

Use dark colors for code blocksCopy
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.

Use dark colors for code blocksCopy
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.