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, go to L.esri.ImageMapLayer in the API reference.

Use dark colors for code blocksCopy
<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.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.14/dist/esri-leaflet.js"></script>
    <!-- Load Esri Leaflet Vector from CDN -->
    <script src="https://unpkg.com/esri-leaflet-vector@4.2.7/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 accessToken = "YOUR_ACCESS_TOKEN";

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

      L.esri.Vector.vectorBasemapLayer("arcgis/light-gray", {
        token: accessToken
      }).addTo(map);

      const landsatImagery = L.esri
        .imageMapLayer({
          url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Toronto/ImageServer",
          useCors: false,
          attribution: "GeoEye Inc."
        })
        .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>