Add legend command

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v2.1.6 - Add legend command to allow inserting an html legend
  - v2.1.5 - Fix squawk icon color handling
  - v2.1.4 - Fix alt and speed as strings
  - v2.1.3 - Fix web page file path error

README.md

@@ -10,6 +10,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v2.1.6 - Add legend command to allow inserting an html legend
 - v2.1.5 - Fix squawk icon color handling
 - v2.1.4 - Fix alt and speed as strings
 - v2.1.3 - Fix web page file path error
@@ -353,6 +354,12 @@ Or a contextmenu with a button
 
     contextmenu: '<button name="Clicker" onclick=\'feedback(this.name)\'>Click me</button>'
 
+#### To add and remove a legend
+
+If you want to add a small legend overlay
+
+    msg.payload.command = { "legend": "<b>Title</b></br><i style=\"background: #477AC2\"></i> Water<br><i style=\"background: #448D40\"></i> Forest<br>" };
+
 
 #### To draw a heavily customised Circle on a layer
 

package.json

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

worldmap/css/worldmap.css

@@ -207,3 +207,23 @@ a {
 .wm-green { color: #ADD5A6; }
 .wm-yellow { color: #F5EF91; }
 .wm-black { color: #444444; }
+
+.legend {
+    padding: 6px 8px;
+    background: rgba(255, 255, 255, 0.8);
+    line-height: 24px;
+    color: #555;
+}
+
+.legend i {
+    width: 18px;
+    height: 18px;
+    float: left;
+    margin: 0 8px 0 0;
+    opacity: 0.7;
+}
+
+.legend i.icon {
+    background-size: 18px;
+    background-color: rgba(255, 255, 255, 1);
+}

worldmap/worldmap.js

@@ -833,6 +833,9 @@ var coords = L.control.coordinates({
     useLatLngOrder: true, //ordering of labels, default false-> lng-lat
 });
 
+// Add an optional legend
+var legend = L.control({ position: "bottomleft" });
+
 // Add the dialog box for messages
 var dialogue = L.control.dialog({initOpen:false, size:[600,400], anchor:[50,150]}).addTo(map);
 dialogue.freeze();
@@ -1611,6 +1614,18 @@ function doCommand(cmd) {
             coords.addTo(map);
         }
     }
+    if (cmd.hasOwnProperty("legend")) {
+        try { map.removeControl(legend); }
+        catch(e) {}
+        if (typeof cmd.legend === "string" && cmd.legend.length > 0) { 
+            legend.onAdd = function() {
+                var div = L.DomUtil.create("div", "legend");
+                div.innerHTML = cmd.legend;
+                return div;
+            };
+            legend.addTo(map);
+        }
+    }
 
     var existsalready = false;
     // Add a new base map layer