Hello everyone, I need to integrate a widget in Node Red with the map in which the sensors that send data to the mqtt server are distributed, through ESP32.
Could you give me some advice on this?
Thanks
Hi Andrea.
What do you mean by a map? Is it an image?
Can you please clarify?
Regards,
Sara
I wan to integrate a google maps or something similar, with any icon where the user can see location e status of sensor going over with the mouse.
I hope you can understand my needed
Hi again.
I’ve never experimented a map node in Node-RED.
However, I’ve found several node packages that you can install and experiment to see which one suits you better:
https://flows.nodered.org/node/node-red-contrib-web-worldmap
https://flows.nodered.org/flow/452bba111f323218d3e17ee6eaa93e9c
https://flows.nodered.org/node/node-red-contrib-maps
I hope this helps.
Regards,
Sara
I’ve installed https://flows.nodered.org/node/node-red-contrib-maps into ~/.node-red but I don’t understand how can I use its.
Can you help me?
Hi.
Run these commands to install it:
pi@raspberry:~ $ node-red-stop
pi@raspberry:~ $ cd ~/.node-red
pi@raspberry:~/.node-red $ npm install node-red-contrib-maps
Then, reboot.
pi@raspberry:~/.node-red $ sudo reboot
Start node-red again:
pi@raspberry:~/$ node-red-start
Then, you should have the node in Node-RED.
You can import the following flow to see how it works.
Go to Import and copy the following:
[{"id":"c88ad6da.c6e608","type":"maps","z":"4bb55162.dd8f7","name":"Temperature Map","path":"maps","maptitle":"Europe Tittle","x":370,"y":100,"wires":[["1cee07b4.5c00c8"]]},{"id":"dd8c4b0.8ae7eb8","type":"inject","z":"4bb55162.dd8f7","name":"","topic":"","payload":"[{\"channel\":\"TEMP\",\"dataset\":[{\"lon\":-3.703548,\"lat\":40.417204,\"name\":\"9fj04r\",\"description\":\"Temperature in Madrid\",\"value\":20.5,\"unit\":\"°C\",\"iconColor\":\"Blue\"},{\"lon\":-0.075906,\"lat\":51.508319,\"name\":\"04jgpe\",\"description\":\"Temperature in London\",\"value\":19,\"unit\":\"°C\",\"iconColor\":\"Yellow\"},{\"lon\":2.34294,\"lat\":48.859271,\"name\":\"lfj82k\",\"description\":\"Temperature in Paris\",\"label\":\"Alert for strong frosts\",\"value\":11.7,\"unit\":\"°C\",\"iconColor\":\"Red\"},{\"lon\":13.402786,\"lat\":52.517987,\"name\":\"0lw233\",\"description\":\"Temperature in Berlin\",\"value\":10.8,\"unit\":\"°C\",\"iconColor\":\"Red\"}]}]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":100,"wires":[["c88ad6da.c6e608"]]},{"id":"1cee07b4.5c00c8","type":"debug","z":"4bb55162.dd8f7","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":590,"y":100,"wires":[]}]
You can also copy it from here:https://github.com/masalinas/node-red-contrib-maps/blob/master/example/dashboard.json
Then, deploy your changes.
Go to rpi-ip-address:1880/maps# and it should show a map.
Regards,
Sara
Thank you for your reply.
It’s working very well.
Now i need to understand how can i integrate in the main ui page like a widget. Now i’ve to go to xxx.xx/maps# instead i want to integrate in the main page.
Hi.
I don’t know if that’s possible. As I’ve told you, I’m not familiar with that node.
A workaround may be integrating a webpage on the main UI. That webpage would be the maps URL.
https://discourse.nodered.org/t/website-embedded-in-dashboard/2965
Tell me if this approach works.
Regards,
Sara