Add initial position ability to Worldmap

README.md

@@ -5,6 +5,7 @@ A <a href="http://nodered.org" target="_new">Node-RED</a> node to provide world
 map web page for plotting "things" on.
 
 ### Changes
+ - v1.0.12 - Added ability to set initial start position, zoom level and base map layer.
  - v1.0.x - now uses socket.io to connect to backend - means this node now has an input connection
  (like "proper" nodes should :-), and you no longer need a websocket node in parallel.
  Obviously this is a breaking change hence the major version number bump. Also thus adds a `worldmap in`

package.json

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

worldmap.html

@@ -16,10 +16,35 @@
 -->
 
 <script type="text/x-red" data-template-name="worldmap">
-    <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>
+<div class="form-row">
+    <table border="0" width="96%">
+    <tr><td width="100px"><i class="fa fa-globe"></i> Start<td>Latitude</td><td>Longitude</td><td width="60px">Zoom</td></tr>
+    <tr><td>&nbsp;</td>
+    <td><input type="text" id="node-input-lat" style="width:90px;"></td>
+    <td><input type="text" id="node-input-lon" style="width:90px;"></td>
+    <td><input type="text" id="node-input-zoom" style="width:60px;" placeholder="1 - 18"></td>
+    </tr>
+    </table>
+</div>
+<div class="form-row">
+    <label for="node-input-layer"><i class="fa fa-map"></i> Base map</label>
+    <select id="node-input-layer">
+        <option value="OSM grey">OpenStreetMap Greyscale</option>
+        <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 Ocean">ESRI Ocean</option>
+        <option value="Mapsurfer">Mapsurfer</option>
+        <option value="MapQuest OSM">MapQuest OSM</option>
+        <option value="Nat Geo">National Geographic</option>
+        <option value="UK OS Opendata">UK OS Opendata</option>
+    </select>
+</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">
@@ -50,6 +75,10 @@
         category: 'location',
         color:"darksalmon",
         defaults: {
+            lat: {value:""},
+            lon: {value:""},
+            zoom: {value:""},
+            layer: {value:""},
             name: {value:""}
         },
         inputs:1,

worldmap.js

@@ -21,6 +21,10 @@ module.exports = function(RED) {
 
     var WorldMap = function(n) {
         RED.nodes.createNode(this,n);
+        this.lat = n.lat || "";
+        this.lon = n.lon || "";
+        this.zoom = n.zoom || "";
+        this.layer = n.layer || "";
         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'));
@@ -29,6 +33,16 @@ module.exports = function(RED) {
             node.on('input', function(msg) {
                 socket.emit("worldmapdata",msg.payload);
             });
+            socket.on('worldmap', function(data) {
+                if (data.action === "connected") {
+                    var c = {init:true};
+                    if (node.lat && node.lat.length > 0) { c.lat = node.lat; }
+                    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; }
+                    socket.emit("worldmapdata",{command:c});
+                }
+            });
             socket.on('disconnect', function() {
                 node.status({fill:"green",shape:"ring",text:"connected "+Object.keys(io.sockets.connected).length});
             });

worldmap/index.html

@@ -117,6 +117,7 @@ var clusterAt = 1;
 var maxage = 600;   // default max age of icons on map in seconds - cleared after 10 mins
 var baselayername = "OSM grey";     // Default base layer OSM but uniform grey
 var ibmfoot = " © IBM 2015,2016"
+var initialposition = false;
 
 // Create the socket
 var ws = io();
@@ -147,6 +148,7 @@ ws.on('worldmapdata', function(data) {
 });
 
 if ( window.localStorage.hasOwnProperty("lastpos") ) {
+    initialposition = true;
     var sp = JSON.parse(window.localStorage.getItem("lastpos"));
     startpos = [ sp.lat, sp.lng ];
 }
@@ -873,6 +875,11 @@ function setMarker(data) {
 }
 
 function doCommand(cmd) {
+    //console.log("COMMAND",cmd);
+    // ignore server side initial command if client position already saved.
+    if (cmd.hasOwnProperty("init") && initialposition) {
+        return;
+    }
     var existsalready = false;
     // Add a new base map layer
     if (cmd.map && cmd.map.hasOwnProperty("name") && cmd.map.hasOwnProperty("url") && cmd.map.hasOwnProperty("opt")) {

worldmap/worldmap.appcache

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