How to pass msg.payload to template node

General
1

Hi!
I added a google maps widget to the Dashboard and I am trying to add a msg.payload.lat as the latitude and msg.payload.lon as longitude, but I don't know the right syntax. Could anyone help me please?
Thank you!

This is the piece of code:

<script type="text/javascript">
$(document).ready(function(){
  var MAP_ZOOM = 12
  var MARKER_SIZE = 14
  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: MAP_ZOOM,
      center: {lat: **{{payload.lat}}**, lng: **{{payload.lon}}** }
    });
2

so long as msg.payload is an object containing .lat and .lon then pretty much as you have (without the stars)

center: {lat: {{payload.lat}}, lng: {{payload.lon}} }

or perhaps

center: {lat: {{msg.payload.lat}}, lng: {{msg.payload.lon}} }

Just use a DEBUG node before the template node - ensure msg.payload is an object with those properties

3

Captura de pantalla de 2021-05-14 13-39-57
Captura de pantalla de 2021-05-14 13-39-571903Ă—997 203 KB

It does not work neither msg.payload.lat nor payload.lat :frowning:

4

how do you know? Have you put a debug on the output of the template node and checked?

One thing I have noticed is - that message containing coordinate is coming in every 1 second - it is not really the best solution to rebuild the whole page every 1 second!

What are you trying to achieve - live tracking on a google map?

5

What I get in the debug node from the template node is the msg.payload, so all the html code, but I know it because if I set static longitude and latitude as a number in the HTML code, I can see the map on the Dashboard, otherwise I can't

Yes, that's how it is

6

show me the debug message going in and out out of the template

It definitely works...

image
image879Ă—403 18.4 KB

[{"id":"c012061.82b83f8","type":"inject","z":"4b3f21a3.ba434","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"lat\": 41.1, \"lon\": 0.123}","payloadType":"json","x":1520,"y":1540,"wires":[["d34bb602.cc8d68","d708cead.56e7e"]]},{"id":"d34bb602.cc8d68","type":"template","z":"4b3f21a3.ba434","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<script type=\"text/javascript\">\n$(document).ready(function(){\n  var MAP_ZOOM = 12\n  var MARKER_SIZE = 14\n  var mapOpts = {\n      zoom: MAP_ZOOM,\n      center: {lat: {{payload.lat}}, lng: {{payload.lon}} }\n    }\n</script>    ","output":"str","x":1680,"y":1540,"wires":[["cb159340.02a4e"]]},{"id":"d708cead.56e7e","type":"debug","z":"4b3f21a3.ba434","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1630,"y":1600,"wires":[]},{"id":"cb159340.02a4e","type":"debug","z":"4b3f21a3.ba434","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1850,"y":1540,"wires":[]}]
7 
[{"id":"5b67a4a.a77885c","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"1e5c058e.47f47a","type":"ui_template","z":"5b67a4a.a77885c","group":"88f77589.0122d8","name":"Map widget","order":0,"width":"24","height":"14","format":"<iframe \n    id='frame'\n    src='/mapui'\n    width='100%'  \n    height='100%'\n>\n</iframe>\n\n<script>\nscope.$watch('msg.payload', function(newv, oldv, scope) {\n    $(\"#frame\")[0].contentWindow.postMessage(JSON.stringify(newv), '*');\n});\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":610,"y":100,"wires":[[]]},{"id":"73a1e6ed.68da48","type":"http response","z":"5b67a4a.a77885c","name":"","statusCode":"","headers":{},"x":590,"y":160,"wires":[]},{"id":"9b839fed.61113","type":"http in","z":"5b67a4a.a77885c","name":"","url":"/mapui","method":"get","upload":false,"swaggerDoc":"","x":226,"y":160,"wires":[["4d80474b.f714a8"]]},{"id":"4d80474b.f714a8","type":"template","z":"5b67a4a.a77885c","name":"Map UI","field":"payload","fieldType":"msg","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>\n  <title>LOCATION</title>\n  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js\"></script>\n  <script src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyBOZUVdA4rQBMUfb0o2Ckgsh1zB_tPUhWw\"></script>\n  <script src=\"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js\"></script>\n\n  <style type=\"text/css\" media=\"screen\">\n    #map {\n      position:absolute;\n      top: 0; bottom: 0; left: 0; right: 0;\n    }\n  </style>\n</head>\n<body>\n  <div id=\"map\"></div>\n  <script type=\"text/javascript\">\n$(document).ready(function(){\n  var MAP_ZOOM = 12\n  var MARKER_SIZE = 14\n  var map = new google.maps.Map(document.getElementById('map'), {\n      zoom: MAP_ZOOM,\n      center: {lat: {{payload.lat}}, lng: {{payload.lon}} }\n    });\n    \n  var markers = []\n  \n  window.onmessage = function(evt){\n    for (var i = 0; i < markers.length; i++) {\n      markers[i].setMap(null);\n    }\n    \n    var data = JSON.parse(evt.data);\n    map.setZoom(MAP_ZOOM);\n    \n    markers = data.map(function(el, i) {\n      var marker = new google.maps.Marker({\n        position: el,\n        icon: {\n          url: el.iconUrl,\n          scaledSize: new google.maps.Size(MARKER_SIZE, MARKER_SIZE)\n        },\n        map:map\n      });\n      google.maps.event.addListener(marker , 'click', function(){\n        var infowindow = new google.maps.InfoWindow({\n          content:el.description,\n          position: el,\n        });\n        infowindow.open(map);\n        setTimeout(function () { infowindow.close(); }, 2000);\n      });\n      return marker\n    });\n  }\n});\n  </script>\n</body>\n</html>","x":416,"y":169,"wires":[["73a1e6ed.68da48","ec4c3c6.f8ecac"]]},{"id":"752c4bd3.0cfcd4","type":"inject","z":"5b67a4a.a77885c","name":"","repeat":"","crontab":"","once":false,"topic":"","payload":"[{\"lat\":49.268311, \"lng\":-123.148146, \"description\":\"awefa\", \"iconUrl\":\"http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/pink-jelly-icons-arrows/009173-pink-jelly-icon-arrows-triangle-solid-left.png\"},{\"lat\":49.265311, \"lng\":-123.148146, \"description\":\"awefa\", \"iconUrl\":\"http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/pink-jelly-icons-arrows/009173-pink-jelly-icon-arrows-triangle-solid-left.png\"}]","payloadType":"json","x":230,"y":100,"wires":[["1e5c058e.47f47a"]]},{"id":"800a50fe.d2c37","type":"link in","z":"5b67a4a.a77885c","name":"","links":["20da2fe6.77964"],"x":175,"y":220,"wires":[["a60f4e53.8d18e","4d80474b.f714a8"]]},{"id":"a60f4e53.8d18e","type":"debug","z":"5b67a4a.a77885c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":430,"y":220,"wires":[]},{"id":"ec4c3c6.f8ecac","type":"debug","z":"5b67a4a.a77885c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":630,"y":220,"wires":[]},{"id":"88f77589.0122d8","type":"ui_group","name":"","tab":"c4c17961.4519f8","order":1,"disp":true,"width":"24","collapse":false},{"id":"c4c17961.4519f8","type":"ui_tab","name":"Location","icon":"dashboard","disabled":false,"hidden":false}]

If you import my flow, you will notice that my {{payload.lat or lon}} is not orange as it is yours, I do not know it that affects to that but the fact is that I cannot see the data in the Dashboard then...

Here is the outputs for the debug nodes:

Captura de pantalla de 2021-05-14 14-16-26
Captura de pantalla de 2021-05-14 14-16-261911Ă—992 165 KB

8

As I said, it works - this is from your screen shot.
image

It only looks different because I clicked the expander...
image

9

TBH, you would be far better off using the ui-template node.

With the ui-template node you can send updates from your device WITHOUT rebuilding the whole page.

image
image473Ă—521 16 KB

e.g. send a message with lat and lon that then updates the marker on the map

10

I harcoded the values when I sent you the screenshot, sorry!

11

Ok, I tried but it did not work at the moment... I tried to adda 10 seconds delay as you said to get the data a little bit delayed, but I get it every second anyways. I have to leave now, but I'll continue on Monday!

Thank you so much for your help! I'll try again on Monday :slight_smile:

12

a 10 second delay will only cause EVERY message to come 10s late (every message will still be sent & they will be 1s apart)

You need to set it to rate limit 1msg per 10 secs
image

13

Maybe it is, because you start reproviding the page already before it has been build up from the previous request?

Cheers
Ranki

14

The node-red-contrib-web-worldmap has a dashboard widget built in and can handle that rate no problem

15

Hi Steve! I still have the same problem, I get the information, but the map does not show any location...

16

I am trying to install it, and if I go to the .node-red directory and I run "npm i node-red-contrib-web-worldmap", I get a EAI_AGAIN errno and code, and request to https:/registry.npmjs.org/node-red-cotrib-web-worldmap/-/node-red-contrib-web-worldmap-2.13.4.tgz failed, reason: getaddrinfo EAI_AGAIN registry.npmjs.org

And I do not find a solution for this...

17

This is not a node-red issue - try searching for google maps api help/



There are thousands of results for that - essentially either the PC/SERVER/PI running node-red does not have access to the internet or has a DNS issue - read the issues linked to for a solution.

Questions: From the PC/SERVER/PI running node-red, can you...

  • Can you ping 8.8.8.8 ?
  • Can you curl www.google.com?
18

Definitely it was a bad Wi-Fi connection which was not letting me download the nodes, and once I downloaded it, it worked!

So thank you everyone for your help!!!

1 Like
19

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.