Esri Leaflet
This content has moved to developers.arcgis.com. Please update your bookmarks!

Simple ImageMapLayer

Display an Image Service from ArcGIS Online or ArcGIS Server. More information about Map Services can be found in the L.esri.ImageMapLayer documentation.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Simple ImageMapLayer</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"
    integrity="sha512-E0DKVahIg0p1UHR2Kf9NX7x7TUewJb30mxkxEm2qOYTVJObgsAGpEol9F6iK6oefCbkJiA4/i6fnTHzM6H1kEA=="
    crossorigin=""></script>

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>

<div id="map"></div>

<script>
    var 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>