Esri Leaflet

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 didgital 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.Tasks.IdentifyImage documentation.

Click map for elevation

<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="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.2/esri-leaflet.js"></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: 10;
    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.Request.get.JSONP;

    var map = L.map('map').setView([36.230577, -118.253147], 10);

    L.esri.basemapLayer('Gray').addTo(map);

    var hillshade = L.esri.imageMapLayer('http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/CaliforniaDEM/ImageServer', {
      renderingRule: renderingRule
    }).addTo(map);

    var identifiedPixel;
    var pane = document.getElementById('pixelValue');

    map.on('click', function (e) {
        if(identifiedPixel){
            pane.innerText = 'Loading';
        }
        hillshade.identify().at(e.latlng).run(function(error, results){
            identifiedPixel = results.pixel;
            pane.innerText = identifiedPixel.properties.value + 'm';
        });
    });

</script>

</body>
</html>

Edit this sample on GitHub

Esri Leaflet is a project from the Esri PDX R&D Center and the Esri Community