Node-red Worldmap track line

General
1

Hi,

My first post/question to the forum.
Main concern:
Why is the tracking line connecting back to the first point?

What I have tried is based on the existing example "Map in Dashboard".

What is intended to achieve is:

  1. Plot a line track
  2. At the same time, identify the points along that line track
    (Something like connecting the dots, while showing the dots as well)
  • Because in the example flow, it is only plotting the lines, but not the in between points.

What I am plotting is from a database.

  1. One plot is points, in an ascending order
  2. Second plot is a line track, following the same ascending order

However, the line plot is connecting the first and last points together.
I've uploaded a sample picture and my flow with this post.

  • An end result picture
  • A picture of some data points from the database

From the flow file (*.json), inside the function node named "map format", there are two (2) objects inside an array that is giving the lat, long coordinates to be plot in the worldmap node.

Hope someone is kind enough to help.
Many thanks.

localhost worldmap_track line result
localhost worldmap_track line result1831×1080 805 KB

sample plot points
sample plot points392×850 19 KB

[{"id":"19751d9.f6c93e2","type":"function","z":"13f47cd8.692c53","name":"select * from","func":"var user = flow.get(\"mapuser\");\n\nmsg.query = \"SELECT * FROM manualtrack_lat_long_time \"+\n\"WHERE time > now()-7d AND \\\"name\\\" = '\"+user+\"'\"\nreturn msg;\n\n//msg.query = 'SELECT tweet,twid,replytoid FROM KKMPutrajaya_tweet '+\n//'WHERE time > now() - 20h AND tweet =~ /Pecahan kes baharu*/'\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":510,"y":200,"wires":[["6672528a.d415dc"]]},{"id":"6672528a.d415dc","type":"influxdb in","z":"13f47cd8.692c53","influxdb":"83631820.58f5f8","name":"","query":"","rawOutput":false,"precision":"","retentionPolicy":"","org":"organisation","x":750,"y":200,"wires":[["7f4af6b9.a56048","d1ab4fb2.87fd6"]]},{"id":"1b1b7ac0.079db5","type":"function","z":"13f47cd8.692c53","name":"map format","func":"var lat = msg.payload.latitude;\nvar lon = msg.payload.longitude;\nvar time = msg.payload.time;\nvar date = time.getDate();\nvar mth = time.getMonth()+1;\n\nvar display = msg.count.toString();\nvar label = msg.count;\nlabel = label.toString();\nlabel = label+ \" (\" +date+ \"-\" +mth+ \" // DD-MM)\"\n\nvar icon = \"car\";\nvar iconColor = \"black\";\nvar color = \"blue\"; //colour of the line \nvar name = msg.payload.user;\n\nvar marker = [{\n    lat: lat,\n    lon: lon,\n    name: label,\n    icon: icon,\n    iconColor: iconColor,\n    color: color,\n    label: display\n},\n// Above object is plotting individual points\n// Below object is plotting a track line\n{\n    lat: lat,\n    lon: lon,\n    name: name,\n    icon: \"male\",\n    iconColor: \"crimson\",\n    color: color\n}]\n\nmsg.payload = marker\n\nreturn msg;\n\n/*\nmsg.payload={\n    lat:lat,\n    lon:lon,\n    name:\"Mike\",\n    icon:\"car\",\n    iconColor: \"Crimson\",\n    color:\"#1e90ff\",\n    label:\"string of label\",\n    radius: 3000\n};\nreturn msg;\n*/\n\n// create random position\n/*\nvar lat = 51 + Math.random() * 0.2;\nvar lon = -1.45 + Math.random() * 0.2;\n*/","outputs":1,"noerr":0,"initialize":"","finalize":"","x":750,"y":280,"wires":[["3db44082.7cf7c","1e6cf272.69492e"]]},{"id":"3db44082.7cf7c","type":"worldmap-tracks","z":"13f47cd8.692c53","name":"","depth":"100","layer":"single","x":910,"y":240,"wires":[["1e6cf272.69492e"]]},{"id":"1e6cf272.69492e","type":"worldmap","z":"13f47cd8.692c53","name":"","lat":"3.1101","lon":"101.6236","zoom":"13","layer":"OSM","cluster":"7","maxage":"","usermenu":"show","layers":"show","panit":"true","panlock":"false","zoomlock":"false","hiderightclick":"false","coords":"none","showgrid":"true","allowFileDrop":"false","path":"/worldmap","x":960,"y":280,"wires":[]},{"id":"7f4af6b9.a56048","type":"split","z":"13f47cd8.692c53","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":510,"y":240,"wires":[["ff6b753c.9b1778"]]},{"id":"ff6b753c.9b1778","type":"counter","z":"13f47cd8.692c53","name":"","init":"0","step":"1","lower":"","upper":"","mode":"increment","outputs":"1","x":600,"y":280,"wires":[["1b1b7ac0.079db5"]]},{"id":"3b1fd377.4101dc","type":"function","z":"13f47cd8.692c53","name":"reset","func":"msg.reset = \"reset\"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":450,"y":280,"wires":[["ff6b753c.9b1778"]]},{"id":"d65bb024.888d","type":"worldmap in","z":"13f47cd8.692c53","name":"","path":"/worldmap","events":"all","x":220,"y":200,"wires":[["f9743628.66d398"]]},{"id":"f9743628.66d398","type":"switch","z":"13f47cd8.692c53","name":"","property":"payload.action","propertyType":"msg","rules":[{"t":"eq","v":"disconnect","vt":"str"},{"t":"eq","v":"connected","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":350,"y":200,"wires":[["f1f3a9bd.c67c88"],["3b1fd377.4101dc","19751d9.f6c93e2"]]},{"id":"f1f3a9bd.c67c88","type":"function","z":"13f47cd8.692c53","name":"delete context","func":"flow.set(\"mapuser\", undefined)\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":520,"y":140,"wires":[[]]},{"id":"d1ab4fb2.87fd6","type":"debug","z":"13f47cd8.692c53","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1010,"y":160,"wires":[]},{"id":"83631820.58f5f8","type":"influxdb","hostname":"127.0.0.1","port":"8086","protocol":"http","database":"deleteme","name":"","usetls":false,"tls":"","influxdbVersion":"1.x","url":"http://localhost:8086","rejectUnauthorized":true}]
3

Can you post some of the data that comes out of the database, about 5 rows would be fine. That way yout flow can be tested

did you try what is specified in the help?

To delete a track send a msg.payload containing both the name of the object and set deleted to true - for example msg.payload = { "name":"Fred", "deleted":true } .

This will also delete the point. If you just want to clear the track set the msg.payload to the name+"_", for example msg.payload = { "name":"Fred_", "deleted":true }

4

The tracks node adds points to the line in the order they are sent to it so I can only assume you are not ordering the database query in ascending time order.

5

Dave, is it possible to leave a dot at each point when the marker location changes?

6

Thanks for responding.
I attached the sample plot points with this reply.

As for the msg.payload to delete tracks or points...
Well, I'm not trying to delete them, rather I was trying to add points to the track lines, as you mentioned in your latest post.
"...is it possible to leave a dot at each point when the marker location changes?"

Hence, I have an array of 2 objects.

  • One to plot only points (car icon)
  • And the other to plot the same coordinates, but moving the (same name) marker, thus drawing a track line (red icon)

The "problem" of last coordinate drawing a line to the first coordinate happens when I connect to/open (Ctrl+Shift+M) the worldmap on the second time onwards, after flow has been deployed/restarted.

In addition, a flow that uses attached data points without need for database node.
Step 1. Inject node 1st
Step 2. Then open the worldmap web page

[{"id":"cc3d025.c0833","type":"inject","z":"981eb19.f24585","name":"inject me to create context data \"mapuser\"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":220,"y":1220,"wires":[["ea5bed31.36ce5"]]},{"id":"deb1e4ab.1c9858","type":"debug","z":"981eb19.f24585","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":810,"y":1100,"wires":[]},{"id":"90c8cda1.cdf5d","type":"function","z":"981eb19.f24585","name":"","func":"var lat = msg.payload.latitude;\nvar lon = msg.payload.longitude;\nvar time = msg.payload.time;\n//var date = time.getDate();\n//var mth = time.getMonth()+1;\n\nvar display = msg.count.toString();\nvar label = msg.count;\nlabel = label.toString();\n//label = label+ \" (\" +date+ \"-\" +mth+ \" // DD-MM)\"\n\nvar icon = \"car\";\nvar iconColor = \"black\";\nvar color = \"blue\"; //colour of the line \nvar name = msg.payload.user;\n\nvar marker = [{\n    lat: lat,\n    lon: lon,\n    name: label,\n    icon: icon,\n    iconColor: iconColor,\n    color: color,\n    label: display,\n    layer: \"point\"\n},\n{\n    lat: lat,\n    lon: lon,\n    name: name,\n    icon: \"male\",\n    iconColor: \"crimson\",\n    color: color,\n    layer: \"line\"\n}]\n\nmsg.payload = marker\n\nreturn msg;\n\n/*\nmsg.payload={\n    lat:lat,\n    lon:lon,\n    name:\"Mike\",\n    icon:\"car\",\n    iconColor: \"Crimson\",\n    color:\"#1e90ff\",\n    label:\"string of label\",\n    radius: 3000\n};\nreturn msg;\n*/\n\n// create random position\n/*\nvar lat = 51 + Math.random() * 0.2;\nvar lon = -1.45 + Math.random() * 0.2;\n*/","outputs":1,"noerr":0,"initialize":"","finalize":"","x":620,"y":1160,"wires":[["af844d30.82293","3234181b.bed9e8"]]},{"id":"af844d30.82293","type":"worldmap-tracks","z":"981eb19.f24585","name":"","depth":"100","layer":"single","x":790,"y":1160,"wires":[["3234181b.bed9e8"]]},{"id":"3234181b.bed9e8","type":"worldmap","z":"981eb19.f24585","name":"","lat":"3.1101","lon":"101.6236","zoom":"13","layer":"OSM","cluster":"7","maxage":"","usermenu":"show","layers":"show","panit":"true","panlock":"false","zoomlock":"false","hiderightclick":"false","coords":"none","showgrid":"true","allowFileDrop":"false","path":"/worldmap","x":840,"y":1200,"wires":[]},{"id":"8a485bbb.079348","type":"split","z":"981eb19.f24585","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":590,"y":1100,"wires":[["36718a35.728eb6"]]},{"id":"36718a35.728eb6","type":"counter","z":"981eb19.f24585","name":"","init":"0","step":"1","lower":"","upper":"","mode":"increment","outputs":"1","x":480,"y":1160,"wires":[["90c8cda1.cdf5d"]]},{"id":"e45f302f.dd32b","type":"function","z":"981eb19.f24585","name":"reset","func":"msg.reset = \"reset\"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":330,"y":1160,"wires":[["36718a35.728eb6"]]},{"id":"ee53288a.e62fe8","type":"worldmap in","z":"981eb19.f24585","name":"","path":"/worldmap","events":"all","x":100,"y":1080,"wires":[["efb055fc.309108"]]},{"id":"ea5bed31.36ce5","type":"function","z":"981eb19.f24585","name":"","func":"//var user = msg.originalMessage.from.username\nvar user = \"QuistisLulu\";\nflow.set(\"mapuser\", user)\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":480,"y":1220,"wires":[[]]},{"id":"efb055fc.309108","type":"switch","z":"981eb19.f24585","name":"","property":"payload.action","propertyType":"msg","rules":[{"t":"eq","v":"disconnect","vt":"str"},{"t":"eq","v":"connected","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":230,"y":1080,"wires":[["d2e024e1.3eca98"],["e45f302f.dd32b","2eb99b60.b28864"]]},{"id":"d2e024e1.3eca98","type":"function","z":"981eb19.f24585","name":"delete context","func":"flow.set(\"mapuser\", undefined)\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":1060,"wires":[[]]},{"id":"2eb99b60.b28864","type":"function","z":"981eb19.f24585","name":"data points array","func":"var arr = [{\"time\":\"2021-01-06T01:49:49.021Z\",\"latitude\":3.07104,\"longitude\":101.541804,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-06T04:25:49.772Z\",\"latitude\":3.070719,\"longitude\":101.540856,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-07T01:41:57.194Z\",\"latitude\":3.071051,\"longitude\":101.541821,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-07T04:24:53.600Z\",\"latitude\":3.070764,\"longitude\":101.54085,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-08T04:52:40.865Z\",\"latitude\":3.10911,\"longitude\":101.624987,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-09T01:04:01.287Z\",\"latitude\":3.107479,\"longitude\":101.624268,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-09T01:50:45.557Z\",\"latitude\":3.106662,\"longitude\":101.624453,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-09T02:00:42.109Z\",\"latitude\":3.106821,\"longitude\":101.62425,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-09T05:07:02.606Z\",\"latitude\":3.110135,\"longitude\":101.627156,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-09T10:24:17.219Z\",\"latitude\":3.109595,\"longitude\":101.621479,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-09T10:48:19.845Z\",\"latitude\":3.110744,\"longitude\":101.622187,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-10T00:52:43.725Z\",\"latitude\":3.117266,\"longitude\":101.622647,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"}]\nmsg.payload = arr;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":430,"y":1100,"wires":[["8a485bbb.079348"]]}]

sample plot points.txt (1.5 KB)

7

Ok, I discovered something. If you go to the map and click the layesr icon (top-right on map) a set of options show up.

Screen Shot 2021-01-10 at 10.17.17 AM
Screen Shot 2021-01-10 at 10.17.17 AM642×809 312 KB

If you uncheck the line tracks option, the line going from the last point to the first is removed:

Screen Shot 2021-01-10 at 10.08.36 AM
Screen Shot 2021-01-10 at 10.08.36 AM638×544 203 KB

I do not knoow if that can be removed in the flow (@dceejay any thoughts?)

8

only thought is - I don't know what counter node is.
Those options are the layers you have put the point or lines onto.
I think the logic is slightly wrong but as I can't run it I can't tell yet. I think what should happen is that the "main" vehicle should be plotted as normal and use the tracks node so it generates a line - you then also need a parallel function that when it sees a new position from the vehicle just add a new marker point where the old one was - but doesn't go via the track node.

9

I'm afraid I have a different result. It completely removed the track line altogether for me.
But as Dave said, let's focus on the track line itself instead of the layer.

The counter node is used to create a unique name & label for plotting out each individual point.

  • Because having the same name will move the marker to the latest coordinates.

So that I can see where the start is, where the end is, and including all that is in between.

Anyway, I took your advice and further simplified my flow and data points by modifying the existing example flow (again using) "Map in Dashboard".
Focusing on:
Track lines only

What I observed is:
Tracks node properties > Number of points in track

  • If the number is less than or equal to (<=) the number of data points, then last point will not create a track line to the first point
    • I have 12 points in the sample data
  • If the number is more than (>) the number of data points, then the last point will create a track line to the first point

Hope these observations will help us move forward from this point.
Further simplified flow as below.

[{"id":"260db5be.360c6a","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"9b2a29cc.3c53a8","type":"worldmap","z":"260db5be.360c6a","name":"","lat":"","lon":"","zoom":"","layer":"OSM","cluster":"","maxage":"","usermenu":"hide","panit":"true","hiderightclick":"false","coords":"none","path":"","x":810,"y":260,"wires":[]},{"id":"1714967f.e691ea","type":"inject","z":"260db5be.360c6a","name":"","repeat":"","crontab":"","once":false,"onceDelay":"","topic":"","payload":"","payloadType":"str","x":330,"y":120,"wires":[["1b24ad2f.198453"]]},{"id":"1b24ad2f.198453","type":"function","z":"260db5be.360c6a","name":"tracks","func":"// create random position\nvar lat = 51 + Math.random() * 0.2;\nvar lon = -1.45 + Math.random() * 0.2;\nmsg.payload={\n    lat:msg.payload.latitude, \n    lon:msg.payload.longitude, \n    name:msg.payload.name, \n    icon:\"male\", \n    color:\"#000\"};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":590,"y":200,"wires":[["de5c4044.d4e0f"]]},{"id":"de3a90c8.8179c","type":"ui_button","z":"260db5be.360c6a","name":"","group":"cd81d08b.eebb3","order":0,"width":0,"height":0,"passthru":true,"label":"Move Mike","tooltip":"","color":"","bgcolor":"","icon":"fa-male","payload":"","payloadType":"str","topic":"","x":310,"y":160,"wires":[["1b24ad2f.198453"]]},{"id":"223f301c.54ea9","type":"comment","z":"260db5be.360c6a","name":"How to embed Map in Dashboard - Modified","info":"This example shows how to embed the Worldmap \ninto a template node within the `node-red-dashboard`\n\nThe first flow creates a dashboard button that \ngenerates a randon position, with the required \nicon, and passes that to the worldmap. The\nmap is configured to automatically pan to the\nposition of any point that arrives.\n\nThe second flow initialise the dashboard template\nwith the initial map and sets it to a more square shape\nby adjusting the height.","x":270,"y":80,"wires":[]},{"id":"de5c4044.d4e0f","type":"worldmap-tracks","z":"260db5be.360c6a","name":"","depth":"15","layer":"combined","x":710,"y":200,"wires":[["9b2a29cc.3c53a8"]]},{"id":"31a7dba3.899a54","type":"worldmap in","z":"260db5be.360c6a","name":"","path":"/worldmap","events":"connect","x":100,"y":200,"wires":[["f3036bfb.a35ea8"]]},{"id":"f3036bfb.a35ea8","type":"function","z":"260db5be.360c6a","name":"data points array","func":"var arr = [{\"time\":\"2021-01-06T01:49:49.021Z\",\"latitude\":3.07104,\"longitude\":101.541804,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-06T04:25:49.772Z\",\"latitude\":3.070719,\"longitude\":101.540856,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-07T01:41:57.194Z\",\"latitude\":3.071051,\"longitude\":101.541821,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-07T04:24:53.600Z\",\"latitude\":3.070764,\"longitude\":101.54085,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-08T04:52:40.865Z\",\"latitude\":3.10911,\"longitude\":101.624987,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-09T01:04:01.287Z\",\"latitude\":3.107479,\"longitude\":101.624268,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-09T01:50:45.557Z\",\"latitude\":3.106662,\"longitude\":101.624453,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-09T02:00:42.109Z\",\"latitude\":3.106821,\"longitude\":101.62425,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-09T05:07:02.606Z\",\"latitude\":3.110135,\"longitude\":101.627156,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-09T10:24:17.219Z\",\"latitude\":3.109595,\"longitude\":101.621479,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-09T10:48:19.845Z\",\"latitude\":3.110744,\"longitude\":101.622187,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"},{\"time\":\"2021-01-10T00:52:43.725Z\",\"latitude\":3.117266,\"longitude\":101.622647,\"metric\":1,\"name\":\"QuistisLulu\",\"user\":\"QuistisLulu\"}]\nmsg.payload = arr;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":290,"y":200,"wires":[["57fb0660.0acf68"]]},{"id":"57fb0660.0acf68","type":"split","z":"260db5be.360c6a","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":450,"y":240,"wires":[["bfbb1649.521eb8","1b24ad2f.198453"]]},{"id":"7840266a.098f58","type":"debug","z":"260db5be.360c6a","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":250,"y":260,"wires":[]},{"id":"bfbb1649.521eb8","type":"function","z":"260db5be.360c6a","name":"moving point","func":"// create random position\nvar lat = 51 + Math.random() * 0.2;\nvar lon = -1.45 + Math.random() * 0.2;\nmsg.payload={\n    lat:msg.payload.latitude, \n    lon:msg.payload.longitude, \n    name:msg.payload.name, \n    icon:\"male\", \n    color:\"#000\"};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":610,"y":260,"wires":[["9b2a29cc.3c53a8"]]},{"id":"825ebe3d.0164c","type":"worldmap","z":"260db5be.360c6a","d":true,"name":"","lat":"","lon":"","zoom":"","layer":"OSM","cluster":"","maxage":"","usermenu":"hide","panit":"true","x":600,"y":440,"wires":[]},{"id":"8756bb44.8e68e8","type":"inject","z":"260db5be.360c6a","d":true,"name":"","repeat":"","crontab":"","once":false,"onceDelay":"","topic":"","payload":"","payloadType":"str","x":150,"y":400,"wires":[["fe4b19f6.87f138"]]},{"id":"fe4b19f6.87f138","type":"function","z":"260db5be.360c6a","d":true,"name":"","func":"// create random position\nvar lat = 51 + Math.random() * 0.2;\nvar lon = -1.45 + Math.random() * 0.2;\nmsg.payload={\n    lat:lat, \n    lon:lon, \n    name:\"Mike\", \n    icon:\"male\", \n    color:\"#000\"};\nreturn msg;","outputs":1,"noerr":0,"x":340,"y":440,"wires":[["825ebe3d.0164c","1330d94c.e5a477"]]},{"id":"136ac9ba.ef40d6","type":"inject","z":"260db5be.360c6a","d":true,"name":"","repeat":"","crontab":"","once":true,"onceDelay":"","topic":"","payload":"","payloadType":"str","x":150,"y":480,"wires":[["b4576ab9.761d08"]]},{"id":"fba8ed64.837b6","type":"ui_template","z":"260db5be.360c6a","d":true,"group":"cd81d08b.eebb3","name":"","order":0,"width":"6","height":"6","format":"<div ng-bind-html=\"msg.payload | trusted\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":480,"y":480,"wires":[[]]},{"id":"b4576ab9.761d08","type":"template","z":"260db5be.360c6a","d":true,"name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<iframe src=\"../worldmap\" height=300px ></iframe>","x":330,"y":480,"wires":[["fba8ed64.837b6"]]},{"id":"1bd4e6a9.3ab859","type":"ui_button","z":"260db5be.360c6a","d":true,"name":"","group":"cd81d08b.eebb3","order":0,"width":0,"height":0,"label":"Move Mike","color":"","icon":"fa-male","payload":"","payloadType":"str","topic":"","x":160,"y":440,"wires":[["fe4b19f6.87f138"]]},{"id":"ad180e05.8a939","type":"comment","z":"260db5be.360c6a","d":true,"name":"How to embed Map in Dashboard","info":"This example shows how to embed the Worldmap \ninto a template node within the `node-red-dashboard`\n\nThe first flow creates a dashboard button that \ngenerates a randon position, with the required \nicon, and passes that to the worldmap. The\nmap is configured to automatically pan to the\nposition of any point that arrives.\n\nThe second flow initialise the dashboard template\nwith the initial map and sets it to a more square shape\nby adjusting the height.","x":210,"y":360,"wires":[]},{"id":"1330d94c.e5a477","type":"worldmap-tracks","z":"260db5be.360c6a","d":true,"name":"","depth":"5","layer":"combined","x":470,"y":400,"wires":[["825ebe3d.0164c"]]},{"id":"cd81d08b.eebb3","type":"ui_group","z":"260db5be.360c6a","name":"Default","tab":"b34078e6.e60df8","order":1,"disp":true,"width":"6"},{"id":"b34078e6.e60df8","type":"ui_tab","z":"260db5be.360c6a","name":"Home","icon":"dashboard"}]
10

Ah.... which now looking at the help section of the track node, there is a way to variably set the number of points by using msg.payload.trackpoints

I guess this should do the trick.
Thanks for focusing the problem back to fundamentals.
Thank you for your time and attention.

11

By the way, there is a fairly new ui_worldmap you might want to use. It should be in stalled if you are on fairly new dashboard version.

12

Nice! Will surely check it out as well. :slight_smile:

13

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