Feature component - Query graphics from multiple layers | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample is similar to the Feature component 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 FeaturesViewModel’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 map’s arcgisViewClick event using reactiveUtils and pass this into the fetchFeatures method.

reactiveUtils.on(
  () => arcgisViewClick,
  "click",
  async (event) => {
    // Call fetchFeatures and pass in the click event screen point.
    const fetchFeaturesResponse = await featuresViewModel.fetchFeatures(event.detail.screenPoint);

    ...
});

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

// Iterate through the returned graphics once the allGraphicsPromise resolves.
const graphics = await fetchFeaturesResponse.allGraphicsPromise;
if (graphics.length > 0) {
  graphics.forEach((graphic) => {
    const featureChild = document.createElement("arcgis-feature");
    featureChild.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));
        }
      });
    }
  }
}

Feature component in a side panel

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Feature component - Query graphics from multiple layers | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <calcite-shell>
      <calcite-shell-panel id="shell-panel" slot="panel-start" width-scale="l">
        <calcite-block
          heading="Display Feature components for different layers"
          description="This map has a combination of an imagery layer and a feature layer. All of the layers have an associated popup template. Click on the map to access these individual layers and their respective details."></calcite-block>
        <calcite-panel id="panel"></calcite-panel>
      </calcite-shell-panel>
      <arcgis-map
        item-id="bad7aec9c85040b882de64b8224f174c"
        center="-118.91, 34.12"
        ,
        zoom="11"
        popup-disabled>
        <arcgis-zoom slot="top-left"></arcgis-zoom>
        <arcgis-expand slot="bottom-right" mode="floating">
          <arcgis-legend></arcgis-legend>
        </arcgis-expand>
      </arcgis-map>
    </calcite-shell>
    <script type="module">
      const [Handles, reactiveUtils, FeaturesViewModel] = await $arcgis.import([
        "@arcgis/core/core/Handles.js",
        "@arcgis/core/core/reactiveUtils.js",
        "@arcgis/core/widgets/Features/FeaturesViewModel.js",
      ]);
      const highlightHandles = new Handles();
      let layerBlockArray = [];
      let layerViews = [];
      const panel = document.getElementById("panel");
      const viewElement = document.querySelector("arcgis-map");
      await viewElement.viewOnReady();
      // When view is ready
      viewElement.map.layers.forEach(async (layer) => {
        await layer.load();
        // Create a new Calcite block for each layer and add to an array to access later.
        const layerBlock = document.createElement("calcite-block");
        layerBlock.id = layer.title;
        layerBlock.heading = layer.title;
        layerBlock.expanded = true;
        layerBlockArray.push(layerBlock);
        // Create an array of layerViews to be able to highlight selected features.
        if (layer.type === "feature") {
          const layerView = await viewElement.whenLayerView(layer);
          layerViews.push(layerView);
        }
      });
      // On map component click, first remove all the previously added features (if any).
      reactiveUtils.on(
        () => viewElement,
        "arcgisViewClick",
        async (event) => {
          // Remove any existing highlighted features
          highlightHandles.removeAll();
          layerBlockArray.forEach((block) => {
            while (block.lastElementChild) {
              block.removeChild(block.lastElementChild);
            }
          });
          // Call fetchFeatures and pass in the click event location.
          const featuresViewModel = new FeaturesViewModel({
            view: viewElement.view,
          });
          const fetchFeaturesResponse = await featuresViewModel.fetchFeatures(
            event.detail.screenPoint,
          );
          // Iterate through the returned graphics once the allGraphicsPromise resolves.
          const graphics = await fetchFeaturesResponse.allGraphicsPromise;
          if (graphics.length > 0) {
            graphics.forEach((graphic) => {
              // For each layer's calcite block, loop through the graphics and add
              // the graphic to a feature component into that block.
              layerBlockArray.forEach((block) => {
                const layerTitle = graphic.layer.title;
                if (block.heading === layerTitle) {
                  panel.appendChild(block);
                  const featureChild = document.createElement("arcgis-feature");
                  featureChild.graphic = graphic;
                  block.appendChild(featureChild);
                  // 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) {
                        highlightHandles.add(layerView.highlight(graphic));
                      }
                    });
                  }
                }
              });
            });
          }
        },
      );
    </script>
  </body>
</html>