Add velocity layer

CHANGELOG.md

@@ -1,7 +1,7 @@
 ### Change Log for Node-RED Worldmap
 
  - v1.1.15 - Tidy of Info, Readme and NATO symbol options.
- - v1.1.14 - Add proper NATO symbology via <a href="https://github.com/spatialillusions/milsymbol" target="_new">milsymbol.js</a>
+ - v1.1.14 - Add proper NATO symbology via <a href="https://github.com/spatialillusions/milsymbol" target="mapinfo">milsymbol.js</a>
  - v1.1.13 - Add ability to set a building using a GeoJSON Feature set. {name:"MyTower":building:{...feature sets...}}
  - v1.1.12 - README changes, split out CHANGELOG.md
  - v1.1.11 - fix websocket multiple connections

README.md

@@ -9,6 +9,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v1.1.16 - Add Velocity layer - for velocity grid type overlays (eg wind, currrents, etc)
 - v1.1.15 - Tidy of Info, Readme and NATO symbol options.
 - v1.1.14 - Add proper NATO symbology via <a href="https://github.com/spatialillusions/milsymbol" target="mapinfo">milsymbol.js</a>
 - v1.1.13 - Add ability to set a building using a GeoJSON Feature set. {name:"MyTower":building:{...feature sets...}}
@@ -237,6 +238,24 @@ Optional properties include
 
 see http://leafletjs.com/examples/geojson/ for more details about options
 
+#### To add a Velocity Grid Overlay
+
+    msg.payload.command.map = {
+        overlay:"myWind",
+        velocity: { 	
+            displayValues: true,
+	        displayOptions: {
+                velocityType: 'Global Wind',
+                displayPosition: 'bottomleft',
+                displayEmptyString: 'No wind data'
+            },
+            maxVelocity: 15,
+            data: [Array of data as per format referenced below]
+        }
+    };
+
+see https://github.com/danwild/leaflet-velocity for more details about options and data examples.
+
 #### To add an Image Overlay
 
     var imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];

package.json

@@ -3,9 +3,9 @@
     "version": "1.1.15",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
+        "cgi": "0.3.1",
         "express": "^4.16.3",
-        "sockjs": "^0.3.19",
-        "cgi": "0.3.1"
+        "sockjs": "^0.3.19"
     },
     "repository": {
         "type": "git",

worldmap/index.html

@@ -29,7 +29,7 @@
     <link rel="stylesheet",type="text/css" href="leaflet/leaflet.measurecontrol.css">
     <link rel="stylesheet",type="text/css" href="leaflet/easy-button.css">
     <link rel="stylesheet",type="text/css" href="leaflet/leaflet.fullscreen.css">
-    <!-- <link rel="stylesheet" type="text/css" href="leaflet/leaflet-openweathermap.css"/> -->
+    <link rel="stylesheet",type="text/css" href="leaflet/leaflet-velocity.min.css">
 
     <link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
 
@@ -51,6 +51,7 @@
     <script type="text/javascript" src="leaflet/TileLayer.Grayscale.js"></script>
     <script type="text/javascript" src="leaflet/TileLayer.GrayscaleWMS.js"></script>
     <script type="text/javascript" src="leaflet/L.Terminator.js"></script>
+    <script type="text/javascript" src="leaflet/leaflet-velocity.min.js"></script>
     <script type="text/javascript" src="leaflet/tile.stamen.js"></script>
     <script type="text/javascript" src="leaflet/OSMBuildings-Leaflet.js"></script>
 
@@ -1192,6 +1193,20 @@ function doCommand(cmd) {
         }
         overlays[cmd.map.overlay].addTo(map);
     }
+    // Add a new velocity overlay layer
+    if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("velocity") ) {
+        console.log("M",cmd.map);
+        if (overlays.hasOwnProperty(cmd.map.overlay)) {
+            map.removeLayer(overlays[cmd.map.overlay]);
+            existsalready = true;
+        }
+        console.log("E",existsalready);
+        overlays[cmd.map.overlay] = L.velocityLayer(cmd.map.velocity);
+        if (!existsalready) {
+            layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
+        }
+        overlays[cmd.map.overlay].addTo(map);
+    }
     // Add a new overlay layer
     if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("url") && cmd.map.hasOwnProperty("opt")) {
         console.log("New overlay:",cmd.map.overlay);

worldmap/leaflet/leaflet-velocity.min.css

@@ -0,0 +1 @@
+.leaflet-control-velocity{background-color:hsla(0,0%,100%,.7);padding:0 5px;margin:0!important;color:#333;font:11px/1.5 Helvetica Neue,Arial,Helvetica,sans-serif}.velocity-overlay{position:absolute;z-index:1}

worldmap/worldmap.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# date: May 30th 2018 - v1.1.15
+# date: May 30th 2018 - v1.1.16
 
 CACHE:
 index.html
@@ -27,6 +27,8 @@ leaflet/leaflet-openweathermap.css
 leaflet/leaflet-openweathermap.js
 leaflet/leaflet-slider.css
 leaflet/leaflet-slider.js
+leaflet/leaflet-velocity.min.css
+leaflet/leaflet-velocity.min.js
 leaflet/leaflet.active-layers.min.js
 leaflet/leaflet.boatmarker.js
 leaflet/leaflet.css