Identify features

Click on the map to identify features from a dynamic map layer. To learn more about querying map services, visit the L.esri.DynamicMapLayer in the API reference.
Use dark colors for code blocksCopy
<html>
  <head>
    <meta charset="utf-8" />
    <title>Identifying Features</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@3.0.12/dist/esri-leaflet.js"></script>
    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>
  </head>
  <body>
    <style>
      #selectedFeatures {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1000;
        background: white;
        padding: 1em;
      }
      .leaflet-bar.map-text a {
        color: #79bd8f;
        display: inline;
      }
    </style>
    <div id="map"></div>
    <div id="selectedFeatures" class="leaflet-bar map-text">
      Click on the map for <a href="https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer">county info (sublayer 3)</a>
    </div>
    <script>
      const map = L.map("map", {
        minZoom: 5
      }).setView([38.5, -96.8], 6);

      const usaDynamicLayer = L.esri
        .dynamicMapLayer({
          url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
          opacity: 1
        })
        .addTo(map);

      let identifiedFeature;
      const pane = document.getElementById("selectedFeatures");

      map.on("click", function (e) {
        pane.innerHTML = "Loading";
        if (identifiedFeature) {
          map.removeLayer(identifiedFeature);
        }
        usaDynamicLayer
          .identify()
          .layers("visible:3") // just the counties sublayer
          .on(map)
          .at(e.latlng)
          .run(function (error, featureCollection) {
            if (error) {
              return;
            }

            // make sure at least one feature was identified.
            if (featureCollection.features.length > 0) {
              identifiedFeature = L.geoJSON(featureCollection.features[0]).addTo(map);
              var soilDescription =
                featureCollection.features[0].properties.NAME + " County, " + featureCollection.features[0].properties.STATE_NAME;
              pane.innerHTML = soilDescription;
            } else {
              pane.innerHTML = "No features identified.";
            }
          });
      });
    </script>
  </body>
</html>