Add Tracks node - and fix Windows web socket

README.md

@@ -7,6 +7,7 @@ map web page for plotting "things" on.
 ![Map Image](https://dceejay.github.io/pages/images/redmap.png)
 
 ### Changes
+ - v1.0.29 - Add, tracks node, Fix websocket on Windows
  - v1.0.28 - Move websocket to specific path, and support satellite node
  - v1.0.26 - Add info on how to use with local WMS server
  - v1.0.24 - Add `.weblink` property to allow links out to other information.

package.json

@@ -1,6 +1,6 @@
 {
     "name"          : "node-red-contrib-web-worldmap",
-    "version"       : "1.0.28",
+    "version"       : "1.0.29",
     "description"   : "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies"  : {
         "express": "^4.15.0",

worldmap.html

@@ -169,3 +169,45 @@
         }
     });
 </script>
+
+
+<script type="text/x-red" data-template-name="worldmap-tracks">
+<div class="form-row">
+    <label for="node-input-depth"><i class="fa fa-map-marker"></i> Number of</label>
+    points in track <input type="text" id="node-input-depth" style="width:50%" placeholder="number - default 20">
+</div>
+<div class="form-row">
+    <label for="node-input-name"><i class="fa fa-file"></i> Name</label>
+    <input type="text" id="node-input-name" placeholder="name">
+</div>
+</script>
+
+<script type="text/x-red" data-help-name="worldmap-tracks">
+    <p>Creates tracks lines based on a specified number of previous locations.</p>
+    <p>Holds all the points in memory, so if you have a lot of points held for a
+    large depth then memory usage may become excessive.</p>
+</script>
+
+<script type="text/javascript">
+    RED.nodes.registerType('worldmap-tracks',{
+        category: 'location',
+        color:"darksalmon",
+        defaults: {
+            depth: {value:20},
+            name: {value:""}
+        },
+        inputs:1,
+        outputs:1,
+        icon: "white-globe.png",
+        paletteLabel: "tracks",
+        label: function() {
+            return this.name||"tracks";
+        },
+        labelStyle: function() {
+            return this.name?"node_label_italic":"";
+        },
+        info: function() {
+            return 'The map can be found [here]('+RED.settings.httpNodeRoot.slice(0,-1)+'/worldmap).';
+        }
+    });
+</script>

worldmap.js

@@ -24,7 +24,7 @@ module.exports = function(RED) {
     var WorldMap = function(n) {
         RED.nodes.createNode(this,n);
         if (!socket) {
-            var fullPath = path.join(RED.settings.httpNodeRoot, 'worldmap', 'socket.io');
+            var fullPath = path.posix.join(RED.settings.httpNodeRoot, 'worldmap', 'socket.io');
             socket = io.listen(RED.server, {path:fullPath});
         }
         this.lat = n.lat || "";
@@ -104,4 +104,54 @@ module.exports = function(RED) {
         socket.on('connection', callback);
     }
     RED.nodes.registerType("worldmap in",WorldMapIn);
+
+    var satarray = {};
+    var WorldMapTracks = function(n) {
+        RED.nodes.createNode(this,n);
+        this.depth = Number(n.depth) || 20;
+        var node = this;
+
+        node.on("input", function(msg) {
+            if (msg.hasOwnProperty("payload") && msg.payload.hasOwnProperty("name")) {
+                var newmsg = RED.util.cloneMessage(msg);
+                if (msg.payload.deleted) {
+                    delete satarray[msg.payload.name];
+                    newmsg.payload.name = msg.payload.name + "_";
+                    node.send(newmsg);  // send the track to be deleted
+                    return;
+                }
+                if (!satarray.hasOwnProperty(msg.payload.name)) {
+                    satarray[msg.payload.name] = [];
+                }
+                satarray[msg.payload.name].push(msg.payload);
+                if (satarray[msg.payload.name].length > node.depth) {
+                    satarray[msg.payload.name].shift();
+                }
+
+                var line = [];
+                for (var i=0; i<satarray[msg.payload.name].length; i++) {
+                    var m = satarray[msg.payload.name][i];
+                    if (m.hasOwnProperty("lat") && m.hasOwnProperty("lon")) {
+                        line.push( [m.lat*1, m.lon*1] );
+                        delete newmsg.payload.lat;
+                        delete newmsg.payload.lon;
+                    }
+                    if (m.hasOwnProperty("position") && m.position.hasOwnProperty("lat") && m.position.hasOwnProperty("lon")) {
+                        line.push( [m.position.lat*1, m.position.lon*1] );
+                        delete newmsg.payload.position;
+                    }
+                }
+                if (line.length > 1) { // only send track if two points or more
+                    newmsg.payload.line = line;
+                    newmsg.payload.name = msg.payload.name + "_";
+                    node.send(newmsg);  // send the track
+                }
+            }
+        });
+
+        node.on("close", function() {
+            satarray = {};
+        });
+    }
+    RED.nodes.registerType("worldmap-tracks",WorldMapTracks);
 }

worldmap/index.html

@@ -223,7 +223,7 @@ if (!inIframe) {
 
     // Create the clear heatmap button
     var clrHeat = L.easyButton( '<b>Reset Heatmap</b>', function() {
-        console.log("reset heatmap");
+        console.log("Reset heatmap");
         heat.setLatLngs([]);
     }, "Clears the current heatmap", "bottomright");
 }
@@ -285,6 +285,10 @@ function doTidyUp() {
                     layers[markers[m].lay].removeLayer(polygons[m]);
                     delete polygons[m];
                 }
+                if (typeof polygons[m+"_"] != "undefined") {
+                    //layers[markers[m+"_"].lay].removeLayer(polygons[m+"_"]);
+                    delete polygons[m+"_"];
+                }
                 delete markers[m];
             }
         }
@@ -821,7 +825,7 @@ function setMarker(data) {
         else if (data.icon === "car") {
             data.iconColor = data.iconColor || "black";
             icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="47px" height="47px" viewBox="0 0 47.032 47.032">';
-            icon += '<g><path d="M29.395,0H17.636c-3.117,0-5.643,3.467-5.643,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759   c3.116,0,5.644-2.527,5.644-5.644V6.584C35.037,3.467,32.511,0,29.395,0z M34.05,14.188v11.665l-2.729,0.351v-4.806L34.05,14.188z    M32.618,10.773c-1.016,3.9-2.219,8.51-2.219,8.51H16.631l-2.222-8.51C14.41,10.773,23.293,7.755,32.618,10.773z M15.741,21.713   v4.492l-2.73-0.349V14.502L15.741,21.713z M13.011,37.938V27.579l2.73,0.343v8.196L13.011,37.938z M14.568,40.882l2.218-3.336   h13.771l2.219,3.336H14.568z M31.321,35.805v-7.872l2.729-0.355v10.048L31.321,35.805z" fill="'+data.iconColor+'"/></g></svg>';
+            icon += '<g><path d="M29.395,0H17.636c-3.117,0-5.643,3.467-5.643,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759   c3.116,0,5.644-2.527,5.644-5.644V6.584C35.037,3.467,32.511,0,29.395,0z M34.05,14.188v11.665l-2.729,0.351v-4.806L34.05,14.188z    M32.618,10.773c-1.016,3.9-2.219,8.51-2.219,8.51H16.631l-2.222-8.51C14.41,10.773,23.293,7.755,32.618,10.773z M15.741,21.713   v4.492l-2.73-0.349V14.502L15.741,21.713z M13.011,37.938V27.579l2.73,0.343v8.196L13.011,37.938z M14.568,40.882l2.218-3.336 h13.771l2.219,3.336H14.568z M31.321,35.805v-7.872l2.729-0.355v10.048L31.321,35.805z" fill="'+data.iconColor+'"/></g></svg>';
             var svgcar = "data:image/svg+xml;base64," + btoa(icon);
             myMarker = L.divIcon({
                 className:"caricon",
@@ -830,6 +834,23 @@ function setMarker(data) {
             });
             marker = L.marker(ll, {title: data.name, icon: myMarker});
         }
+        else if (data.icon === "satellite") {
+            data.iconColor = data.iconColor || "black";
+            icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">';
+            icon += '<polygon points="38.17 39.4 45.24 32.33 43.34 27.92 24.21 8.78 14.59 18.4 33.72 37.53" fill="'+data.iconColor+'"/>';
+            icon += '<path d="M69.22 44.57L54.38 29.73c-1.1-1.1-2.91-1.1-4.01 0L35.53 44.57c-1.1 1.1-1.1 2.91 0 4.01l14.84 14.84c1.1 1.1 2.91 1.1 4.01 0l14.84-14.84C70.32 47.47 70.32 45.67 69.22 44.57z" fill="'+data.iconColor+'"/>';
+            icon += '<polygon points="71.04 55.61 66.58 53.75 59.52 60.82 61.42 65.23 80.55 84.36 90.17 74.75" fill="'+data.iconColor+'"/>';
+            icon += '<path d="M28.08 55.26l-6.05 0.59C23.11 68.13 32.78 77.94 45 79.22l0.59-6.05C36.26 72.15 28.89 64.66 28.08 55.26z" fill="'+data.iconColor+'"/>';
+            icon += '<path d="M15.88 56.54L9.83 57.13c1.67 18.06 16.03 32.43 34.08 34.09l0.59-6.04C29.34 83.76 17.29 71.71 15.88 56.54z" fill="'+data.iconColor+'"/>';
+            icon += '</svg>';
+            var svglocate = "data:image/svg+xml;base64," + btoa(icon);
+            myMarker = L.divIcon({
+                className:"satelliteicon",
+                iconAnchor: [16, 16],
+                html:'<img src="'+svglocate+'" style="width:32px; height:32px;"/>',
+            });
+            marker = L.marker(ll, {title:data.name, icon:myMarker});
+        }
         else if (data.icon === "locate") {
             data.iconColor = data.iconColor || "cyan";
             icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="468px" height="468px" viewBox="0 0 468 468">';

worldmap/worldmap.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# date: May 2nd 2017 - v1.0.28
+# date: May 2nd 2017 - v1.0.29
 
 CACHE:
 index.html