From 2de1b0bec514b7fab1155f7233af1aeeb46b14d0 Mon Sep 17 00:00:00 2001 From: Dave Conway-Jones Date: Sun, 10 Mar 2019 14:23:53 +0000 Subject: [PATCH] Add msg.tooltip, and update readme --- README.md | 7 ++++++- worldmap.html | 6 ++++-- worldmap/index.html | 10 +++++++++- worldmap/worldmap.appcache | 2 +- 4 files changed, 20 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index adfd553..b55fe85 100644 --- a/README.md +++ b/README.md @@ -64,7 +64,8 @@ Optional properties include - **intensity** : set to a value of 0.1 - 1.0 to set the intensity of the point on the 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. + - **label** : displays the contents as a permanent label next to the marker, or + - **tooltip** : displays the contents when you hover over the marker. (Mutually exclusive with label. Label has priority) Any other `msg.payload` properties will be added to the icon popup text box. This can be overridden by using the **popup** property to supply your own html content. @@ -244,6 +245,10 @@ The **worldmap in** node can be used to receive various events from the map. Exa { "action": "button", "name": "My Fancy Button" } // when a user defined button is clicked + { "action": "feedback", "name": "some name", "value": "some value" } // when a user calls the feedback function - see below + +There is a function available to make sending date to Node-RED easier (e.g. from inside a user defined popup), called feedback() - it takes two parameters, name and value, and can be used inside something like an input tag - `onchange='feedback(this.name,this.value)'`. Value can be a more complex object if required as long as it is serialisable. + 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 diff --git a/worldmap.html b/worldmap.html index 33b765e..b41bbef 100644 --- a/worldmap.html +++ b/worldmap.html @@ -114,7 +114,8 @@ then by default ⌘⇧m - ctrl-shift-m will load the m
  • icon : font awesome icon name or :emoji name:, or url of icon image.
  • iconColor : standard CSS color name or #rrggbb hex value.
  • SIDC : NATO symbology code (instead of icon).
    • -
  • label : permanent label next to icon.
    • +
  • label : permanent label next to marker, or
    • +
  • tooltip : hover over text for marker. (alternative to label)
  • bulding : OSMBuildings GeoJSON object.
  • ttl : time to live of an individual marker before deletion.
  • photoUrl : adds an image pointed at by the url to the popup box.
    • @@ -122,7 +123,7 @@ then by default ⌘⇧m - ctrl-shift-m will load the m
  • weblink : link to an external web page.
  • deleted : set to true to remove the named marker. (default false)
    • -

    Any other sub-properties of msg.payload will be added to the icon popup text box as extra information.

    +

    Any other sub-properties of msg.payload will be added to the marker popup text box as extra information.

    Icons of type plane, ship, car, uav or arrow will use built in SVG icons that align to the bearing value.

    Font Awesome (fa-icons 4.7) can also be used, as can @@ -214,6 +215,7 @@ then by default ⌘⇧m - ctrl-shift-m will load the m

  • layer - when a base layer is changed
  • addlayer - when an overlay is added to the map
  • dellayer - when an overlay is removed from the map
    • +
  • feedback - when a user calls the feedback() function in the browser
    • Use the debug node to see the complete payload of the msg returned.

    All actions also include a msg._sessionid property that indicates which client session the diff --git a/worldmap/index.html b/worldmap/index.html index 948989d..a26c617 100644 --- a/worldmap/index.html +++ b/worldmap/index.html @@ -1333,6 +1333,14 @@ function setMarker(data) { delete marker.options.title; delete data.label; } + // otherwise check for .tooltip then use that rather than name tooltip + else if (data.tooltip) { + if (typeof data.tooltip === "string" && data.tooltip.length > 0) { + marker.bindLabel(data.tooltip, { direction:"left", offset:[22,-16] }); + delete marker.options.title; + delete data.tooltip; + } + } // Add any remaining properties to the info box var llc = data.lineColor; @@ -1357,7 +1365,7 @@ function setMarker(data) { marker._popup.dname = data.name; marker.lay = lay; // and the layer it is on - var rightmenuMarker = L.popup().setContent(""+data.name+"
    "); + var rightmenuMarker = L.popup({offset:[0,-12]}).setContent(""+data.name+"
    "); marker.on('contextmenu', function(e) { if (hiderightclick !== true) { rightmenuMarker.setLatLng(e.latlng); diff --git a/worldmap/worldmap.appcache b/worldmap/worldmap.appcache index dc694ec..7a9645a 100644 --- a/worldmap/worldmap.appcache +++ b/worldmap/worldmap.appcache @@ -1,5 +1,5 @@ CACHE MANIFEST -# date: Mar 2nd 2019 - v1.5.29a +# date: Mar 2nd 2019 - v1.5.29b CACHE: index.html