From 9a00cec20e5d8f2d33af42905213664ab1ee593b Mon Sep 17 00:00:00 2001 From: Dave Conway-Jones Date: Thu, 21 Feb 2019 12:22:51 +0000 Subject: [PATCH] Add user definable buttons to close #67 --- CHANGELOG.md | 1 + README.md | 20 +++++++++++++++++++- worldmap/index.html | 18 +++++++++++++++++- worldmap/worldmap.appcache | 2 +- 4 files changed, 38 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6abc921..fa288d7 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index d48e77b..7fe0212 100644 --- a/README.md +++ b/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 = { diff --git a/worldmap/index.html b/worldmap/index.html index 4ec7969..aba7005 100644 --- a/worldmap/index.html +++ b/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 = ""+data.name+"
" + words; + words = ""+data.name+"
" + 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")) { diff --git a/worldmap/worldmap.appcache b/worldmap/worldmap.appcache index ce067d6..8b2552d 100644 --- a/worldmap/worldmap.appcache +++ b/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