added street+dark layers

index.html

@@ -230,7 +230,7 @@ <h3><strong><p>7. Questions about the Dataset?</p></strong></h3>
   </footer> 
 
   <!-- javascript file -->
-  <script type="text/javascript" src="webmap.js"></script>
+  <script type="text/javascript" src="webmap2Maps.js"></script>
   <script type="text/javascript" src="scripts.js"></script>
 </body>
 </html>

webmap2Maps.js

@@ -0,0 +1,191 @@
+// adding layer definition
+const mAttr1 =  'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye,' +
+    'Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
+      mAttr2 = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
+			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+
+      mUrl1 = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+      mUrl2 = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWljaGFlbGd0YWRlc3NlIiwiYSI6ImNrcGI5ZnBwNjA0OHYydnIzcTk0N3c0em0ifQ.jbKBBNxF3jk2KFDQ1GSq3A'; 
+
+const satellite = L.tileLayer(mUrl1, {attribution: mAttr1}),
+      streets = L.tileLayer(mUrl2, 
+          {id: 'mapbox/streets-v11', 
+           attribution: mAttr2, 
+           tileSize: 512,
+           zoomOffset: -1}),
+      dark = L.tileLayer(mUrl2, 
+          {id: 'mapbox/dark-v10', 
+           attribution: mAttr2, 
+           tileSize: 512,
+           zoomOffset: -1})
+
+
+
+  // initialize the map
+  // in the setView the first two values are lat and lon
+  // the last number is the level of zoom
+  var map = L.map('map', {
+    zoomDelta: 0.5,
+    zoomControl: false,
+    //maxBounds: bounds,
+    //maxBoundsViscosity: 0.0
+    layers: [satellite]
+  }).setView([15, 0], 2);
+
+
+  const baseLayers = {
+    "Satellite": satellite,
+    "Streets": streets,
+    "Dark": dark
+};
+
+L.control.layers(baseLayers).addTo(map);
+
+
+  // custom zoom bar control that includes a Zoom Home function
+L.Control.zoomHome = L.Control.extend({
+    options: {
+        position: 'topright',
+        zoomInText: '+',
+        zoomInTitle: 'Zoom in',
+        zoomOutText: '-',
+        zoomOutTitle: 'Zoom out',
+        zoomHomeText: '<i class="fas fa-home" style="line-height:1.65;"></i>',
+        zoomHomeTitle: 'Zoom home'
+    },
+
+    onAdd: function (map) {
+        var controlName = 'gin-control-zoom',
+            container = L.DomUtil.create('div', controlName + ' leaflet-bar'),
+            options = this.options;
+
+        this._zoomInButton = this._createButton(options.zoomInText, options.zoomInTitle,
+        controlName + '-in', container, this._zoomIn);
+        this._zoomHomeButton = this._createButton(options.zoomHomeText, options.zoomHomeTitle,
+        controlName + '-home', container, this._zoomHome);
+        this._zoomOutButton = this._createButton(options.zoomOutText, options.zoomOutTitle,
+        controlName + '-out', container, this._zoomOut);
+
+        this._updateDisabled();
+        map.on('zoomend zoomlevelschange', this._updateDisabled, this);
+
+        return container;
+    },
+
+    onRemove: function (map) {
+        map.off('zoomend zoomlevelschange', this._updateDisabled, this);
+    },
+
+    _zoomIn: function (e) {
+        this._map.zoomIn(e.shiftKey ? 3 : 1);
+    },
+
+    _zoomOut: function (e) {
+        this._map.zoomOut(e.shiftKey ? 3 : 1);
+    },
+
+    _zoomHome: function (e) {
+        map.setView([20, 0], 2);
+    },
+
+    _createButton: function (html, title, className, container, fn) {
+        var link = L.DomUtil.create('a', className, container);
+        link.innerHTML = html;
+        link.href = '#';
+        link.title = title;
+
+        L.DomEvent.on(link, 'mousedown dblclick', L.DomEvent.stopPropagation)
+            .on(link, 'click', L.DomEvent.stop)
+            .on(link, 'click', fn, this)
+            .on(link, 'click', this._refocusOnMap, this);
+
+        return link;
+    },
+
+    _updateDisabled: function () {
+        var map = this._map,
+            className = 'leaflet-disabled';
+
+        L.DomUtil.removeClass(this._zoomInButton, className);
+        L.DomUtil.removeClass(this._zoomOutButton, className);
+
+        if (map._zoom === map.getMinZoom()) {
+            L.DomUtil.addClass(this._zoomOutButton, className);
+        }
+        if (map._zoom === map.getMaxZoom()) {
+            L.DomUtil.addClass(this._zoomInButton, className);
+        }
+    }
+});
+
+// add the new control to the map
+var zoomHome = new L.Control.zoomHome();
+zoomHome.addTo(map);
+
+
+// load GeoJSON from an external file
+$.getJSON("./metadata/allMetadataV6.geojson",function(data){
+  var surgeIcon = L.icon({
+    iconUrl: 'circle-48.png',
+    iconSize: [13, 13], // size of the icon
+  });
+
+  // add GeoJSON layer to the map once the file is loaded
+  L.geoJson(data, {
+    pointToLayer: function(feature,latlng){
+      var marker = L.marker(latlng,{icon: surgeIcon});
+
+      var popupText = "<h2 style = 'color: black;'>Station Metadata</h2>" + '<hr style = "width: 100%;">' +  
+                      "<h4 style = 'color: black;'>Station Name:</h4>  "  
+                      +feature.properties.tg + '<br/>' + "<h4 style = 'color: black;'>Lon/Lat:</h4>  "+ 
+                      '[' +feature.geometry.coordinates[0] + ', ' + 
+                      feature.geometry.coordinates[1] +  ']' +'<hr/>';
+
+      // ereaint text
+      popupText += (!feature.properties.eraintPath == "") ? 
+      `<strong><a href= ${feature.properties.eraintPath} <h4>Surge: ERA-Interim ${feature.properties.eraintBest}</h4></a></strong>` : '';
+
+      // era20c text
+      popupText += (!feature.properties.era20cPath == "") ? 
+      `<strong><a href= ${feature.properties.era20cPath} ><h4>Surge: ERA20C ${feature.properties.era20cBest}</h4></a></strong>` : '';
+
+      // 20-CR text
+      popupText += (!feature.properties.twcrPath == "") ?
+      `<strong><a href= ${feature.properties.twcrPath} ><h4>Surge: 20-CR ${feature.properties.twcrBest}</h4></a></strong>` : '';
+
+      // MERRA
+      popupText += (!feature.properties.merraPath == "") ?
+      `<strong><a href= ${feature.properties.merraPath} ><h4>Surge: MERRA ${feature.properties.merraBest}</h4></a></strong>` : '';
+
+      // ERA5 text
+      popupText += (!feature.properties.erafivePath == "") ?
+      `<strong><a href= ${feature.properties.erafivePath} ><h4>Surge: ERA5 ${feature.properties.erafiveBest}</h4></a></strong>` : '';
+
+      marker.bindPopup(popupText);
+
+      return marker;
+    }
+  }).addTo(map);
+});
+
+
+  // // add search 
+  // map.addControl( new L.Control.Search({
+  //   url: 'https://nominatim.openstreetmap.org/search?format=json&accept-language=en-DE&q={s}',
+  //   jsonpParam: 'json_callback',
+  //   propertyName: 'display_name',
+  //   propertyLoc: ['lat','lon'],
+  //   markerLocation: true,
+  //   autoType: true,
+  //   autoCollapse: false,
+  //   minLength: 2,
+  //   zoom:10,
+  //   text: 'Searching...',
+  //   textCancel: 'Cancel',
+  //   textErr: 'No Tide Gauge Found'
+  // }) );
+
+//   update page year
+var d = new Date();
+$("span.currentYear").text(d.getFullYear());
+$("span").css("text-align", "center");