Ui template link to worldmap with markers


#1

I'm having a few buttons designed with the ui template node to link to other web pages like grafana, worldmap and others. What i'd like to achieve is open worldmap WITH the marker already there without having to inject the position (wich i'm doing manually with a dashboard button after the map is loaded)

Can it be possible to inject the position IN the link or trigger some flow with it like the link would do 2 actions?

Here's what's it look like:

<body> <a href= "https://mysite/worldmap" target="_blank" class="button button_over">Carte</a> </body>


#2

you can use the worldmap in node - whenever a new client (web page) connects it will output a message. By filtering out the connect messages you can trigger your flow to send a marker right away (ie hook it to same place your button goes to).


#3

Hi dceejay,

the messages output by the worldmap in node doesn't say much:

debug

And wether i connect with my phone or else it shows the same thing.

i'm i doing something wrong?

Thanks


#4

Isn’t the connected message enough for you to “press”/ trigger instead of your button ?


#5

Argh, sorry, i had to mention that i have 3 flows with each their maps and there is no way to route messages from the input node based on property.


#6

Why not ? I presume you know what you need to send to each.


#7

Nope... I tried with iframe, 3 dashboard pages with each their maps and when i switch from one dashboard to the other i see the connecting actions on the node but it's the sames messages. I don't figure how to send information to the map automatically (like loading the dashboard page) Or best would be able to put the coordinates in the iframe address like google maps, or being able to keep some data about the client connexion.


#8

sorry - I'm obviously not understanding the use case fully.
If this is in the Node-RED dashboard the ui_control node is similar to the worldmap in node in that it reports any connections - but also includes info about the tab switched to also - so maybe use that instead.


#9

Success!

Thanks dceejay, you pointed me in the right direction (again)

Let me explain this a bit for others who may face the same problem. It may not be the most elegant way of doing it but it works for me (for now)

Suppose you have a few buildings that you want to represent in dashboard pages, Each of them have their own dashboard page driven by their respective flow. Now you want to put a worldmap in iframe in each of the dashboard pages to locate the buildings so users can locate them with phones when they are on the building dashboard's page.

Now the question is how to put the marker automatically on dashboard page change without using inject or button. Remember, having 3 or maps complicate things as i understand it is single user.

With the help of the ui control node you can see on a debug node set to" complete message object" on it's output the information about what dashboard pages are connecting. So putting a switch node to filter for dashboard's page name by msg.name will do the trick

debug
debug2

Then with a little delay and the function node containing the coordinates each time you change tabs on the dashboard the marker will go to the exact location of the target building.

[{"id":"80b4d231.15ea8","type":"worldmap","z":"558d3c99.18ac74","name":"","lat":"","lon":"","zoom":"14","layer":"OSM","cluster":"","maxage":"","usermenu":"show","layers":"show","panit":"true","panlock":"false","zoomlock":"false","path":"/worldmap","x":1100,"y":280,"wires":[]},{"id":"e8fa4176.137b8","type":"function","z":"558d3c99.18ac74","name":"poste12","func":"// poste12\nvar lat = 45.391722;\nvar lon = -73.933847;\nmsg.payload={\nlat:lat,\nlon:lon,\nname:\"Poste12\",\nicon:\"\"\n};\nreturn msg;","outputs":1,"noerr":0,"x":840,"y":280,"wires":[["80b4d231.15ea8"]]},{"id":"119f69ec.04a266","type":"function","z":"558d3c99.18ac74","name":"poste13","func":"// create position\nvar lat = 45.363749;\nvar lon = -73.864608;\nmsg.payload={\nlat:lat,\nlon:lon,\nname:\"Poste13\",\nicon:\"\"\n};\nreturn msg;","outputs":1,"noerr":0,"x":840,"y":320,"wires":[["80b4d231.15ea8"]]},{"id":"52afca2f.913584","type":"function","z":"558d3c99.18ac74","name":"poste1","func":"// create random position\nvar lat = 45.345928;\nvar lon = -73.905712;\nmsg.payload={\nlat:lat,\nlon:lon,\nname:\"Poste1\",\nicon:\"\"\n};\nreturn msg;","outputs":1,"noerr":0,"x":850,"y":240,"wires":[["80b4d231.15ea8"]]},{"id":"6eb9b9f0.9af9b8","type":"ui_template","z":"558d3c99.18ac74","group":"5207777c.a89c48","name":"","order":0,"width":"7","height":"6","format":"<div ng-bind-html=\"msg.payload | trusted\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":800,"y":520,"wires":[[]]},{"id":"f029bbfa.9521f8","type":"template","z":"558d3c99.18ac74","name":"poste1","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<iframe src=\"https://admin.babylonsystems.ca/worldmap\" height=300px width=350px ></iframe>","x":610,"y":520,"wires":[["6eb9b9f0.9af9b8"]]},{"id":"85182fa5.1bd0e","type":"inject","z":"558d3c99.18ac74","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":470,"y":520,"wires":[["f029bbfa.9521f8"]]},{"id":"af082a83.b7ba58","type":"inject","z":"558d3c99.18ac74","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":470,"y":560,"wires":[["f5bcf396.17f3a"]]},{"id":"91b21e24.59674","type":"ui_template","z":"558d3c99.18ac74","group":"a08849ee.c6bce8","name":"","order":0,"width":"7","height":"6","format":"<div ng-bind-html=\"msg.payload | trusted\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":800,"y":560,"wires":[[]]},{"id":"f5bcf396.17f3a","type":"template","z":"558d3c99.18ac74","name":"poste12","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<iframe src=\"https://admin.babylonsystems.ca/worldmap\" height=300px width=350px ></iframe>","x":620,"y":560,"wires":[["91b21e24.59674"]]},{"id":"b4fca633.a3e428","type":"inject","z":"558d3c99.18ac74","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":470,"y":600,"wires":[["24d98c5e.2ec5a4"]]},{"id":"be8ce0e2.ee98","type":"ui_template","z":"558d3c99.18ac74","group":"a5fee18a.ca448","name":"","order":0,"width":"7","height":"6","format":"<div ng-bind-html=\"msg.payload | trusted\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":800,"y":600,"wires":[[]]},{"id":"24d98c5e.2ec5a4","type":"template","z":"558d3c99.18ac74","name":"poste13","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<iframe src=\"https://admin.babylonsystems.ca/worldmap\" height=300px width=350px ></iframe>","x":620,"y":600,"wires":[["be8ce0e2.ee98"]]},{"id":"5315bc7.c7e1e44","type":"ui_ui_control","z":"558d3c99.18ac74","name":"","x":300,"y":280,"wires":[["90b1eb0a.d914a8","8c3d8ea4.5f378"]]},{"id":"8c3d8ea4.5f378","type":"debug","z":"558d3c99.18ac74","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":510,"y":360,"wires":[]},{"id":"90b1eb0a.d914a8","type":"switch","z":"558d3c99.18ac74","name":"","property":"name","propertyType":"msg","rules":[{"t":"cont","v":"1","vt":"str"},{"t":"cont","v":"12","vt":"str"},{"t":"cont","v":"13","vt":"str"}],"checkall":"true","repair":false,"outputs":3,"x":510,"y":280,"wires":[["39b8050d.2239da"],["259c7430.4244cc"],["499fde39.58913"]]},{"id":"499fde39.58913","type":"delay","z":"558d3c99.18ac74","name":"","pauseType":"delay","timeout":"2","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":700,"y":320,"wires":[["119f69ec.04a266"]]},{"id":"259c7430.4244cc","type":"delay","z":"558d3c99.18ac74","name":"","pauseType":"delay","timeout":"2","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":700,"y":280,"wires":[["e8fa4176.137b8"]]},{"id":"39b8050d.2239da","type":"delay","z":"558d3c99.18ac74","name":"","pauseType":"delay","timeout":"2","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":700,"y":240,"wires":[["52afca2f.913584"]]},{"id":"5207777c.a89c48","type":"ui_group","z":"","name":"Carte","tab":"baf57c46.f4fb2","order":14,"disp":true,"width":"7","collapse":false},{"id":"a08849ee.c6bce8","type":"ui_group","z":"","name":"Carte","tab":"6b6abba4.a185c4","order":11,"disp":true,"width":"7","collapse":false},{"id":"a5fee18a.ca448","type":"ui_group","z":"","name":"Carte","tab":"adacb762.f282f8","order":14,"disp":true,"width":"7","collapse":false},{"id":"baf57c46.f4fb2","type":"ui_tab","z":"","name":"poste 1 ","icon":"dashboard","order":2},{"id":"6b6abba4.a185c4","type":"ui_tab","z":"","name":"poste12","icon":"dashboard","order":11},{"id":"adacb762.f282f8","type":"ui_tab","z":"","name":"poste 13","icon":"dashboard","order":12}]

Here's the flow. Now by any chance if anyone can do the same thing but from a dashboard ui template button link like this one:

It would be great.

[{"id":"c374d08e.fc8e2","type":"ui_template","z":"7035eec8.a6ffc","group":"893597f2.b800a8","name":"Carte","order":0,"width":"3","height":"2","format":"<!DOCTYPE html>\n<html>\n <head>\n <style>\n .button {\n background-color: #086A87;\n border: none;\n color: white;\n padding: 16px 32px;\n text-align: center;\n text-decoration: none;\n font-size: 16px;\n margin: 3px 1px;\n cursor: pointer;\n border-radius: 8px;\n }\n .button_over:hover {\n background-color: #187A97;\n color: white;\n }\n </style>\n </head>\n <body>\n <a href= \"yoursite/worldmap\" target=\"_blank\" class=\"button button_over\">Map</a>\n </body>\n </html>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":170,"y":4180,"wires":[[]]},{"id":"893597f2.b800a8","type":"ui_group","z":"","name":"Liens","tab":"adacb762.f282f8","order":13,"disp":true,"width":"7","collapse":false},{"id":"adacb762.f282f8","type":"ui_tab","z":"","name":"poste 13","icon":"dashboard","order":12}]

Here is the button if anyone want it . Just change "yoursite" with your node red installation path.