add rainfall overlay - remove old overlays that don't load

Author: Dave Conway-Jones

CHANGELOG.md

@@ -1,6 +1,7 @@
 ### Change Log for Node-RED Worldmap
 
- - v2.11.2 - allow thicknesss of arc to be specified by weight
+ - v2.12.0 - Add live rainfall radar data layer. Remove some non-loading overlays.
+ - v2.11.2 - Allow thicknesss of arc to be specified by weight
  - v2.11.1 - Better handle KML point info - add popup.
  - v2.11.0 - Add option to smooth tracks using bezier curves.
  - v2.10.0 - Save latest position to browser for refresh if in iframe/dashboard. Allow fractional Zoom levels.

README.md

@@ -11,7 +11,8 @@ map web page for plotting "things" on.
 
 ### Updates
 
-- v2.11.2 - allow thicknesss of arc to be specified by weight
+- v2.12.0 - Add live rainfall radar data layer. Remove some non-loading overlays.
+- v2.11.2 - Allow thicknesss of arc to be specified by weight
 - v2.11.1 - Better handle KML point info - add popup.
 - v2.11.0 - Add option to smooth tracks using bezier curves.
 - v2.10.0 - Save latest position to browser for refresh if in iframe/dashboard. Allow fractional Zoom levels.

package.json

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

worldmap/worldmap.js

@@ -430,6 +430,15 @@ function moveTerminator() { // if terminator line plotted move it every minute
 }
 setInterval( function() { moveTerminator() }, 60000 );
 
+// move the rainfall overlay (if enabled) every 10 minutes
+function moveRainfall() {
+    if (map.hasLayer(overlays["rainfall"])) {
+        overlays["rainfall"]["_url"] = 'https://tilecache.rainviewer.com/v2/radar/' + parseInt(Date.now()/600000)*600 + '/256/{z}/{x}/{y}/2/1_1.png';
+        overlays["rainfall"].redraw();
+    }
+}
+setInterval( function() { moveRainfall() }, 600000 );
+
 function setCluster(v) {
     clusterAt = v || 0;
     console.log("clusterAt set:",clusterAt);
@@ -1037,40 +1046,48 @@ overlays["countries"] = layers["_countries"];
 layers["_daynight"] = new L.LayerGroup();
 overlays["day/night"] = layers["_daynight"];
 
-// Add the heatmap layer
-var heat = L.heatLayer([], {radius:60, gradient:{0.2:'blue', 0.4:'lime', 0.6:'red', 0.8:'yellow', 1:'white'}});
-layers["_heat"] = new L.LayerGroup().addLayer(heat);
-overlays["heatmap"] = layers["_heat"];
+// Add live rain data
+overlays["rainfall"] = new L.TileLayer('https://tilecache.rainviewer.com/v2/radar/' + parseInt(Date.now()/600000)*600 + '/256/{z}/{x}/{y}/2/1_1.png', {
+    tileSize: 256,
+    opacity: 0.4,
+    transparent: true,
+    attribution: '<a href="https://rainviewer.com" target="_blank">rainviewer.com</a>'
+});
 
 // Add the buildings layer
-overlays["buildings"] = new OSMBuildings(map).load();
-map.removeLayer(overlays["buildings"]);     // Hide it at start
+// overlays["buildings"] = new OSMBuildings(map).load();
+// map.removeLayer(overlays["buildings"]);     // Hide it at start
 
 // Add Roads
-overlays["roads"] = L.tileLayer('https://{s}.tile.openstreetmap.se/hydda/roads_and_labels/{z}/{x}/{y}.png', {
-    maxZoom: 18,
-    attribution: 'Tiles courtesy of <a href="https://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-    opacity: 0.8
-});
+// overlays["roads"] = L.tileLayer('https://{s}.tile.openstreetmap.se/hydda/roads_and_labels/{z}/{x}/{y}.png', {
+//     maxZoom: 18,
+//     attribution: 'Tiles courtesy of <a href="https://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+//     opacity: 0.8
+// });
 
-// Add Railways
-overlays["railways"] = L.tileLayer('https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png', {
-    maxZoom: 19,
-    attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> | Map style: &copy; <a href="https://www.OpenRailwayMap.org">OpenRailwayMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
-});
+// // Add Railways
+// overlays["railways"] = L.tileLayer('https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png', {
+//     maxZoom: 19,
+//     attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> | Map style: &copy; <a href="https://www.OpenRailwayMap.org">OpenRailwayMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
+// });
 
-// Add Public Transport (Buses)
-overlays["public transport"] = L.tileLayer('https://openptmap.org/tiles/{z}/{x}/{y}.png', {
-    maxZoom: 17,
-    attribution: 'Map data: &copy; <a href="https://www.openptmap.org">OpenPtMap</a> contributors'
-});
+// // Add Public Transport (Buses)
+// overlays["public transport"] = L.tileLayer('https://openptmap.org/tiles/{z}/{x}/{y}.png', {
+//     maxZoom: 17,
+//     attribution: 'Map data: &copy; <a href="https://www.openptmap.org">OpenPtMap</a> contributors'
+// });
 
 // Add the OpenSea markers layer
 overlays["ship nav"] = L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
     maxZoom: 19,
     attribution: 'Map data: &copy; <a href="https://www.openseamap.org">OpenSeaMap</a> contributors'
 });
 
+// Add the heatmap layer
+var heat = L.heatLayer([], {radius:60, gradient:{0.2:'blue', 0.4:'lime', 0.6:'red', 0.8:'yellow', 1:'white'}});
+layers["_heat"] = new L.LayerGroup().addLayer(heat);
+overlays["heatmap"] = layers["_heat"];
+
 if (showUserMenu) {
     if ( window.localStorage.hasOwnProperty("lastlayer") ) {
         if ( basemaps[window.localStorage.getItem("lastlayer")] ) {