diff --git a/index.html b/index.html
index 0191c3a..0c7efd6 100644
--- a/index.html
+++ b/index.html
@@ -1,45 +1,161 @@
+
-
- Add a WMS source
-
-
-
-
+
+ Add a WMS source
+
+
+
+
+
+
+
+
+
+ }, '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);
+ }
+
+