From e8b68355a834f8bbf046ad94927d638dda13fd69 Mon Sep 17 00:00:00 2001
From: ynunokawa <yusuke_nunokawa@esrij.com>
Date: Sat, 17 Sep 2016 14:30:03 +0900
Subject: [PATCH 1/4] support for vector tile layer with esri-leaflet-vector

only Esri Vector Basemaps
---
 package.json            |  1 +
 src/OperationalLayer.js | 30 ++++++++++++++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/package.json b/package.json
index df68e2f..db93715 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "esri-leaflet": "^2.0.0",
     "esri-leaflet-heatmap-feature-layer": "^2.0.0-beta.1",
     "esri-leaflet-renderers": "^2.0.4",
+    "esri-leaflet-vector": "^1.0.2",
     "leaflet": "^1.0.0-rc.1",
     "leaflet-omnivore": "^0.3.2",
     "leaflet-vectoricon": "^0.1.0",
diff --git a/src/OperationalLayer.js b/src/OperationalLayer.js
index 2220a0e..a9225ab 100644
--- a/src/OperationalLayer.js
+++ b/src/OperationalLayer.js
@@ -351,6 +351,36 @@ export function _generateEsriLayer (layer, layers, map, params, paneName) {
 
     layers.push({ type: 'TML', title: layer.title || '', layer: lyr });
 
+    return lyr;
+  } else if (layer.layerType === 'VectorTileLayer') {
+    var keys = {
+      'World Street Map (with Relief)': 'StreetsRelief',
+      'World Street Map (with Relief) (Mature Support)': 'StreetsRelief',
+      'Hybrid Reference Layer': 'Hybrid',
+      'Hybrid Reference Layer (Mature Support)': 'Hybrid',
+      'World Street Map': 'Streets',
+      'World Street Map (Mature Support)': 'Streets',
+      'World Street Map (Night)': 'StreetsNight',
+      'World Street Map (Night) (Mature Support)': 'StreetsNight',
+      'Dark Gray Canvas': 'DarkGray',
+      'Dark Gray Canvas (Mature Support)': 'DarkGray',
+      'World Topographic Map': 'Topographic',
+      'World Topographic Map (Mature Support)': 'Topographic',
+      'World Navigation Map': 'Navigation',
+      'World Navigation Map (Mature Support)': 'Navigation',
+      'Light Gray Canvas': 'Gray',
+      'Light Gray Canvas (Mature Support)': 'Gray'
+      //'Terrain with Labels': '',
+      //'World Terrain with Labels': '',
+      //'Light Gray Canvas Reference': '',
+      //'Dark Gray Canvas Reference': '',
+      //'Dark Gray Canvas Base': '',
+      //'Light Gray Canvas Base': ''
+    };
+    lyr = L.esri.Vector.basemap(keys[layer.title]);
+
+    layers.push({ type: 'VTL', title: layer.title || layer.id || '', layer: lyr });
+
     return lyr;
   } else if (layer.layerType === 'OpenStreetMap') {
     lyr = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

From 32e1a57299dcb5b0b42a281aba509876c579b681 Mon Sep 17 00:00:00 2001
From: ynunokawa <yusuke_nunokawa@esrij.com>
Date: Sat, 17 Sep 2016 14:30:30 +0900
Subject: [PATCH 2/4] update test apps

---
 index.html                           |  12 +--
 test/arcgis-online-auth.html         |  28 +++---
 test/layer-control.html              | 105 ---------------------
 test/twomaps.html                    | 136 ---------------------------
 test/vector-tile.html                |  98 -------------------
 test/with-esri-leaflet-renderer.html |  95 -------------------
 6 files changed, 20 insertions(+), 454 deletions(-)
 delete mode 100644 test/layer-control.html
 delete mode 100644 test/twomaps.html
 delete mode 100644 test/vector-tile.html
 delete mode 100644 test/with-esri-leaflet-renderer.html

diff --git a/index.html b/index.html
index 11656a4..a3fb92a 100644
--- a/index.html
+++ b/index.html
@@ -5,14 +5,11 @@
   <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 
   <!-- Load Leaflet from CDN-->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet.css" />
-  <script src="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet-src.js"></script>
-
-  <!-- Load Leaflet Label from GitHub -->
-  <script src="https://leaflet.github.io/Leaflet.label/leaflet.label.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.3/leaflet.css" />
+  <script src="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.3/leaflet-src.js"></script>
 
   <!-- Load Esri Leaflet from CDN -->
-  <script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0/esri-leaflet.js"></script>
+  <script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.3/esri-leaflet.js"></script>
 
 	<!-- Load Leaflet Heat from CDN -->
 	<script src="https://rawgit.com/Leaflet/Leaflet.heat/gh-pages/dist/leaflet-heat.js"></script>
@@ -20,6 +17,9 @@
 	<!-- 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 Vector Tile from CDN -->
+  <script src="//unpkg.com/esri-leaflet-vector@1.0.2"></script>
+
   <!-- Load Esri Leaflet Renderers from CDN -->
   <script src="//cdn.jsdelivr.net/leaflet.esri.renderers/2.0.3/esri-leaflet-renderers.js"></script>
 
diff --git a/test/arcgis-online-auth.html b/test/arcgis-online-auth.html
index 226c12d..2fa447f 100644
--- a/test/arcgis-online-auth.html
+++ b/test/arcgis-online-auth.html
@@ -4,15 +4,12 @@
   <title>Displaying Web Map</title>
   <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 
-    <!-- Load Leaflet from CDN-->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet.css" />
-    <script src="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet-src.js"></script>
+  <!-- Load Leaflet from CDN-->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.3/leaflet.css" />
+  <script src="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.3/leaflet-src.js"></script>
 
-    <!-- Load Leaflet Label from GitHub -->
-    <script src="https://leaflet.github.io/Leaflet.label/leaflet.label.js"></script>
-
-    <!-- Load Esri Leaflet from CDN -->
-    <script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0/esri-leaflet.js"></script>
+  <!-- Load Esri Leaflet from CDN -->
+  <script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.3/esri-leaflet.js"></script>
 
 	<!-- Load Leaflet Heat from CDN -->
 	<script src="https://rawgit.com/Leaflet/Leaflet.heat/gh-pages/dist/leaflet-heat.js"></script>
@@ -20,14 +17,17 @@
 	<!-- 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="//cdn.jsdelivr.net/leaflet.esri.renderers/2.0.3/esri-leaflet-renderers.js"></script>
+  <!-- Load Esri Leaflet Vector Tile from CDN -->
+  <script src="//unpkg.com/esri-leaflet-vector@1.0.2"></script>
+
+  <!-- Load Esri Leaflet Renderers from CDN -->
+  <script src="//cdn.jsdelivr.net/leaflet.esri.renderers/2.0.3/esri-leaflet-renderers.js"></script>
 
-    <!-- Load Vector Icon from GitHub -->
-    <script src="https://muxlab.github.io/Leaflet.VectorIcon/L.VectorIcon.js"></script>
+  <!-- Load Vector Icon from GitHub -->
+  <script src="https://muxlab.github.io/Leaflet.VectorIcon/L.VectorIcon.js"></script>
 
-    <!-- Load Leaflet Omnivore from CDN -->
-    <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>
+  <!-- Load Leaflet Omnivore from CDN -->
+  <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>
 
 	<!-- Load L.esri.WebMap -->
 	<script src="../dist/esri-leaflet-webmap-debug.js"></script>
diff --git a/test/layer-control.html b/test/layer-control.html
deleted file mode 100644
index 1925fee..0000000
--- a/test/layer-control.html
+++ /dev/null
@@ -1,105 +0,0 @@
-<html>
-<head>
-  <meta charset=utf-8 />
-  <title>Web Map with Layer Control</title>
-  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-
-    <!-- Load Leaflet from CDN-->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet.css" />
-    <script src="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet-src.js"></script>
-
-    <!-- Load Leaflet Label from GitHub -->
-    <script src="https://leaflet.github.io/Leaflet.label/leaflet.label.js"></script>
-
-    <!-- Load Esri Leaflet from CDN -->
-    <script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0/esri-leaflet.js"></script>
-
-	<!-- Load Leaflet Heat from CDN -->
-	<script src="https://rawgit.com/Leaflet/Leaflet.heat/gh-pages/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="//cdn.jsdelivr.net/leaflet.esri.renderers/2.0.3/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 from CDN -->
-    <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>
-
-    <!-- Load L.esri.WebMap -->
-	<script src="../dist/esri-leaflet-webmap-debug.js"></script>
-
-  <style>
-    body { margin:0; padding:0; }
-    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
-    .map-title-control {
-        background-color: #fff;
-        text-align: center;
-        text-decoration: none;
-        color: black;
-        padding: 10px;
-        border: 2px solid rgba(0,0,0,0.2);
-        border-radius: 4px;
-        font: bold 1em 'Lucida Console', 'Meiryo', Monaco, monospace;
-    }
-  </style>
-</head>
-<body>
-
-<div id="map"></div>
-
-<script>
-    var webmapId = '22c504d229f14c789c5b49ebff38b941'; //my goal
-
-	//var webmapId = 'f2e9b762544945f390ca4ac3671cfa72'; //ArcGISFeatureLayer
-	//var webmapId = '0e189846df1146b9873266bc12b81a45'; //ArcGISImageServiceLayer
-	//var webmapId = 'de2482217dd643bca3e97df3e785c6e1'; //ArcGISMapServiceLayer
-	//var webmapId = 'ccee269e69c1404486172aa7ccc80f0a'; //ArcGISTiledMapServiceLayer
-
-    var urlParams = location.search.substring(1).split('&');
-    for(var i=0; urlParams[i]; i++) {
-        var param = urlParams[i].split('=');
-        if(param[0] === 'webmap') {
-            webmapId = param[1]
-        }
-    }
-
-	//L.esri.basemapLayer("Gray").addTo(map);
-	//L.esri.basemapLayer("GrayLabels").addTo(map);
-
-	var webmap = L.esri.webMap(webmapId, { map: L.map("map") });
-
-    //L.marker([35, 139]).bindLabel('Look revealing label!').addTo(map);
-
-    webmap.on('metadataLoad', function() {
-        var MapTitleControl = L.Control.extend({
-            options: {
-                position: 'topright'
-            },
-            onAdd: function (map) {
-                var container = L.DomUtil.create('div', 'map-title-control');
-                container.innerHTML = '<a target="_brank" href="http://www.arcgis.com/home/webmap/viewer.html?webmap=' + webmapId + '">' + webmap.title + '</a>'; // Add link to a webmap.
-                return container;
-            }
-        });
-        webmap._map.addControl(new MapTitleControl());
-    });
-
-    webmap.on('load', function() {
-        console.log('webmap loaded', webmap.layers);
-        var overlayMaps = {};
-        webmap.layers.map(function(l) {
-            console.log(l);
-            overlayMaps[l.title] = l.layer;
-        });
-        L.control.layers({}, overlayMaps, {
-            position: 'bottomright'
-        }).addTo(webmap._map);
-    });
-</script>
-
-</body>
-</html>
diff --git a/test/twomaps.html b/test/twomaps.html
deleted file mode 100644
index a5c4b52..0000000
--- a/test/twomaps.html
+++ /dev/null
@@ -1,136 +0,0 @@
-<html>
-<head>
-  <meta charset=utf-8 />
-  <title>2 Web Maps on a map</title>
-  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-
-    <!-- Load Leaflet from CDN-->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet.css" />
-    <script src="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet-src.js"></script>
-
-    <!-- Load Leaflet Label from GitHub -->
-    <script src="https://leaflet.github.io/Leaflet.label/leaflet.label.js"></script>
-
-    <!-- Load Esri Leaflet from CDN -->
-    <script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0/esri-leaflet.js"></script>
-
-	<!-- Load Leaflet Heat from CDN -->
-	<script src="https://rawgit.com/Leaflet/Leaflet.heat/gh-pages/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="//cdn.jsdelivr.net/leaflet.esri.renderers/2.0.3/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 from CDN -->
-    <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>
-
-    <!-- Load L.esri.WebMap -->
-	<script src="../dist/esri-leaflet-webmap-debug.js"></script>
-
-  <style>
-    body { margin:0; padding:0; }
-    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
-    .map-title-control {
-        background-color: #fff;
-        text-align: center;
-        text-decoration: none;
-        color: black;
-        padding: 10px;
-        border: 2px solid rgba(0,0,0,0.2);
-        border-radius: 4px;
-        font: bold 1em 'Lucida Console', 'Meiryo', Monaco, monospace;
-    }
-  </style>
-</head>
-<body>
-
-<div id="map"></div>
-
-<script>
-  var mapsLoaded = false;
-  var metadataLoaded = false;
-
-  var webmapId1 = '22c504d229f14c789c5b49ebff38b941';
-  var webmapId2 = 'fb531718fd8d46dca745625d16954f1b';
-
-  var map = L.map('map');
-
-	var wm1 = L.esri.webMap(webmapId1, { map: map });
-  var wm2 = L.esri.webMap(webmapId2, { map: map });
-
-  wm1.on('load', function() {
-    if(wm2._loaded === true && mapsLoaded === false) {
-      mapsLoaded = true;
-      initLayerControl();
-    }
-  });
-  wm2.on('load', function() {
-    if(wm1._loaded === true && mapsLoaded === false) {
-      mapsLoaded = true;
-      initLayerControl();
-    }
-  });
-
-  wm1.on('metadataLoad', function() {
-    if(wm2._metadataLoaded === true && metadataLoaded === false) {
-      metadataLoaded = true;
-      initTitleControl();
-    }
-  });
-  wm2.on('metadataLoad', function() {
-    if(wm1._metadataLoaded === true && metadataLoaded === false) {
-      metadataLoaded = true;
-      initTitleControl();
-    }
-  });
-
-  function initTitleControl() {
-    var MapTitleControl = L.Control.extend({
-        options: {
-            position: 'topright'
-        },
-        onAdd: function (map) {
-            var container = L.DomUtil.create('div', 'map-title-control');
-            container.innerHTML = '<a target="_brank" href="http://www.arcgis.com/home/webmap/viewer.html?webmap=' + webmapId1 + '">' + wm1.title + '</a>' +
-              ' & ' + '<a target="_brank" href="http://www.arcgis.com/home/webmap/viewer.html?webmap=' + webmapId2 + '">' + wm2.title + '</a>';
-            return container;
-        }
-    });
-
-    map.addControl(new MapTitleControl());
-  }
-
-  function initLayerControl() {
-    var basemaps = {};
-    var overlayMaps = {};
-    wm1.layers.map(function(l, i) {
-      console.log(l);
-        if(i === 0) {
-          basemaps[l.title] = l.layer;
-        }
-        else {
-          overlayMaps[l.title] = l.layer;
-        }
-    });
-    wm2.layers.map(function(l, i) {
-      console.log(l);
-        if(i === 0) {
-          basemaps[l.title] = l.layer;
-        }
-        else {
-          overlayMaps[l.title] = l.layer;
-        }
-    });
-    L.control.layers(basemaps, overlayMaps, {
-        position: 'bottomright'
-    }).addTo(map);
-  }
-</script>
-
-</body>
-</html>
diff --git a/test/vector-tile.html b/test/vector-tile.html
deleted file mode 100644
index 209ee31..0000000
--- a/test/vector-tile.html
+++ /dev/null
@@ -1,98 +0,0 @@
-<html>
-<head>
-  <meta charset=utf-8 />
-  <title>Web Map with Layer Control</title>
-  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-
-    <!-- Load Leaflet from CDN-->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet.css" />
-    <script src="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet-src.js"></script>
-
-    <!-- Load Leaflet Label from GitHub -->
-    <script src="https://leaflet.github.io/Leaflet.label/leaflet.label.js"></script>
-
-    <!-- Load Esri Leaflet from CDN -->
-    <script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0/esri-leaflet.js"></script>
-
-	<!-- Load Leaflet Heat from CDN -->
-	<script src="https://rawgit.com/Leaflet/Leaflet.heat/gh-pages/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="//cdn.jsdelivr.net/leaflet.esri.renderers/2.0.3/esri-leaflet-renderers.js"></script>
-
-    <!-- Load Vector Grid from GitHub -->
-    <script src="http://ivansanchez.github.io/Leaflet.VectorGrid/dist/Leaflet.VectorGrid.js"></script>
-
-    <!-- Load Vector Icon from GitHub -->
-    <script src="https://muxlab.github.io/Leaflet.VectorIcon/L.VectorIcon.js"></script>
-
-    <!-- Load Leaflet Omnivore from CDN -->
-    <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>
-
-    <!-- Load L.esri.WebMap -->
-	<script src="../dist/esri-leaflet-webmap-debug.js"></script>
-
-  <style>
-    body { margin:0; padding:0; }
-    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
-    .map-title-control {
-        background-color: #fff;
-        text-align: center;
-        text-decoration: none;
-        color: black;
-        padding: 10px;
-        border: 2px solid rgba(0,0,0,0.2);
-        border-radius: 4px;
-        font: bold 1em 'Lucida Console', 'Meiryo', Monaco, monospace;
-    }
-  </style>
-</head>
-<body>
-
-<div id="map"></div>
-
-<script>
-    var webmapId = '722f3d8ed5e94babbe78c8236a28b42e'; // map with vt
-
-	var urlParams = location.search.substring(1).split('&');
-    for(var i=0; urlParams[i]; i++) {
-        var param = urlParams[i].split('=');
-        if(param[0] === 'webmap') {
-            webmapId = param[1]
-        }
-    }
-
-	var webmap = L.esri.webMap(webmapId, { map: L.map("map") });
-
-    webmap.on('metadataLoad', function() {
-        var MapTitleControl = L.Control.extend({
-            options: {
-                position: 'topright'
-            },
-            onAdd: function (map) {
-                var container = L.DomUtil.create('div', 'map-title-control');
-                container.innerHTML = '<a target="_brank" href="http://www.arcgis.com/home/webmap/viewer.html?webmap=' + webmapId + '">' + webmap.title + '</a>'; // Add link to a webmap.
-                return container;
-            }
-        });
-        webmap._map.addControl(new MapTitleControl());
-    });
-
-    webmap.on('load', function() {
-        console.log('webmap loaded', webmap.layers);
-        var overlayMaps = {};
-        webmap.layers.map(function(l) {
-            console.log(l);
-            overlayMaps[l.title] = l.layer;
-        });
-        L.control.layers({}, overlayMaps, {
-            position: 'bottomright'
-        }).addTo(webmap._map);
-    });
-</script>
-
-</body>
-</html>
diff --git a/test/with-esri-leaflet-renderer.html b/test/with-esri-leaflet-renderer.html
deleted file mode 100644
index f4ce166..0000000
--- a/test/with-esri-leaflet-renderer.html
+++ /dev/null
@@ -1,95 +0,0 @@
-<html>
-<head>
-  <meta charset=utf-8 />
-  <title>Web Map with Layer Control</title>
-  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-
-    <!-- Load Leaflet from CDN-->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet.css" />
-    <script src="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet-src.js"></script>
-
-    <!-- Load Leaflet Label from GitHub -->
-    <script src="https://leaflet.github.io/Leaflet.label/leaflet.label.js"></script>
-
-    <!-- Load Esri Leaflet from CDN -->
-    <script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0/esri-leaflet.js"></script>
-
-	<!-- Load Leaflet Heat from CDN -->
-	<script src="https://rawgit.com/Leaflet/Leaflet.heat/gh-pages/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="//cdn.jsdelivr.net/leaflet.esri.renderers/2.0.3/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 from CDN -->
-    <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>
-
-	<!-- Load L.esri.WebMap -->
-	<script src="../dist/esri-leaflet-webmap-debug.js"></script>
-
-  <style>
-    body { margin:0; padding:0; }
-    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
-    .map-title-control {
-        background-color: #fff;
-        text-align: center;
-        text-decoration: none;
-        color: black;
-        padding: 10px;
-        border: 2px solid rgba(0,0,0,0.2);
-        border-radius: 4px;
-        font: bold 1em 'Lucida Console', 'Meiryo', Monaco, monospace;
-    }
-  </style>
-</head>
-<body>
-
-<div id="map"></div>
-
-<script>
-    var webmapId = 'ba67472a7c9540508c556376d19e2e54';
-
-    var urlParams = location.search.substring(1).split('&');
-    for(var i=0; urlParams[i]; i++) {
-        var param = urlParams[i].split('=');
-        if(param[0] === 'webmap') {
-            webmapId = param[1]
-        }
-    }
-
-	var webmap = L.esri.webMap(webmapId, { map: L.map("map") });
-
-    webmap.on('metadataLoad', function() {
-        var MapTitleControl = L.Control.extend({
-            options: {
-                position: 'topright'
-            },
-            onAdd: function (map) {
-                var container = L.DomUtil.create('div', 'map-title-control');
-                container.innerHTML = '<a target="_brank" href="http://www.arcgis.com/home/webmap/viewer.html?webmap=' + webmapId + '">' + webmap.title + '</a>'; // Add link to a webmap.
-                return container;
-            }
-        });
-        webmap._map.addControl(new MapTitleControl());
-    });
-
-    webmap.on('load', function() {
-        console.log('webmap loaded', webmap.layers);
-        var overlayMaps = {};
-        webmap.layers.map(function(l) {
-            console.log(l);
-            overlayMaps[l.title] = l.layer;
-        });
-        L.control.layers({}, overlayMaps, {
-            position: 'bottomright'
-        }).addTo(webmap._map);
-    });
-</script>
-
-</body>
-</html>

From 304ea2384787afd460e9b476779d07c95f771a53 Mon Sep 17 00:00:00 2001
From: ynunokawa <yusuke_nunokawa@esrij.com>
Date: Sun, 18 Sep 2016 08:57:20 +0900
Subject: [PATCH 3/4] handle error when it is not ArcGIS Online basemap

---
 src/OperationalLayer.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/OperationalLayer.js b/src/OperationalLayer.js
index a9225ab..54f3eb7 100644
--- a/src/OperationalLayer.js
+++ b/src/OperationalLayer.js
@@ -377,7 +377,13 @@ export function _generateEsriLayer (layer, layers, map, params, paneName) {
       //'Dark Gray Canvas Base': '',
       //'Light Gray Canvas Base': ''
     };
-    lyr = L.esri.Vector.basemap(keys[layer.title]);
+
+    if (keys[layer.title]) {
+      lyr = L.esri.Vector.basemap(keys[layer.title]);
+    } else {
+      console.error('Unsupported Vector Tile Layer: ', layer);
+      lyr = L.featureGroup([]);
+    }
 
     layers.push({ type: 'VTL', title: layer.title || layer.id || '', layer: lyr });
 

From 7d5489ebdfce2f129edaa29eaf91e1a7a39e9333 Mon Sep 17 00:00:00 2001
From: ynunokawa <yusuke_nunokawa@esrij.com>
Date: Sun, 18 Sep 2016 08:57:47 +0900
Subject: [PATCH 4/4] bug fix: layer visibility

---
 src/WebMapLoader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/WebMapLoader.js b/src/WebMapLoader.js
index d502213..d905896 100644
--- a/src/WebMapLoader.js
+++ b/src/WebMapLoader.js
@@ -57,7 +57,7 @@ export var WebMap = L.Evented.extend({
   },
 
   _operationalLayer: function (layer, layers, map, params, paneName) {
-    var lyr = operationalLayer(layer, layers, map, params).addTo(map);
+    var lyr = operationalLayer(layer, layers, map, params);
     if (lyr !== undefined && layer.visibility === true) {
       lyr.addTo(map);
     }