Identify imagery

This sample displays a digital elevation model (DEM) for the state of California rendered with hillshade. When you click on the map to query the image service, the returned results are raw DEM values (elevation in meters) for that location. To learn more, go to L.esri.IdentifyImage in the API reference.

Use dark colors for code blocksCopy
<html>
  <head>
    <meta charset="utf-8" />
    <title>Identify imagery</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>
      #pixelValue {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1000;
        background: white;
        padding: 1em;
      }
    </style>
    <div id="map"></div>
    <div id="pixelValue" class="leaflet-bar">Click map for elevation</div>
    <script>
      var renderingRule = {
        rasterFunction: "Hillshade",
        rasterFunctionArguments: {
          Azimuth: 215,
          Altitude: 60,
          ZFactor: 1
        },
        variableName: "DEM"
      };
      // sample server in this example is not CORS enabled, so use JSONP
      L.esri.get = L.esri.get.JSONP;

      const map = L.map("map").setView([34.314417, -117.461712], 12);

      const hillshade = L.esri
        .imageMapLayer({
          url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Elevation/MtBaldy_Elevation/ImageServer",
          renderingRule: renderingRule,
          useCors: false
        })
        .addTo(map);

      let identifiedPixel;

      const pane = document.getElementById("pixelValue");

      map.on("click", function (e) {
        if (identifiedPixel) {
          pane.innerHTML = "Loading";
        }
        hillshade
          .identify()
          .at(e.latlng)
          .run(function (error, results) {
            if (error) {
              return;
            }

            identifiedPixel = results.pixel;
            pane.innerHTML = identifiedPixel.properties.value + "m";
          });
      });
    </script>
  </body>
</html>