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

**URL:** <https://discourse.nodered.org/t/how-can-i-get-a-msg-payload-value-to-use-it-in-a-template-and-plot-a-map-on-a-dashboard/66310>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [11 August 2022 06:47 UTC](https://discourse.nodered.org/t/how-can-i-get-a-msg-payload-value-to-use-it-in-a-template-and-plot-a-map-on-a-dashboard/66310 "2022-08-11T06:47:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![fmino0312](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmino0312/32/66048_2.png) [@fmino0312](https://discourse.nodered.org/u/fmino0312)\
**Post date:** [11 August 2022 06:47 UTC](https://discourse.nodered.org/t/how-can-i-get-a-msg-payload-value-to-use-it-in-a-template-and-plot-a-map-on-a-dashboard/66310/1 "2022-08-11T06:47:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [11 August 2022 07:03 UTC](https://discourse.nodered.org/t/how-can-i-get-a-msg-payload-value-to-use-it-in-a-template-and-plot-a-map-on-a-dashboard/66310/2 "2022-08-11T07:03:35Z")

</div>

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.

> [@How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506):
>
> To share code samples or flow json in this forum, you need to take care to format it properly so that it is displayed correctly. The easiest way to do that is to click the 'Preformatted Text' button in the toolbar: [image] Then paste in your code or flow json. You should end up with three back-tick characters - ``` - on their own line before and after the code. On standard US English keyboards, this is on the same key as the ~ character. Using the backticks will ens…

---

<div class="post-metadata">

**Author:** ![fmino0312](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmino0312/32/66048_2.png) [@fmino0312](https://discourse.nodered.org/u/fmino0312)\
**Post date:** [11 August 2022 20:23 UTC](https://discourse.nodered.org/t/how-can-i-get-a-msg-payload-value-to-use-it-in-a-template-and-plot-a-map-on-a-dashboard/66310/3 "2022-08-11T20:23:57Z")

</div>

This is my function code

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

```

This is my tempplate code

```auto
<!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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/c/2cfbfdc90648f8b9cef3b167307e66b7850a0d78.jpeg)

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [12 August 2022 06:04 UTC](https://discourse.nodered.org/t/how-can-i-get-a-msg-payload-value-to-use-it-in-a-template-and-plot-a-map-on-a-dashboard/66310/4 "2022-08-12T06:04:53Z")

</div>

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.

> **[node-red-contrib-web-worldmap](https://flows.nodered.org/node/node-red-contrib-web-worldmap)**
>
> A Node-RED node to provide a web page of a world map for plotting things on.

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

 ![map_details](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/e/3ec68306fe5f56a636511d888d653b5c71aff769.png)  
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**

> [@Plotting the location of wildfires on the Dashboard](https://discourse.nodered.org/t/plotting-the-location-of-wildfires-on-the-dashboard/63048):
>
> Just been working on a "fun" project for my IoT students. Plotting the location of wildfires on the Dashboard. It makes use of data from NASA to plot markers on the worldmap node on the Dashboard. Although most of the function nodes (in the flow) use JavaScript, there is a section in the tutorial-guide that introduces some very basic JSONata to query and transform the array-data received from NASA. I must give credit to @E1cid for his work creating the Jsonata in the Chan…

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](http://www.resources-area.co.uk/node-red-flows/wildfires/plotting_wildfires.pdf)

---

<div class="post-metadata">

**Author:** ![fmino0312](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmino0312/32/66048_2.png) [@fmino0312](https://discourse.nodered.org/u/fmino0312)\
**Post date:** [12 August 2022 16:26 UTC](https://discourse.nodered.org/t/how-can-i-get-a-msg-payload-value-to-use-it-in-a-template-and-plot-a-map-on-a-dashboard/66310/5 "2022-08-12T16:26:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [11 September 2022 16:26 UTC](https://discourse.nodered.org/t/how-can-i-get-a-msg-payload-value-to-use-it-in-a-template-and-plot-a-map-on-a-dashboard/66310/6 "2022-09-11T16:26:33Z")

</div>

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