• Skip to main content
  • Skip to primary sidebar

RNTLab.com

The Ultimate Shortcut to Learn Electronics and Programming with Open Source Hardware and Software

  • Courses
  • Forum
    • Forum
    • Ask Question
  • Shop
  • Account
  • Blog
  • Login

Widget Map – Node Red

Q&A Forum › Category: Other › Widget Map – Node Red
0 Vote Up Vote Down
Andrea Rondini asked 5 years ago

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

8 Answers
0 Vote Up Vote Down
Sara Santos Staff answered 5 years ago

Hi Andrea.
What do you mean by a map? Is it an image?
Can you please clarify?
Regards,
Sara

0 Vote Up Vote Down
Andrea Rondini answered 5 years ago

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 

0 Vote Up Vote Down
Sara Santos Staff answered 5 years ago

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

0 Vote Up Vote Down
Andrea Rondini answered 5 years ago

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?

0 Vote Up Vote Down
Andrea Rondini answered 5 years ago

If I open localhost:1880/MAP I see a page with this error:

Cannot GET /MAP
0 Vote Up Vote Down
Sara Santos Staff answered 5 years ago

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

0 Vote Up Vote Down
Andrea Rondini answered 5 years ago

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.

0 Vote Up Vote Down
Sara Santos Staff answered 5 years ago

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

Primary Sidebar

Login to Ask or Answer Questions

This Forum is private and it’s only available for members enrolled in our Courses.

Login »

Latest Course Updates

  • [eBook Updated] Learn Raspberry Pi Pico/Pico W with MicroPython eBook – Version 1.2 May 26, 2025
  • [New Edition] Build ESP32-CAM Projects eBook – 2nd Edition April 16, 2025

You must be logged in to view this content.

Contact Support - Refunds - Privacy - Terms - MakerAdvisor.com - Member Login

Copyright © 2013-2025 · RandomNerdTutorials.com · All Rights Reserved

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.