Add user definable buttons

to close #67

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v1.5.25 - Add button command to allow user to add and remove buttons
  - v1.5.24 - ensure hiderightclick does do that, and popup always has close button. Issue #69, #70
  - v1.5.23 - Let icon support use of emoji specified as :emoji name:  
  - v1.5.22 - Slight adjust to label positions for default map marker icon. Add .lineColor for bearing lines

README.md

@@ -9,7 +9,8 @@ map web page for plotting "things" on.
 
 ### Updates
 
-- v1.5.24 - ensure hiderightclick does do that, and popup always has close button. Issue #69, #70
+- v1.5.25 - Add button command to allow user to add and remove buttons
+- v1.5.24 - Ensure hiderightclick does do that, and popup always has close button. Issue #69, #70
 - v1.5.23 - Let icon support use of emoji specified as :emoji name:  
 - v1.5.22 - Slight adjust to label positions for default map marker icon. Add .lineColor for bearing lines
 - v1.5.21 - Add .label option to display permanent label. Clean up some excess debug logging
@@ -253,6 +254,8 @@ The **worldmap in** node can be used to receive various events from the map. Exa
     { "action": "addlayer", "name": "myLayer" }   // when a new map layer is added
     { "action": "dellayer", "name": "myLayer" }   // when a new map layer is deleted
 
+    { "action": "button", "name": "My Fancy Button" } // when a user defined button is clicked
+
 All actions also include a `msg._sessionid` property that indicates which client session they came from. Any msg sent out that include this will ONLY to that session - so you can target map updates to certain sessions only if required.
 
 ## Controlling the map
@@ -281,11 +284,26 @@ 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 points to the map - `{"command":{"hiderightclick":true}}`
+ - **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).
 
 #### To switch layer, move map and zoom
 
     msg.payload.command = { layer:"Esri Satellite", lat:51, lon:3, zoom:10 };
 
+#### To add and remove a user button to the map
+
+to add a button bottom right
+
+    msg.payload.command = { button: { name:"My Fancy Button", icon: "fa-star", position:"bottomright" } };
+
+When clicked the button will send an event to the `worldmap in` node containing `{"action":"button", "name","My Fancy Button"}` - this can then be used to trigger other map commands or flows.
+
+to remove
+
+    msg.payload.command = { button: { name:"My Fancy Button" } };
+
 #### To draw a heavily customized Circle on a layer
 
     msg.payload.command =  {

worldmap/index.html

@@ -124,6 +124,7 @@ var layers = {};
 var overlays = {};
 var basemaps = {};
 var marks = [];
+var buttons = {};
 var marksIndex = 0;
 var popid = "";
 var menuOpen = false;
@@ -1308,7 +1309,7 @@ function setMarker(data) {
             }
 
             words = data.popup || words;
-            words = "<b>"+data.name+"</b><button style=\"float:right;\" onclick='popped=false;popmark.closePopup();'><b>x</b></button><br/>" + words;
+            words = "<b>"+data.name+"</b><button style=\"border-radius:4px; float:right; background-color:lightgrey;\" onclick='popped=false;popmark.closePopup();'>X</button><br/>" + words;
             words = words + marker.getLatLng().toString().replace('LatLng(','lat, lon : ').replace(')','');
             marker.bindPopup(words, {closeButton:false, closeOnClick:false, keepInView:true, minWidth:250});
             marker._popup.dname = data.name;
@@ -1444,6 +1445,21 @@ function doCommand(cmd) {
             layercontrol = L.control.layers(basemaps, overlays).addTo(map);
         }
     }
+    if (cmd.hasOwnProperty("button")) {
+        if (cmd.button.icon) {
+            if (!buttons[cmd.button.name]) {
+                buttons[cmd.button.name] = L.easyButton( cmd.button.icon, function() {
+                    ws.send(JSON.stringify({action:"button",name:cmd.button.name}));
+                }, cmd.button.name, { position:cmd.button.position||'topright' }).addTo(map);
+            }
+        }
+        else {
+            if (buttons[cmd.button.name]) {
+                buttons[cmd.button.name].removeFrom(map);
+                delete buttons[cmd.button.name];
+            }
+        }
+    }
     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: Feb 20th 2019 - v1.5.24
+# date: Feb 20th 2019 - v1.5.24e
 
 CACHE:
 index.html