Display a popup with pixel data

You can create a popup to display pixel data from an image map layer. To learn more about working with image map layers, visit L.esri.ImageMapLayer in the API reference.

Use dark colors for code blocksCopy
                                                     
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html>
  <head>
    <meta charset="utf-8" />
    <title>Display a popup with pixel data</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin=""></script>
    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@^3.0.8/dist/esri-leaflet.js"></script>
    <!-- Load Esri Leaflet Vector from CDN -->
    <script src="https://unpkg.com/esri-leaflet-vector@4.0.0/dist/esri-leaflet-vector.js" crossorigin=""></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>
    <div id="map"></div>
    <script>
      const apiKey = "YOUR_API_KEY";

      const map = L.map("map").setView([43.645262, -79.38], 14);

      L.esri.Vector.vectorBasemapLayer("ArcGIS:LightGray", {
        apikey: apiKey
      }).addTo(map);

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

      landsatImagery.bindPopup(function (error, identifyResults) {
        if (error || !identifyResults.pixel) {
          return false;
        } else {
          return "Pixel values: " + identifyResults.pixel.properties.value + " (R, G, B, IR)";
        }
      });
    </script>
  </body>
</html>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.