Identify | Sample | ArcGIS Maps SDK for JavaScript

Skip to content
<!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>Identify | 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 {
        margin: 0;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <arcgis-map basemap="osm" zoom="13" center="-117.23502, 34.23911" popup-disabled popup-component-enabled>
      <!-- Add the popup component to the default slot -->
      <arcgis-popup slot="popup"></arcgis-popup>
      <arcgis-zoom slot="top-left"></arcgis-zoom>
    </arcgis-map>

    <script type="module">
      const [MapImageLayer, identify, IdentifyParameters] = await $arcgis.import([
        "@arcgis/core/layers/MapImageLayer.js",
        "@arcgis/core/rest/identify.js",
        "@arcgis/core/rest/support/IdentifyParameters.js",
      ]);
      // Get a reference to the map component.
      const viewElement = document.querySelector("arcgis-map");
      // Get a reference to the popup component.
      const popupComponent = document.querySelector("arcgis-popup");

      // Listen for when the component is ready.
      await viewElement.viewOnReady();
      await popupComponent.componentOnReady();

      // URL for the map service.
      const url = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/MtBaldy_BaseMap/MapServer";
      const view = viewElement.view;

      // Add the map service as a MapImageLayer.
      // Use identify to query the service to add interactivity to the app.
      const mapImageLayer = new MapImageLayer({
        url,
        opacity: 0.5,
      });
      viewElement.map.add(mapImageLayer);
      let params;
      params = new IdentifyParameters({
        width: view.width,
        height: view.height,
        tolerance: 3,
        layerOption: "top",
        layerIds: [0, 1, 2, 3, 4],
      });

      viewElement.addEventListener("arcgisViewClick", executeIdentify);
      // Executes each time the view is clicked.
      async function executeIdentify(event) {
        const mapPoint = event.detail?.mapPoint;

        if (!mapPoint) return;
        params.geometry = mapPoint;
        params.mapExtent = view.extent;
        params.width = view.width;
        params.height = view.height;

        //spinning wheel
        viewElement.style.cursor = "wait";
        try {
          // This function returns a promise that resolves to an array of features.
          // A custom popupTemplate is set for each feature based on the layer it
          // originates from.
          const { results = [] } = await identify.identify(url, params);

          const features = results.map((result) => {
            const feature = result.feature;
            const layerName = result.layerName;
            feature.attributes.layerName = layerName;

            if (layerName === "Roads") {
              feature.popupTemplate = {
                title: layerName,
                content:
                  "<b>Block ID:</b> " + feature.attributes.BLOCK_ID +
                  "<br><b>Geometry Type:</b> " + feature.attributes.Shape +
                  "<br><b>Road Length:</b> " + feature.attributes.Shape_Length,
              };
            } else if (layerName === "water") {
              feature.popupTemplate = {
                title: feature.attributes.LABEL_LOCAL,
                content:
                  "<b>Block ID:</b> " + feature.attributes.BLOCK_ID +
                  "<br><b>Geometry Type:</b> " + feature.attributes.Shape +
                  "<br><b>Water Area:</b> " + feature.attributes.Shape_Area,
              };
            } else if (layerName === "Urban") {
              feature.popupTemplate = {
                title: layerName,
                content:
                  "<b>Block ID:</b> " + feature.attributes.BLOCK_ID +
                  "<br><b>Geometry Type:</b> " + feature.attributes.Shape +
                  "<br><b>Urban Area:</b> " + feature.attributes.Shape_Area,
              };
            } else if (layerName === "Landuse") {
              feature.popupTemplate = {
                title: layerName,
                content:
                  "<b>Block ID:</b> " + feature.attributes.BLOCK_ID +
                  "<br><b>Geometry Type:</b> " + feature.attributes.Shape +
                  "<br><b>Landuse Area:</b> " + feature.attributes.Shape_Area,
              };
            } else if (layerName === "Counties") {
              feature.popupTemplate = {
                title: layerName,
                content:
                  "<b>ObjectID:</b> " + feature.attributes.OBJECTID +
                  "<br><b>Geometry Type:</b> " + feature.attributes.Shape +
                  "<br><b>Landuse Area:</b> " + feature.attributes.Shape_Area,
              };
            }
            return feature;
          });

          // set popup component title and content.
          if (features.length > 0) {
            popupComponent.location = mapPoint;
            popupComponent.heading = features[0].popupTemplate.title;
            popupComponent.content = features[0].popupTemplate.content;
            popupComponent.open = true;
          } else {
            popupElement?.close();
          }
        } catch (err){

        } finally {
          viewElement.style.cursor = "default";
        }
      }
    </script>
  </body>
</html>