Add mouse pointer co-ordinates option

README.md

@@ -277,6 +277,7 @@ Optional properties include
  - **panlock** - lock the map area to the current visible area. - `{"command":{"panlock":true}}`
  - **zoomlock** - locks the zoom control to the current value and removes zoom control - `{"command":{"zoomlock":true}}`
  - **hiderightclick** - disables the right click that allows adding or deleting points on the map - `{"command":{"hiderightclick":true}}`
+ - **coords** - turns on and off a display of the current mouse co-ordinates. Values can be "deg", "dms", or "none" (default). - `{"command":{"coords":"deg"}}`
  - **button** - if supplied with a `name` and `icon` property - adds a button to provide user input - sends
  a msg `{"action":"button", "name":"the_button_name"}` to the worldmap in node. If supplied with a `name` property only, it will remove the button. Optional `position` property can be 'bottomright', 'bottomleft',
  'topleft' or 'topright' (default).

worldmap.html

@@ -85,6 +85,14 @@
         <option value="true">Disable</option>
     </select>
 </div>
+<div class="form-row">
+    <label for="node-input-coords"><i class="fa fa-compass"></i> Co-ordinates</label>
+    <select id="node-input-coords" style="width:95px;">
+        <option value="none">Not shown</option>
+        <option value="deg">Degrees</option>
+        <option value="dms">D.M.S</option>
+    </select>
+</div>
 <div class="form-row">
     <label for="node-input-path"><i class="fa fa-globe"></i> Web Path</label>
     <input type="text" id="node-input-path" placeholder="worldmap">
@@ -161,6 +169,7 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
             panlock: {value:"false"},
             zoomlock: {value:"false"},
             hiderightclick: {value:"false"},
+            coords: {value: "false"},
             path: {value:"/worldmap"}
         },
         inputs:1,
@@ -185,6 +194,10 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
                 $("#node-input-hiderightclick").val("false");
                 this.hiderightclick = "false";
             }
+            if ($("#node-input-coords").val() === null) {
+                $("#node-input-coords").val("none");
+                this.coords = "none";
+            }
             $("#node-input-zoom").spinner({min:0, max:18});
             $("#node-input-cluster").spinner({min:0, max:19});
         }

worldmap.js

@@ -39,6 +39,7 @@ module.exports = function(RED) {
         this.zoomlock = n.zoomlock || "false";
         this.panit = n.panit || "false";
         this.hiderightclick = n.hiderightclick || "false";
+        this.coords = n.coords || "none";
         this.path = n.path || "/worldmap";
         if (this.path.charAt(0) != "/") { this.path = "/" + this.path; }
         if (!sockets[this.path]) {
@@ -72,6 +73,7 @@ module.exports = function(RED) {
                     c.zoomlock = node.zoomlock;
                     c.showlayers = node.layers;
                     c.hiderightclick = node.hiderightclick;
+                    c.coords = node.coords;
                     client.write(JSON.stringify({command:c}));
                 }
             });

worldmap/css/map.css

@@ -60,7 +60,7 @@ a {
 
 #foot {
     position:absolute;
-    bottom:1px;
+    bottom:-1px;
     left:-1px;
     z-index:1;
     font-size:9px;

worldmap/index.html

@@ -33,6 +33,7 @@
     <link rel="stylesheet",type="text/css" href="leaflet/Leaflet.Dialog.css">
     <link rel="stylesheet",type="text/css" href="leaflet/leaflet-velocity.min.css">
     <link rel="stylesheet",type="text/css" href="leaflet/leaflet.label.css">
+    <link rel="stylesheet",type="text/css" href="leaflet/Leaflet.coordinates.css">
 
     <link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
 
@@ -61,6 +62,7 @@
     <script type="text/javascript" src="leaflet/OSMBuildings-Leaflet.js"></script>
     <script type="text/javascript" src="leaflet/leaflet-omnivore.min.js"></script>
     <script type="text/javascript" src="leaflet/leaflet.label.js"></script>
+    <script type="text/javascript" src="leaflet/Leaflet.coordinates.js"></script>
 
     <script type="text/javascript" src="leaflet/dialog-polyfill.js"></script>
     <script type="text/javascript" src="images/emoji.js"></script>
@@ -135,6 +137,7 @@ var initialposition = false;
 var inIframe = false;
 var showUserMenu = true;
 var showLayerMenu = true;
+var showMouseCoords = false;
 var sidebyside;
 var layercontrol;
 
@@ -884,6 +887,17 @@ layercontrol = L.control.layers(basemaps, overlays);
 if (!inIframe) { layercontrol.addTo(map); }
 else { showLayerMenu = false;}
 
+var coords = L.control.coordinates({
+	position:"bottomleft", //optional default "bootomright"
+	decimals:4, //optional default 4
+	decimalSeperator:".", //optional default "."
+	labelTemplateLat:"&nbsp;Lat: {y}", //optional default "Lat: {y}"
+	labelTemplateLng:"&nbsp;Lon: {x}", //optional default "Lng: {x}"
+	enableUserInput:false, //optional default true
+	useDMS:true, //optional default false
+	useLatLngOrder: true, //ordering of labels, default false-> lng-lat
+});
+
 // Add the dialog box for messages
 var dialogue = L.control.dialog().addTo(map);
 dialogue.freeze();
@@ -1513,6 +1527,23 @@ function doCommand(cmd) {
             }
         }
     }
+    if (cmd.hasOwnProperty("coords")) {
+        if (cmd.coords === "dms" && showMouseCoords === false) {
+            coords.options.useDMS = true;
+            showMouseCoords = true;
+            coords.addTo(map);
+        }
+        if (cmd.coords === "deg" && showMouseCoords === false) {
+            coords.options.useDMS = false;
+            showMouseCoords = true;
+            coords.addTo(map);
+        }
+        if (cmd.coords === "none" && showMouseCoords === true) {
+            showMouseCoords = false
+            coords.removeFrom(map);
+        }
+    }
+
     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/leaflet/Leaflet.Coordinates.css

@@ -0,0 +1 @@
+.leaflet-control-coordinates{background-color:#D8D8D8;background-color:rgba(255,255,255,.8);cursor:pointer}.leaflet-control-coordinates,.leaflet-control-coordinates .uiElement input{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.leaflet-control-coordinates .uiElement{margin:4px}.leaflet-control-coordinates .uiElement .labelFirst{margin-right:4px}.leaflet-control-coordinates .uiHidden{display:none}.leaflet-control-coordinates .uiElement.label{color:inherit;font-weight:inherit;font-size:inherit;padding:0;display:inherit}

worldmap/worldmap.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# date: Mar 2nd 2019 - v1.5.29b
+# date: Mar 2nd 2019 - v1.5.29c
 
 CACHE:
 index.html