update mavrkercluster, and add to options

examples/Earthquake.json

@@ -1 +1 @@
-[{"id":"5dc0977b.699a88","type":"function","z":"896b28a8.437658","name":"remap property names","func":"msg.payload.lat = msg.payload.latitude;\nmsg.payload.lon = msg.payload.longitude;\nmsg.payload.layer = msg.payload.type;\nmsg.payload.icon = msg.payload.type;\nmsg.payload.name = msg.payload.id;\n\ndelete msg.payload.latitude;\ndelete msg.payload.longitude;\ndelete msg.payload.type;\nreturn msg;","outputs":1,"noerr":0,"x":460,"y":700,"wires":[["847c1290.11a68","a733a03e.317f2"]]},{"id":"847c1290.11a68","type":"debug","z":"896b28a8.437658","name":"","active":true,"console":"false","complete":"payload","x":690,"y":640,"wires":[]},{"id":"827adf5c.4cff8","type":"csv","z":"896b28a8.437658","name":"","sep":",","hdrin":true,"hdrout":"","multi":"one","ret":"\\n","temp":"","x":450,"y":620,"wires":[["5dc0977b.699a88"]]},{"id":"3dcc8183.4e218e","type":"http request","z":"896b28a8.437658","name":"","method":"GET","url":"http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.csv","x":290,"y":620,"wires":[["827adf5c.4cff8"]]},{"id":"5b57c4b6.56a8fc","type":"inject","z":"896b28a8.437658","name":"quakes","topic":"","payload":"","payloadType":"str","repeat":"900","crontab":"","once":true,"x":130,"y":620,"wires":[["3dcc8183.4e218e"]]},{"id":"e41b836e.f0c66","type":"comment","z":"896b28a8.437658","name":"Earthquake !!!","info":"Press the button on the `inject` node to get the list of earthquakes from the USGS public API.\n\nThis returns a CSV - which we then parse using the `CSV` node into individual objects.\n\nThese are then passed through a `function` to remap the property names into ones \nsuitable for the map node, and passed to the `web-socket` out node.\n\nThe map will be served at http://localhost:1880/worldmap .\nYou will need to zoom out :-)","x":130,"y":560,"wires":[]},{"id":"a733a03e.317f2","type":"worldmap","z":"896b28a8.437658","name":"","x":690,"y":700,"wires":[]},{"id":"854a8d7f.2cbdf","type":"inject","z":"896b28a8.437658","name":"zoom out map","topic":"","payload":"{\"command\":{\"layer\":\"OSM\",\"lat\":20,\"lon\":0,\"zoom\":2}}","payloadType":"json","repeat":"","crontab":"","once":true,"x":460,"y":760,"wires":[["a733a03e.317f2"]]}]
+[{"id":"44fb9955.b8db38","type":"function","z":"ff08c5aa.63eb38","name":"remap property names","func":"msg.payload.lat = msg.payload.latitude;\nmsg.payload.lon = msg.payload.longitude;\nmsg.payload.layer = msg.payload.type;\nmsg.payload.icon = msg.payload.type;\nmsg.payload.name = msg.payload.id;\n\ndelete msg.payload.latitude;\ndelete msg.payload.longitude;\ndelete msg.payload.type;\nreturn msg;","outputs":1,"noerr":0,"x":460,"y":780,"wires":[["e02ba15d.2be32","7f4939b8.4cf668"]]},{"id":"e02ba15d.2be32","type":"debug","z":"ff08c5aa.63eb38","name":"","active":true,"console":"false","complete":"payload","x":690,"y":720,"wires":[]},{"id":"1ed29706.066b09","type":"csv","z":"ff08c5aa.63eb38","name":"","sep":",","hdrin":true,"hdrout":"","multi":"one","ret":"\\n","temp":"","x":450,"y":700,"wires":[["44fb9955.b8db38"]]},{"id":"b5c3e32a.597f4","type":"http request","z":"ff08c5aa.63eb38","name":"","method":"GET","url":"http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.csv","x":290,"y":700,"wires":[["1ed29706.066b09"]]},{"id":"4dc38fda.9d0a4","type":"inject","z":"ff08c5aa.63eb38","name":"quakes","topic":"","payload":"","payloadType":"str","repeat":"600","crontab":"","once":true,"x":130,"y":700,"wires":[["b5c3e32a.597f4"]]},{"id":"6cbdaa62.aeb6c4","type":"comment","z":"ff08c5aa.63eb38","name":"Earthquake !!!","info":"Press the button on the `inject` node to get the list of earthquakes from the USGS public API.\n\nThis returns a CSV - which we then parse using the `CSV` node into individual objects.\n\nThese are then passed through a `function` to remap the property names into ones \nsuitable for the map node, and passed to the `web-socket` out node.\n\nThe map will be served at http://localhost:1880/worldmap .\nYou will need to zoom out :-)","x":130,"y":640,"wires":[]},{"id":"7f4939b8.4cf668","type":"worldmap","z":"ff08c5aa.63eb38","lat":"20","lon":"0","zoom":"2","name":"","x":690,"y":780,"wires":[]}]

package.json

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

worldmap.html

@@ -41,6 +41,14 @@
         <option value="UK OS Opendata">UK OS Opendata</option>
     </select>
 </div>
+<div class="form-row">
+    <label for="node-input-cluster"><i class="fa fa-gears"></i> Cluster at</label>
+    zoom levels less than <input type="text" id="node-input-cluster" placeholder="10 (0-19)" style="width:60px;">
+</div>
+<div class="form-row">
+    <label for="node-input-maxage"><i class="fa fa-timer"></i> Max age</label>
+    Remove markers after <input type="text" id="node-input-maxage" style="width:60px;"> seconds
+</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">
@@ -79,6 +87,8 @@
             lon: {value:""},
             zoom: {value:""},
             layer: {value:""},
+            cluster: {value:""},
+            maxage: {value:""},
             name: {value:""}
         },
         inputs:1,
@@ -93,6 +103,10 @@
         },
         info: function() {
             return 'The map can be found [here]('+RED.settings.httpNodeRoot.slice(0,-1)+'/worldmap).';
+        },
+        oneditprepare: function() {
+            $( "#node-input-zoom" ).spinner({min:0, max:18});
+            $( "#node-input-cluster" ).spinner({min:0, max:19});
         }
     });
 </script>

worldmap.js

@@ -25,6 +25,8 @@ module.exports = function(RED) {
         this.lon = n.lon || "";
         this.zoom = n.zoom || "";
         this.layer = n.layer || "";
+        this.cluster = n.cluster || "";
+        this.maxage = n.maxage || "";
         var node = this;
         //node.log("Serving map from "+__dirname+" as "+RED.settings.httpNodeRoot.slice(0,-1)+"/worldmap");
         RED.httpNode.use("/worldmap", express.static(__dirname + '/worldmap'));
@@ -40,6 +42,8 @@ module.exports = function(RED) {
                     if (node.lon && node.lon.length > 0) { c.lon = node.lon; }
                     if (node.zoom && node.zoom.length > 0) { c.zoom = node.zoom; }
                     if (node.layer && node.layer.length > 0) { c.layer = node.layer; }
+                    if (node.cluster && node.cluster.length > 0) { c.cluster = node.cluster; }
+                    if (node.maxage && node.maxage.length > 0) { c.maxage = node.maxage; }
                     socket.emit("worldmapdata",{command:c});
                 }
             });

worldmap/index.html

@@ -68,7 +68,7 @@
 <div id="menu"><table>
     <tr><td><input type='text' name='search' id='search' size='20' style="width:150px;"/>&nbsp;<span onclick='doSearch();'><i class="fa fa-search fa-lg"></i></span></td></tr>
     <tr><td style="cursor:default"><i class="fa fa-spinner fa-lg fa-fw"></i> Set Max Age <input type='text' name='maxage' id='maxage' value="600" size="5" onchange='setMaxAge();'/>s</td></tr>
-    <tr><td style="cursor:default"><i class="fa fa-search-plus fa-lg fa-fw"></i> Cluster at zoom <<input type='text' name='setclus' id='setclus' value="12" size="2" onchange='setCluster();'/></td></tr>
+    <tr><td style="cursor:default"><i class="fa fa-search-plus fa-lg fa-fw"></i> Cluster at zoom <<input type='text' name='setclus' id='setclus' value="10" size="2" onchange='setCluster();'/></td></tr>
     <tr><td style="cursor:default"><input type='checkbox' name='panit' onclick='doPanit();'/> Auto Pan Map</td></tr>
     <tr><td style="cursor:default"><input type='checkbox' name='lockit' onclick='doLock();'/> Lock Map</td></tr>
     <tr><td style="cursor:default"><input type='checkbox' name='heatall' onclick='doHeatAll();'/> Heatmap all layers</td></tr>
@@ -142,8 +142,7 @@ ws.on('error', function() {
 
 ws.on('worldmapdata', function(data) {
     if (data.command) { doCommand(data.command); delete data.command; }
-    if (data.hasOwnProperty("name") && data.hasOwnProperty("lat") && data.hasOwnProperty("lon")) { setMarker(data); }
+    if (data.hasOwnProperty("name")) { setMarker(data); }
-    else if (data.hasOwnProperty("name") && (data.hasOwnProperty("area") || data.hasOwnProperty("line"))) { setMarker(data); }
     else { console.log("SKIP",data); }
 });
 
@@ -199,7 +198,7 @@ L.control.fullscreen().addTo(map);
 
 // Add the locate my position button
 L.easyButton( 'fa-crosshairs fa-lg', function() {
-    map.locate({setView:true, maxZoom:15});
+    map.locate({setView:true, maxZoom:16});
 }, "Locate me").addTo(map);
 
 // Add the measure/ruler button
@@ -246,7 +245,7 @@ function doLock() {
         window.localStorage.setItem("lastpos",JSON.stringify(map.getCenter()));
         window.localStorage.setItem("lastzoom", map.getZoom());
         window.localStorage.setItem("lastlayer", baselayername);
-        window.localStorage.setItem("clusterat", clusterAt);
+        //window.localStorage.setItem("clusterat", clusterAt);
         window.localStorage.setItem("maxage", maxage);
         console.log("Saved :",JSON.stringify(map.getCenter()),map.getZoom(),baselayername);
     }
@@ -294,7 +293,7 @@ function setMaxAge() {
 setMaxAge();
 
 function setCluster() {
-    clusterAt = document.getElementById('setclus').value;
+    clusterAt = parseInt(document.getElementById('setclus').value);
     console.log("clusterAt set :",clusterAt);
 }
 setCluster();
@@ -441,7 +440,7 @@ var addThing = function() {
 }
 
 // allow double right click to zoom out
-// single right click opens a message window that send to the websocket.
+// single right click opens a message window that sends to the socket.
 var rclicked = false;
 var rtout = null;
 map.on('contextmenu', function(e) {
@@ -467,12 +466,21 @@ map.on('contextmenu', function(e) {
 function onLocationFound(e) {
     var radius = e.accuracy;
     //L.marker(e.latlng).addTo(map).bindPopup("You are within " + radius + " meters from this point").openPopup();
-    L.circle(e.latlng, radius, {color:"cyan", weight:3, opacity:0.8, fill:false, clickable:false}).addTo(map);
+    L.circle(e.latlng, radius, {color:"cyan", weight:4, opacity:0.8, fill:false, clickable:false}).addTo(map);
+    if (e.hasOwnProperty("heading")) {
+        var lengthAsDegrees = e.speed * 60 / 110540;
+        var ya = e.latlng.lat + Math.sin((90-e.heading)/180*Math.PI)*lengthAsDegrees*Math.cos(e.latlng.lng/180*Math.PI);
+        var xa = e.latlng.lng + Math.cos((90-e.heading)/180*Math.PI)*lengthAsDegrees;
+        var lla = new L.LatLng(ya,xa);
+        L.polygon([ e.latlng, lla ], {color:"cyan", weight:3, opacity:0.8, clickable:false}).addTo(map);
+    }
+    ws.emit("worldmap",{action:"point", lat:e.latlng.lat.toFixed(5), lon:e.latlng.lng.toFixed(5), point:"self", bearing:e.heading, speed:(e.speed*3.6 || undefined)});
 }
 function onLocationError(e) { console.log(e.message); }
 map.on('locationfound', onLocationFound);
 map.on('locationerror', onLocationError);
 
+
 // Add all the base layer maps
 
 // Use this for OSM online maps
@@ -672,7 +680,7 @@ function setMarker(data) {
     var lay = data.layer || "not known";
     if (typeof layers[lay] == "undefined") {  // add layer if if doesn't exist
         //layers[lay] = new L.LayerGroup().addTo(map);
-        layers[lay] = new L.MarkerClusterGroup({maxClusterRadius:50, disableClusteringAtZoom:clusterAt}).addTo(map);
+        layers[lay] = new L.MarkerClusterGroup({maxClusterRadius:50, spiderfyDistanceMultiplier:1.8, disableClusteringAtZoom:clusterAt}).addTo(map);
         overlays[lay] = layers[lay];
         layercontrol.addOverlay(layers[lay],lay);
     }
@@ -709,8 +717,9 @@ function setMarker(data) {
     else {
         //console.log("handling",data.name);
         if (typeof data.coordinates == "object") { ll = new L.LatLng(data.coordinates[1],data.coordinates[0]); }
-        else { ll = new L.LatLng((data.lat*1), (data.lon*1)); }
+        else if (data.hasOwnProperty("lat") && data.hasOwnProperty("lon")) { ll = new L.LatLng((data.lat*1), (data.lon*1)); }
-
+        else if (data.hasOwnProperty("latitude") && data.hasOwnProperty("longitude")) { ll = new L.LatLng((data.latitude*1), (data.longitude*1)); }
+        else { console.log("No location:",data); return; }
         var words="<b>"+data.name+"</b><br/>";
 
         // Create the icons... handle ship, earthquake as specials
@@ -837,9 +846,9 @@ function setMarker(data) {
             if (data.speed != null) { data.length = data.speed * 50; }  // and a speed
             if (data.length != null) {
                 if (polygons[data.name] != null) { map.removeLayer(polygons[data.name]); }
-                var x = data.lon * 1; // X coordinate
+                var x = ll.lng; // X coordinate
-                var y = data.lat * 1; // Y coordinate
+                var y = ll.lat * 1; // Y coordinate
-                var ll1 = new L.LatLng(y,x);
+                var ll1 = ll;
                 var angle = data.bearing * 1;
                 var lengthAsDegrees = data.length / 110540; // metres in a degree..ish
                 var polygon = null;
@@ -916,6 +925,14 @@ function doCommand(cmd) {
     if (cmd.hasOwnProperty("lat")) { clat = cmd.lat; }
     if (cmd.hasOwnProperty("lon")) { clon = cmd.lon; }
     if (cmd.hasOwnProperty("zoom")) { czoom = cmd.zoom; }
+    if (cmd.hasOwnProperty("cluster")) {
+        document.getElementById("setclus").value = cmd.cluster;
+        setCluster();
+    }
+    if (cmd.hasOwnProperty("maxage")) {
+        document.getElementById("maxage").value = cmd.maxage;
+        setMaxAge();
+    }
     map.setView([clat,clon],czoom);
 }
 </script>

worldmap/worldmap.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# date: Jun 12th v1.0.12
+# date: Jun 14th v1.0.13
 
 CACHE:
 index.html