Display an image map layer

You can display an image map layer from an image service. More information about Map Services can be found in the L.esri.ImageMapLayer documentation.

Use dark colors for code blocksCopy
<html>
  <head>
    <meta charset="utf-8" />
    <title>Simple ImageMapLayer</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>
    <div id="map"></div>
    <script>
      const map = L.map("map").setView([37.75, -122.23], 10);

      L.esri
        .imageMapLayer({
          url: "https://landsat.arcgis.com/arcgis/rest/services/Landsat/PS/ImageServer",
          attribution: "United States Geological Survey (USGS), National Aeronautics and Space Administration (NASA)"
        })
        .addTo(map);
    </script>
  </body>
</html>