update Esri layers

re-add hikeBike

README.md

@@ -9,6 +9,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v1.5.38 - Add Esri dark grey and ocean, re-add hikebike, layers
 - v1.5.37 - Add .trackpoints to override default in tracks node. Let tracks optionally be on different layers. Fix marker changing layers Issue #85
 - v1.5.36 - Fix contextmenu $name substitution. Issue #84
 - v1.5.35 - Add msg.delete command to remove any layers not needed at start (array of names). Issue #83.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "1.5.37",
+    "version": "1.5.38",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "cgi": "0.3.1",

worldmap.html

@@ -33,11 +33,13 @@
         <option value="OSM">OpenStreetMap</option>
         <option value="Esri">ESRI Streetmap</option>
         <option value="Esri Satellite">ESRI Satellite</option>
-        <option value="Esri Terrain">ESRI Terrain</option>
+        <option value="Esri Topography">ESRI Topography</option>
+        // <option value="Esri Terrain">ESRI Terrain</option>
+        <option value="Esri Dark Grey">ESRI Dark Grey</option>
         <option value="Esri Ocean">ESRI Ocean</option>
         <option value="Nat Geo">National Geographic</option>
         <option value="UK OS Opendata">UK OS Opendata</option>
-        <!-- <option value="Hike Bike">Hike Bike OSM</option> -->
+        <option value="Hike Bike">Hike Bike OSM</option>
         <option value="Terrain">Terrain</option>
         <option value="Watercolor">Stamen Watercolor</option>
     </select>

worldmap/css/map.css

@@ -4,6 +4,7 @@ body {
     margin:0;
     padding:0;
     font:14px Verdana, Arial, sans-serif;
+    overflow:hidden;
 }
 
 p, h1, h2, h3, h4 {

worldmap/index.html

@@ -700,18 +700,29 @@ var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest
 });
 basemaps["Esri Satellite"] = Esri_WorldImagery;
 
-var Esri_WorldShadedRelief = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}', {
-    attribution: 'Tiles © Esri',
-    maxNativeZoom:13
+var Esri_WorldTopoMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
+	attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
 });
-basemaps["Esri Terrain"] = Esri_WorldShadedRelief;
+basemaps["Esri Topography"] = Esri_WorldTopoMap;
+
+// var Esri_WorldShadedRelief = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}', {
+//     attribution: 'Tiles © Esri',
+//     maxNativeZoom:13
+// });
+// basemaps["Esri Terrain"] = Esri_WorldShadedRelief;
 
 var Esri_OceanBasemap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {
-    attribution: 'Tiles © Esri',
-    maxNativeZoom:10
+	attribution: 'Tiles © Esri — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri',
+	maxZoom: 13
 });
 basemaps["Esri Ocean"] = Esri_OceanBasemap;
 
+var Esri_WorldGrayCanvas = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
+	attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
+	maxZoom: 16
+});
+basemaps["Esri Dark Grey"] = Esri_WorldGrayCanvas;
+
 // var OpenMapSurfer_Roads = L.tileLayer('https://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}', {
 //     maxZoom: 18,
 //     attribution: 'Imagery from <a href="https://giscience.uni-hd.de/">University of Heidelberg</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
@@ -741,12 +752,11 @@ var NLS_OS_opendata = L.tileLayer('https://geo.nls.uk/maps/opendata/{z}/{x}/{y}.
 });
 basemaps["UK OS Opendata"] = NLS_OS_opendata;
 
-// //https://tiles.wmflabs.org/hikebike/{zoom}/{x}/{y}.png
-// var HikeBike_HikeBike = L.tileLayer('https://tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png', {
-// 	maxZoom: 19,
-// 	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-// });
-// basemaps["Hike Bike"] = HikeBike_HikeBike;
+var HikeBike_HikeBike = L.tileLayer('https://tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png', {
+	maxZoom: 19,
+	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+});
+basemaps["Hike Bike"] = HikeBike_HikeBike;
 
 var NLS_OS_1919_1947 = L.tileLayer( 'https://nls-{s}.tileserver.com/nls/{z}/{x}/{y}.jpg', {
     attribution: 'Historical Maps Layer, from <a href="https://maps.nls.uk/projects/api/">NLS Maps</a>',
@@ -1309,7 +1319,7 @@ function setMarker(data) {
                 delete data.photoUrl;
             }
             if (data.hasOwnProperty("videoUrl")) {
-                words += '<video controls autoplay><source src="'+data.videoUrl+'" type="video/mp4">Your browser does not support the video tag.</video>';
+                words += '<video controls muted autoplay width="320"><source src="'+data.videoUrl+'" type="video/mp4">Your browser does not support the video tag.</video>';
                 delete data.videoUrl;
             }
             if (data.hasOwnProperty("ttl")) {  // save expiry time for this marker