Hello All,
I am working on node-red dahsboard and using worldmap to show gps location of devices on map. I have dropdown list of 2 devices which contains latitude and logitude. So the requirement is when I select any one device from dropdown list then only corresponding lat and long will be shown, But in my case all 2 device's lat and long shown in below screenshot. But I want only one marker shown at a time correspond to dropdown.
If you only want one thing shown you must delete the old one first. so you will need to remember which on is currently shown and then send a msg with a payload like {name:"the things name", deleted:true}, and then send the new thing.
(Or you could just use the same name for all things, as the name is the unique key for things on the map so if you just use the same name all the time it will just update it's position - of course that means when you hover or click on the map it will show the same name all the time but you could add anopther sub-property with the id or somesuch if needed...)
Thank you @dceejay for your quick reply. In my case all the devices have unique names. and I tried with above {name:"the things name", deleted:true} option but in that how we can show new marker and delete previous at same time? In below Screenshot. I got gps1 lat and long output when I select device1 in my dropdown list and got gps2 lat and long output. so how we can delete gps1 marker and update gps2 marker at same time?
As I hinted - you will need to store the name of the existing object in (say) a flow context variable - though as you have a function just before that map output you could store it in the function context. Then in your function return two messages - one with the deleted and one with the new object.
https://nodered.org/docs/user-guide/context
and
Writing Functions : Node-RED.
Hello @dceejay , I tried with that but not getting expected output. can you please do with below flow??
[
{
"id": "bdd5aa854a3c0ee7",
"type": "inject",
"z": "dd2b2b9cd496c835",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "{\"name\":\"gps2\",\"lat\":19.064716,\"lon\":72.999214,\"icon\":\"truck\"}",
"payloadType": "json",
"x": 290,
"y": 1860,
"wires": [
[
"6a9545a76ae3e693"
]
]
},
{
"id": "3ea886168b7927ed",
"type": "inject",
"z": "dd2b2b9cd496c835",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "{\"name\":\"gps1\",\"lat\":19.064465,\"lon\":72.999504,\"icon\":\"truck\"}",
"payloadType": "json",
"x": 290,
"y": 1800,
"wires": [
[
"6a9545a76ae3e693"
]
]
},
{
"id": "6a9545a76ae3e693",
"type": "ui_worldmap",
"z": "dd2b2b9cd496c835",
"group": "7563cc51495d2ace",
"order": 2,
"width": 9,
"height": 12,
"name": "",
"lat": "19.0",
"lon": "72.9",
"zoom": "18",
"layer": "OSMC",
"cluster": "",
"maxage": "",
"usermenu": "show",
"layers": "show",
"panit": "true",
"panlock": "false",
"zoomlock": "false",
"hiderightclick": "true",
"coords": "none",
"showgrid": "false",
"showruler": "false",
"allowFileDrop": "false",
"path": "/worldmap",
"overlist": "DR,CO,RA,DN,BU,RW,HM",
"maplist": "OSMG,OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS",
"mapname": "",
"mapurl": "",
"mapopt": "",
"mapwms": false,
"x": 520,
"y": 1820,
"wires": []
},
{
"id": "7563cc51495d2ace",
"type": "ui_group",
"name": "Group 1",
"tab": "2c345b679207408c",
"order": 1,
"disp": true,
"width": 27
},
{
"id": "2c345b679207408c",
"type": "ui_tab",
"name": "test",
"icon": "dashboard",
"order": 11,
"disabled": false,
"hidden": false
}
]
in this 2 input are there, if I trigger input one then input1's gps1 marker will shown and delete gps2 marker.
Basics of such functionality here.
Actual implementation should be way smarter 
[{"id":"6a9545a76ae3e693","type":"ui_worldmap","z":"bf0d83d32eec75c2","group":"7563cc51495d2ace","order":2,"width":9,"height":12,"name":"","lat":"19.0","lon":"72.9","zoom":"18","layer":"OSMC","cluster":"","maxage":"","usermenu":"show","layers":"show","panit":"true","panlock":"false","zoomlock":"false","hiderightclick":"true","coords":"none","showgrid":"false","path":"/worldmap","x":860,"y":1940,"wires":[]},{"id":"156f3d180ebbc4f3","type":"ui_dropdown","z":"bf0d83d32eec75c2","name":"","label":"","tooltip":"","place":"Select option","group":"7563cc51495d2ace","order":7,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"Truck 1","value":"gps1","type":"str"},{"label":"Truck 2","value":"gps2","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","x":420,"y":1960,"wires":[["47a3da1247ae95a7"]]},{"id":"951a271b57f77304","type":"inject","z":"bf0d83d32eec75c2","name":"init","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":410,"y":1800,"wires":[["440af1883041f625"]]},{"id":"440af1883041f625","type":"function","z":"bf0d83d32eec75c2","name":"initialize trucks","func":"let truckList = [\n {\n \"name\":\"gps1\",\n \"lat\": 19.064465,\n \"lon\": 72.999504,\n \"icon\":'truck',\n \"show\":false\n },\n {\n \"name\": \"gps2\",\n \"lat\": 19.064716,\n \"lon\": 72.999214,\n \"icon\": 'truck',\n \"show\": false\n }\n\n]\nglobal.set('truckList',truckList)\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":620,"y":1800,"wires":[[]]},{"id":"47a3da1247ae95a7","type":"function","z":"bf0d83d32eec75c2","name":"choose what to show","func":"let truckList = global.get('truckList')\ntruckList.forEach(truck => {\n if(truck.name == msg.payload){\n if(truck.show == false){\n truck.show = true\n sendShow(truck)\n }\n \n }\n else{\n if (truck.show == true) {\n truck.show = false\n sendHide(truck)\n }\n } \n});\n\nglobal.set('truckList',truckList)\n\nfunction sendShow(truck){\n node.send({payload:truck})\n\n}\nfunction sendHide(truck) {\n node.send({ payload: {name:truck.name,deleted:true }})\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":620,"y":1960,"wires":[["6a9545a76ae3e693","6580077847ad7135"]]},{"id":"a1fd83da7a56d6e1","type":"inject","z":"bf0d83d32eec75c2","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":430,"y":1840,"wires":[["007aabbdeaab4dbe"]]},{"id":"007aabbdeaab4dbe","type":"function","z":"bf0d83d32eec75c2","name":"let's pretend that trucks are moving. store new positions","func":"let truckList = global.get('truckList')\ntruckList.forEach(truck => {\n truck.lon +=0.000500 \n truck.lat += 0.000135\n if(truck.show == true){\n sendMoving(truck)\n } \n\n});\nglobal.set('truckList', truckList)\n\nfunction sendMoving(truck){\n node.send({payload:truck})\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":750,"y":1840,"wires":[["6a9545a76ae3e693"]]},{"id":"6580077847ad7135","type":"debug","z":"bf0d83d32eec75c2","name":"debug 2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":840,"y":2060,"wires":[]},{"id":"7563cc51495d2ace","type":"ui_group","name":"Group 1","tab":"2c345b679207408c","order":1,"disp":true,"width":27},{"id":"2c345b679207408c","type":"ui_tab","name":"test","icon":"dashboard","order":11,"disabled":false,"hidden":false}]
Edit - show movements also
1 Like
Yeah........ Thank youuuuuuuuuu so much @hotNipi . It worked for me. but one more problem is that there is previous marker hide only when I refresh the page, otherwise it shown on map. so how we can hide this without refresh of page? any idea about how we can do this?
For drop-down add option to select none.
In my case there is no none option. we want either any one device selected.
You said previously that my solution works. Now you said it doesn't. Your explanation is not clear.
Hello @hotNipi . solution works only when I refresh the page. otherwise it shown both devices on map.
It works perfectly for me. It shows only one the marker you have selected from dropdown. If you implemented your solution based on my example - you maybe did something wrong, If you use my example directly it should work. That is if you don't have any other nodes affecting global variables related to my example.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
