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
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
<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.10/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>

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