updates

visibilty toggle and nav bar aesthetics
daveism · May 16, 2018 · e2d2577 · e2d2577
1 parent 404fa94
commit e2d2577
Showing 1 changed file with 149 additions and 33 deletions.
diff --git a/index.html b/index.html
@@ -1,45 +1,161 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    <meta charset='utf-8' />
-    <title>Add a WMS source</title>
-    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
-    <style>
-        body { margin:0; padding:0; }
-        #map { position:absolute; top:0; bottom:0; width:100%; }
-    </style>
+  <meta charset='utf-8' />
+  <title>Add a WMS source</title>
+  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
+  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    #map {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+    }
+  </style>
 </head>
+
 <body>
+  <style>
+    #menu {
+      z-index: 1;
+      top: 10px;
+      right: 20px;
+      position: absolute;
+      background: #fff;
+      width: 150px;
+      border-radius: 4px;
+    }
+
+    #menu a {
+      text-decoration: none;
+      color: #000;
+      font-size: 14px;
+      display: block;
+      margin: 0 auto;
+      padding: 0;
+      text-align: center;
+    }
+
+    #menu a:hover {
+      background: #CCC;
+    }
+
+    #menu a.active {
+      background: #BBBBBC;
+      color: #000;
+    }
+
+    #menu a.active:hover {
+      background: #5D5D5E;
+    }
+  </style>
+  <nav id="menu"></nav>
+  <div id='map'></div>
+  <script>
+    mapboxgl.accessToken = 'pk.eyJ1IjoiZGF2ZWlzbSIsImEiOiJCdjUxT0FzIn0.V9oIk_wUc4uZu7UBblR8mw';
+    var map = new mapboxgl.Map({
+      container: 'map',
+      style: 'mapbox://styles/mapbox/light-v9',
+      zoom: 8,
+      center: [-74.5447, 40.6892]
+    });
+    //on the opening of page all layers load.
+    map.on('load', function() {
+
+      //add nfwf with correct srs update with bbox
+      //sources cause less uncaught type error!
+      map.addSource('na-exposure-index', {
+        'type': 'raster',
+        'tiles': [
+          'https://gis.nemac.org/nfwf?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=256&height=256&layers=NA_ExposureIndex'
+        ],
+        'tileSize': 256
+      });
+      map.addLayer({
+        'id': 'NA Exposure Index',
+        'type': 'raster',
+        'source': 'na-exposure-index',
+        'layout': {
+          'visibility': 'visible'
+        },
+        'paint': {}
+      }, 'aeroway-taxiway');
+
+      map.addSource('na-threat-index', {
+        'type': 'raster',
+        'tiles': [
+          'https://gis.nemac.org/nfwf?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=256&height=256&layers=NA_ThreatIndex_Ramp'
+        ],
 
-<div id='map'></div>
-<script>
-mapboxgl.accessToken = 'pk.eyJ1IjoiZGF2ZWlzbSIsImEiOiJCdjUxT0FzIn0.V9oIk_wUc4uZu7UBblR8mw';
-var map = new mapboxgl.Map({
-    container: 'map',
-    style: 'mapbox://styles/mapbox/light-v9',
-    zoom: 8,
-    center: [-74.5447, 40.6892]
-});
-
-map.on('load', function() {
-
-    //add nfwf with correct srs update with bbox
-    map.addLayer({
-        'id': 'wms-test-layer',
+        'tileSize': 256
+      });
+      map.addLayer({
+        'id': 'NA Threat Index',
         'type': 'raster',
-        'source': {
-            'type': 'raster',
-            'tiles': [
-                'https://gis.nemac.org/nfwf?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=256&height=256&layers=NA_ExposureIndex'
-            ],
-            'tileSize': 256
+        'source': 'na-threat-index',
+        'layout': {
+          'visibility': 'none'
         },
         'paint': {}
-    }, 'aeroway-taxiway');
-});
-</script>
+      }, 'aeroway-taxiway'); //new layer
+
+      map.addSource('na-asset-index', {
+        'type': 'raster',
+        'tiles': [
+          'https://gis.nemac.org/nfwf?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=256&height=256&layers=NA_AssetIndex'
+        ],
+
+        'tileSize': 256
+      });
+
+      map.addLayer({
+        'id': 'NA Asset Index',
+        'type': 'raster',
+        'source': 'na-asset-index',
+        'layout': {
+          'visibility': 'none'
+        },
+        'paint': {}
+      }, 'aeroway-taxiway');
+    }); //end of load map
+
+
+    var layerIds = ['NA Asset Index', 'NA Threat Index', 'NA Exposure Index'];
+    for (var i = 0; i < layerIds.length; i++) {
+      var id = layerIds[i];
+      var url = document.createElement('a');
+      url.href = '#';
+      url.className = 'active';
+      url.textContent = id;
+
+      url.onclick = function(clicked) {
+        var currentLayer = this.textContent;
+        clicked.preventDefault();
+        clicked.stopPropagation();
+
+        var visibility = map.getLayoutProperty(currentLayer, 'visibility');
+
+        if (visibility === 'visible') {
+          map.setLayoutProperty(currentLayer, 'visibility', 'none');
+          this.className = '';
+        } else {
+          this.className = 'active';
+          map.setLayoutProperty(currentLayer, 'visibility', 'visible');
+        }
+      };
+      var layers = document.getElementById('menu');
+      layers.appendChild(url);
+    }
+  </script>
 
 </body>
+
 </html>