test code: two web maps on a map

ynunokawa · Jun 8, 2016 · 46a5db3 · 46a5db3
1 parent 8f62aca
commit 46a5db3
Showing 1 changed file with 161 additions and 0 deletions.
diff --git a/test/twomaps.html b/test/twomaps.html
@@ -0,0 +1,161 @@
+<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 Vector Icon from GitHub -->
+    <script src="https://muxlab.github.io/Leaflet.VectorIcon/L.VectorIcon.js"></script>
+
+    <!-- Load L.esri.WebMap -->
+	<script src="../src/L.esri.WebMap.js"></script>
+
+  <style>
+    body { margin:0; padding:0; }
+    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
+    .leaflet-popup-content { max-height: 250px; }
+    .leaflet-popup-content-description { max-height: 200px; overflow: auto; }
+    .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;
+    }
+
+    /* label.css */
+    .point-label {
+      font-size: 1em;
+      font-weight: bold;
+      text-transform: uppercase;
+      text-align: center;
+      margin-top: -1em;
+      margin-left: -2em;
+      white-space: nowrap;
+    }
+    .path-label {
+      font-size: .8em;
+      font-weight: bold;
+      text-transform: uppercase;
+      text-align: center;
+      margin-top: -1em;
+      white-space: nowrap;
+    }
+    .point-label div {
+      position: relative;
+      left: -50%;
+      text-shadow: 1px 1px 0px #fff, -1px 1px 0px #fff, 1px -1px 0px #fff, -1px -1px 0px #fff;
+    }
+    .path-label div {
+      position: relative;
+      left: -50%;
+      text-shadow: 1px 1px 0px #fff, -1px 1px 0px #fff, 1px -1px 0px #fff, -1px -1px 0px #fff;
+    }
+  </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>