Add .label option

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v1.5.21 - Add .label option to display permanent label. Clean up some excess debug logging
  - v1.5.20 - Let worldmap in node send message after out node has initialised
  - v1.5.19 - Fix map path label
  - v1.5.18 - Update Leaflet.vector-markers to 0.0.6 (https://github.com/hiasinho/Leaflet.vector-markers)

README.md

@@ -9,6 +9,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v1.5.21 - Add .label option to display permanent label. Clean up some excess debug logging
 - v1.5.20 - Let worldmap in node send message after out node has initialised
 - v1.5.19 - Fix map path label
 - v1.5.18 - Update Leaflet.vector-markers to 0.0.6 (https://github.com/hiasinho/Leaflet.vector-markers)
@@ -63,7 +64,7 @@ Optional properties include
  - **iconColor** : Standard CSS colour name or #rrggbb hex value.
  - **SIDC** : NATO symbology code (instead of icon). See below.
  - **building** : OSMbulding GeoJSON feature set to add 2.5D buildings to buildings layer. See below.
- - **ttl** : time to live, how long an individual marker stays on map in seconds (overrides general maxage setting)
+ - **ttl** : time to live, how long an individual marker stays on map in seconds (overrides general maxage setting, minimum 20 seconds)
  - **photoUrl** : adds an image pointed at by the url to the popup box.
  - **videoUrl** : adds an mp4 video pointed at by the url to the popup box. Ideally 320x240 in size.
  - **weblink** : adds a link to an external page for more information. Either set a url as a *string*, or an *object* like `{name:"BBC News", url:"http://news.bbc.co.uk", target:"_new"}`
@@ -71,6 +72,7 @@ Optional properties include
  - **intensity** : set to a value of 0.1 - 1.0 to set the intensity of the point on heatmap layer. (default 1.0)
  - **popped** : set to true to automatically open the popup info box, set to false to close it.
  - **popup** : html to fill the popup if you don't want the automatic default of the properties list.
+ - **label** : displays the contents of label next to the icon.
 
 Any other `msg.payload` properties will be added to the icon popup text box.
 

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "1.5.3",
+    "version": "1.5.20",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "1.5.20",
+    "version": "1.5.21",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "cgi": "0.3.1",

worldmap.html

@@ -109,8 +109,9 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
         <li><code>icon</code> : <a href="https://fontawesome.com/v4.7.0/icons/" target="_new">font awesome</a> icon name</li>
         <li><code>iconColor</code> : standard CSS color name or #rrggbb hex value.</li>
         <li><code>SIDC</code> : NATO symbology code (instead of icon).</li>
+        <li><code>label</code> : permanent label next to icon.</li>
         <li><code>bulding</code> : OSMBuildings GeoJSON object.</li>
-        <li><code>ttl</code> : time to live of an individual marker.</li>
+        <li><code>ttl</code> : time to live of an individual marker before deletion.</li>
         <li><code>photoUrl</code> : adds an image pointed at by the url to the popup box.</li>
         <li><code>videoUrl</code> : adds an mp4 (320x240) pointed at by the url to Popup box</li>
         <li><code>weblink</code> : link to an external web page.</li>

worldmap.js

@@ -20,6 +20,7 @@ module.exports = function(RED) {
     var express = require("express");
     var sockjs = require('sockjs');
     var sockets = {};
+    RED.log.info("Worldmap version " + require('./package.json').version );
     // add the cgi module for serving local maps....
     RED.httpNode.use("/cgi-bin/mapserv", require('cgi')(__dirname + '/mapserv'));
 
@@ -41,16 +42,16 @@ module.exports = function(RED) {
         if (this.path.charAt(0) != "/") { this.path = "/" + this.path; }
         if (!sockets[this.path]) {
             var fullPath = path.posix.join(RED.settings.httpNodeRoot, this.path, 'leaflet', 'sockjs.min.js');
-            sockets[this.path] = sockjs.createServer({sockjs_url:fullPath, log:function() {}});
+            sockets[this.path] = sockjs.createServer({sockjs_url:fullPath, log:function() { return; }});
             var sockPath = path.posix.join(RED.settings.httpNodeRoot,this.path,'socket');
-            this.log("Serving "+__dirname+" as "+this.path); // +" and socket "+sockPath);
             sockets[this.path].installHandlers(RED.server, {prefix:sockPath});
         }
+        //this.log("Serving "+__dirname+" as "+this.path);
+        this.log("started at "+this.path);
         var node = this;
         var clients = {};
         RED.httpNode.use(node.path, express.static(__dirname + '/worldmap'));
 
-
         var callback = function(client) {
             //client.setMaxListeners(0);
             clients[client.id] = client;
@@ -118,7 +119,8 @@ module.exports = function(RED) {
         if (this.path.charAt(0) != "/") { this.path = "/" + this.path; }
         if (!sockets[this.path]) {
             var fullPath = path.posix.join(RED.settings.httpNodeRoot, this.path, 'leaflet', 'sockjs.min.js');
-            sockets[this.path] = sockjs.createServer({sockjs_url:fullPath, prefix:path.posix.join(RED.settings.httpNodeRoot,this.path,'socket')});
+            // sockets[this.path] = sockjs.createServer({sockjs_url:fullPath, log:function() { return; }});
+            sockets[this.path] = sockjs.createServer({sockjs_url:fullPath, log:function(){return}, prefix:path.posix.join(RED.settings.httpNodeRoot,this.path,'socket'), });
             sockets[this.path].installHandlers(RED.server);
         }
         var node = this;

worldmap/index.html

@@ -32,6 +32,7 @@
     <link rel="stylesheet",type="text/css" href="leaflet/leaflet.fullscreen.css">
     <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="shortcut icon" type="image/ico" href="favicon.ico"/>
 
@@ -60,6 +61,7 @@
     <script type="text/javascript" src="leaflet/tile.stamen.js"></script>
     <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/dialog-polyfill.js"></script>
     <link rel="stylesheet" type="text/css" href="leaflet/dialog-polyfill.css"/>
@@ -171,7 +173,7 @@ var connect = function() {
     };
     ws.onmessage = function(e) {
         var data = JSON.parse(e.data);
-        console.log("DATA",typeof data,data);
+        //console.log("DATA",typeof data,data);
         if (Array.isArray(data)) {
             //console.log("ARRAY");
             for (var prop in data) {
@@ -383,7 +385,7 @@ function setCluster(v) {
 // Search for markers with names of ....
 function doSearch() {
     var value = document.getElementById('search').value;
-    console.log("Search for :",value);
+    console.log("search for :",value);
     marks = [];
     marksIndex = 0;
     for (var key in markers) {
@@ -1278,6 +1280,11 @@ function setMarker(data) {
             words = data.popup || words;
             marker.bindPopup(words + marker.getLatLng().toString().replace('LatLng(','lat, lon : ').replace(')',''), {keepInView:true, minWidth:250});
             marker._popup.dname = data.name;
+            // If .label then use that rather than name tooltip
+            if (data.label && data.label.length > 0) {
+                marker.bindLabel(data.label, { noHide:true, offset:[20,-8] });
+                delete marker.options.title;
+            }
             marker.lay = lay;                       // and the layer it is on
             var rightmenuMarker = L.popup().setContent("<b>"+data.name+"</b><br/><button id='delbutton' onclick='delMarker(\""+data.name+"\",true);'>Delete</button>");
             marker.on('contextmenu', function(e) {
@@ -1644,7 +1651,7 @@ function doCommand(cmd) {
         sidebyside.addTo(map);
         sidebyside.lay = cmd.side;
     }
-    if (cmd.split && sidebyside && (cmd.split <= 100) && (cmd.split >= 0)) { console.log("DING",cmd.split); sidebyside.setSplit(cmd.split); }
+    if (cmd.split && sidebyside && (cmd.split <= 100) && (cmd.split >= 0)) { sidebyside.setSplit(cmd.split); }
     // Turn on an existing overlay(s)
     if (cmd.hasOwnProperty("showlayer")) {
         if (typeof cmd.showlayer === "string") { cmd.showlayer = [ cmd.showlayer ]; }

worldmap/leaflet/leaflet.label.css

@@ -0,0 +1,53 @@
+.leaflet-label {
+	background: rgba(235, 235, 235, 0.9);
+	background-clip: padding-box;
+	border-color: #888;
+	border-color: rgba(0,0,0,0.25);
+	border-radius: 3px;
+	border-style: solid;
+	border-width: 1px;
+	color: #111;
+	display: block;
+	font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	font-weight: 500;
+	padding: 1px 6px;
+	position: absolute;
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	    -ms-user-select: none;
+	        user-select: none;
+	pointer-events: none;
+	white-space: nowrap;
+	z-index: 6;
+}
+
+.leaflet-label.leaflet-clickable {
+	cursor: pointer;
+	pointer-events: auto;
+}
+
+.leaflet-label:before,
+.leaflet-label:after {
+	border-top: 6px solid transparent;
+	border-bottom: 6px solid transparent;
+	content: none;
+	position: absolute;
+	top: 5px;
+}
+
+.leaflet-label:before {
+	border-right: 6px solid black;
+	border-right-color: inherit;
+	left: -10px;
+}
+
+.leaflet-label:after {
+	border-left: 6px solid black;
+	border-left-color: inherit;
+	right: -10px;
+}
+
+.leaflet-label-right:before,
+.leaflet-label-left:after {
+	content: "";
+}

worldmap/worldmap.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# date: Feb 6th 2019 - v1.5.20
+# date: Feb 7th 2019 - v1.5.21
 
 CACHE:
 index.html