Esri Leaflet

Reprojected DynamicMapLayer

Map services published in projections other than Web Mercator (like this one) will be reprojected on the fly automatically. More information about Map Services can be found in the L.esri.Layers.DynamicMapLayer documentation.

<html>
<head>
  <meta charset=utf-8 />
  <title>Reprojected DynamicMapLayer</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

  <!-- Load Leaflet from CDN-->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" />
  <script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="//cdn.jsdelivr.net/leaflet.esri/1.0.3/esri-leaflet.js"></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>
  //Initialize the map to center on Western Europe
  var map = L.map('map').setView([49.39609, 5.76991], 4);

  //Add Gray Basemap
  L.esri.basemapLayer("Gray").addTo(map);
  dynLayer = L.esri.dynamicMapLayer({
    url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer"});

  map.addLayer(dynLayer);
</script>

</body>
</html>

Edit this sample on GitHub

Esri Leaflet is a project from the Esri PDX R&D Center and the Esri Community