Identifying Imagery

Display an Image Service from ArcGIS Online or ArcGIS Server and get the pixel value at a specific location. This sample displays a digital elevation model (DEM) for the state of California rendered with a hillshade (see ImageMapLayer RenderingRule sample). Clicking on map returns the raw DEM value for that location (elevation in meters). More information about Image Services can be found in the L.esri.IdentifyImage documentation.

Click map for elevation

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Identifying Imagery</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"
    integrity="sha512-E0DKVahIg0p1UHR2Kf9NX7x7TUewJb30mxkxEm2qOYTVJObgsAGpEol9F6iK6oefCbkJiA4/i6fnTHzM6H1kEA=="
    crossorigin=""></script>

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </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;

  var map = L.map('map').setView([34.314417, -117.461712], 12);

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

  var identifiedPixel;
  var 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>

Edit this sample on GitHub

Terms