How can I get a msg.payload value to use it in a template and plot a map on a dashboard?

Dashboard
1

I need help to be able to get a value that I already got from a database. This value was obtained through a function and is found in a msg.payload. At the time of making the html code for the template, I cannot obtain the value of the previous node. I have used {{msg.payload}} but this does not work within the script where it takes the coordinates to graph the map, could you please help me.

2

Welcome to the Node-RED forum.

Can I suggest, as a starting point, you show what you have done so far.
By this I mean 'share' your NR flow here.
This will enable people to help you (as at the moment any suggestion offered would be a complete guess).

This is how to share your code.

3

This is my function code

flow.set("msqlLatitud", msg.payload[0].latitud);
msg.payload = flow.get("msqlLatitud");
return msg;

This is my tempplate code

<!DOCTYPE html>
<html>
  <head>
    <title></title>
	<meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html"/>
    <style>
      html, body{
		height: 100%;
        margin: 0;
        padding: 0;
      }
      #googleMap{
        height:100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=k&amp;callback=initMap"></script>
    <script>
      function initMap() {
      // ConfiguraciĂłn del mapa
      var mapProp = {
       zoom: 15,
      center: {lat: {{msg.payload}}, lng: -78.61006517},
      mapTypeId: google.maps.MapTypeId.TERRAIN
      };
      // Agregando el mapa al tag de id googleMap
      var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
        
      // Coordenada de la ruta (desde Misiones hasta Tierra del Fuego)
      var flightPlanCoordinates = [
        {lat: -1.2254061737732969, lng: -78.62694944630351},
        {lat: -1.2254061737732969, lng: -78.60163022124149},
        {lat: -1.2354061737732969, lng: -78.60363022124149},
        {lat: -1.2454061737732969, lng: -78.60463022124149}
      ];
       
      // InformaciĂłn de la ruta (coordenadas, color de lĂ­nea, etc...)
      var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
      });
       
      // Creando la ruta en el mapa
      flightPath.setMap(map);
      }
        
      // Inicializando el mapa cuando se carga la página
      google.maps.event.addDomListener(window, 'load', initMap);
    </script>
  </head>
  <body>
    <div id="googleMap"></div>
  </body>
</html>

I want to get the msg.payload value of the function node. I am occupying a dashboard template node
Node-RED 54.84.189.227 y 2 páginas más - Trabajo Microsoft Edge

4

I've not done it that way with a ui_template - I'm sure Google map's will need an API 'key' to be supplied.
If you do a search for 'google maps' on this forum you will see what other people have encountered.

I make use of this node to show a map on the Dashboard.
There is a lot of information on how to use this node in the following link.

Here's an example to display/plot a mark on the map.

map_details
map_details763Ă—170 5.62 KB

Note: The properties used are 'lat' and 'lon' (whereas Google uses 'lat' and 'lng').

As an example of how this node can be used, I used the web-worldmap node to plot wildfires around the world on the Dashboard

Here's a direct link to the Tutorial mentioned in the above thread.
http://www.resources-area.co.uk/node-red-flows/wildfires/plotting_wildfires.pdf

2 Likes
5

Yes, I am using a google api key. The problem is that when I put static coordinates, the map works normally, but when I want to obtain the latitude of the msg.payload, the map does not recognize it. The value of msg.payload is taken in almost all the html except within the script, I don't know why.

6

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