Leaflet!

Starting of leaflet layering and maps, with a link from the mapbox to the leaflet.
daveism · May 21, 2018 · 343ed70 · 343ed70
1 parent afaea76
commit 343ed70
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -92,7 +92,8 @@
       margin-left: 5px;
     }
   </style>
-  <nav id='menu' class='menu'>Map Layers</nav>
+  <nav id='menu' class='menu'>Map Layers
+    <a href ='leaftlet.html'> Leaflet!</a></nav>
   <div id='map'></div>
   <script>
     mapboxgl.accessToken = 'pk.eyJ1IjoiZGF2ZWlzbSIsImEiOiJCdjUxT0FzIn0.V9oIk_wUc4uZu7UBblR8mw';

diff --git a/leaflet.html b/leaflet.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset='utf-8' />
+  <title>Add a WMS source-Leaflet</title>
+  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+  <!-- this form is more secure -->
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
+  <!-- <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> -->
+  <!-- <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> -->
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    #map {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+
+  <div id='map'></div>
+  <script>
+    //lat and long swapped in set view.
+    var map = L.map('map').setView([40.6892, -74.5447], 8);
+    // var map = L.map('map', crs.L.CRS.EPSG3857);
+    // var map = L.map('map',{
+    //   container: 'map',
+    //   style: 'mapbox://styles/mapbox/light-v9',
+    //   zoom: 8,
+    //   center: [-74.5447, 40.6892]
+    // });
+    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZGF2ZWlzbSIsImEiOiJCdjUxT0FzIn0.V9oIk_wUc4uZu7UBblR8mw', {
+      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+      maxZoom: 18,
+      id: 'mapbox.streets'
+    }).addTo(map);
+    var NAExposureIndex = L.tileLayer.wms('https://gis.nemac.org/nfwf?', {
+      layers: 'NA_ExposureIndex',
+      format: 'image/png',
+      transparent: true,
+      crs: L.CRS.EPSG3857
+    }, 'aeroway-taxiway').addTo(map);
+    //is there a way to do the aeroway-taxiway overlay like in mapbox?
+
+
+    // NAExposureIndex.addTo(map);
+  </script>
+
+</body>
+
+</html>