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

Displaying Web maps

With the appropriate plugins, its possible to render web maps created in arcgis.com.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Displaying Web maps</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>

<!-- Load Leaflet Label from GitHub -->
<script src="https://leaflet.github.io/Leaflet.label/leaflet.label.js"></script>

<!-- Include Leaflet.heat from CDN -->
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>

<!-- Load Heatmap Feature Layer from CDN -->
<script src="https://cdn.jsdelivr.net/leaflet.esri.heatmap-feature-layer/2.0.0-beta.1/esri-leaflet-heatmap-feature-layer.js"></script>

 <!-- Load Esri Leaflet Renderers from CDN -->
 <script src="https://cdn.jsdelivr.net/leaflet.esri.renderers/2.0.2/esri-leaflet-renderers.js"></script>

 <!-- Load Vector Icon from GitHub -->
 <script src="https://muxlab.github.io/Leaflet.VectorIcon/L.VectorIcon.js"></script>

 <!-- Load Leaflet Omnivore -->
 <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>

 <!-- Load L.esri.WebMap -->
 <script src="https://cdn.jsdelivr.net/leaflet.esri.webmap/0.4.0/esri-leaflet-webmap.js"></script>

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

<script>
  // to draw a different webmap, just append its id instead
  // webmap.html?id=d143b33f1a02421d86b6a4ca1d7b7cd0

  var webmapId = 'd143b33f1a02421d86b6a4ca1d7b7cd0'; // Default WebMap ID
  getIdfromUrl();

  var webmap = L.esri.webMap(webmapId, { map: L.map('map') });

  webmap.on('load', function () {
    var overlayMaps = {};
    webmap.layers.forEach(function (l) {
      overlayMaps[l.title] = l.layer;
    });
    L.control.layers({}, overlayMaps, {
      position: 'bottomleft'
    }).addTo(webmap._map);
  });

  function getIdfromUrl () {
    var urlParams = location.search.substring(1).split('&');
    for (var i = 0; urlParams[i]; i++) {
      var param = urlParams[i].split('=');
      if (param[0] === 'id') {
        webmapId = param[1];
      }
    }
  }
</script>

</body>
</html>