Unable to show multiple locations on worldmap

[morry239]

Sorry if this has been asked a thousand times. I've tried to replicate the following node myself, but it didn't work out as I have expected. The source code that I pasted into my function node is here:

https://flows.nodered.org/flow/5d2c9fa71b249b21d3c377087dd5b395

And the node that I tried to replicate:

The Mqtt node still displays "connecting" and the worldmap only displays one marker which is my current location. It was supposed to display a bunch of markers in Helsinki, Finland.

I might have pasted the source code into a wrong place. I'm still a newbie here, any assistance much appreciated.

[dceejay]

I would guess the first thing to check is if the data source you are trying to connect to is still alive and working or needs credentials. The connecting status would indicate that it isn’t.

[morry239]

Alright, it would be easier for me to just get an alive data source from the other nodes shared in this community.

[dceejay]

I have just tried that flow and for me it does connect up OK... but still no data arrives - so I guess what ever was creating the data is no longer doing so.

What are you actually trying to do ? What markers are you trying to add ? Where is the data you want to visualise ?

[morry239]

I was trying to create a map where people can find hospitals to get tested for COVID as part of my school project. My teacher recommended me to combine iframe with Node-red's worldmap so visitors to my website can check COVID test center locations from the iframe window there. That's why I needed to show multiple markers (the red location markers = test center) on my worldmap. I've tried so hard to make it happen in the last few weeks without any success. My worldmap only shows me a single location.

I'm not good at extracting lat and lon from Google maps so I don't have test center location data to visualise yet. Maybe could anyone give me a heads up on collecting lat and lon from Google?

[dceejay]

You should just need to send either several messages - each with a different name eg

{ name:"Place 1", lat:51, lon:-1, icon:"fa-plus-square" }
then send
{ name:"Place 2", lat:51, lon:-1.5, icon:"fa-plus-square" }

etc or they can be combined as one array like

[ 
  { name:"Place 1", lat:51, lon:-1, icon:"fa-plus-square" },
  { name:"Place 2", lat:51, lon:-1.5, icon:"fa-plus-square" }
]

and sent as one msg.payload.

Easiest way is to right click on the map and select "What's here?" that will open a small window with the lat lon in. If you click on that it will open a left side bar with the same info - but you can then cut and paste it from there more easily.

[morry239]

Thanks for the detailed instructions! I just used the below source code to display multiple locations, but my worldmap doesn't display any location markers.
[
{ name:"Place 1", lat:51, lon:-1, icon:"fa-plus-square" },
{ name:"Place 2", lat:51, lon:-1.5, icon:"fa-plus-square" }
]

My node flow and function node are as follows:

Could you kindly point out what went wrong here?

[dceejay]

not sure what the json node is doing ?
the function node needs to return a msg.payload so needs to be

msg.payload  = [
    { name:"Place 1", lat:51, lon:-1, icon:"fa-plus-square" },
    { name:"Place 2", lat:51, lon:-1.5, icon:"fa-plus-square" }
]
return msg;

[morry239]

I just copied and pasted your code into the function node and changed the lat and lon accordingly. The same for the JSON node too. But still, the worldmap doesn't display any red markers.

And a video for my Nodes

zoom_0.mp4 (video)

I still don't know what went wrong....

[dceejay]

I can't guess your flow but this simple one works for me

[{"id":"aef253d1.95439","type":"inject","z":"756b4095.9a6c9","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":130,"y":100,"wires":[["a03c1e3.0c260e"]]},{"id":"a03c1e3.0c260e","type":"function","z":"756b4095.9a6c9","name":"","func":"msg.payload = [\n    {name:\"Place1\", lat:53.633762, lon:9.997434, icon:\"fa-plus-square\"},\n    {name:\"Place2\", lat:50.038284, lon:8.560060, icon:\"fa-plus-square\"}\n]\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":310,"y":100,"wires":[["8c4b2395.4ec2"]]},{"id":"8c4b2395.4ec2","type":"worldmap","z":"756b4095.9a6c9","name":"","lat":"52","lon":"9","zoom":"6","layer":"","cluster":"","maxage":"","usermenu":"show","layers":"show","panit":"false","panlock":"false","zoomlock":"false","hiderightclick":"false","coords":"none","showgrid":"false","path":"/worldmap","x":500,"y":100,"wires":[]}]

giving

[morry239]

Ok thanks for the flow. Shall I paste this into the code file under the "function" tab? The "function" node has three tabs (set , function etc) and each tab has a code line to fill in. I am always wondering in which tab I should fill my codes in.

Holen Sie sich Outlook für Android

[dceejay]

just import the complete flow into the editor - menu - import - clipboard... should give you three nodes like this

deploy - and then open a browser to map... - then on the editor when it says connected under the worldmap - click the inject - then go back to the map...

[morry239]

Thanks a lot - I finally got to show multiple locations here on worldmap. Appreciate it!

[morry239]

May I ask one more question?

I am trying to embed this worldmap with iframe so I can check out all the flight markers via iframe. But I only see the empty world map like here:

On the original node-red world map it does display all the markers, but the worldmap embedded in the iframe doesn't. The source code I used for this HTML website was as follows:

<body>

    <h1>PCR test center locater</h1>
    <h2>Find your nearest test center in Germany</h2>

    <p>
        Now it's time to travel again, but your destination requires you to present a coronavirus test certificate?
        And you want to know where you can get tested and you need to depart in a few days? 
    </p>

    <p class="class_name">
        Don't worry - just click the test center maps below. Alternatively, you can find the test centers embedded below!
    </p>
<iframe src="http://192.168.178.26:1880/worldmap/" width="600" height="400" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
    <p></p>

    <p>
        <img src="image.jpg" width="600px" height="300px">
    </p>

Any advice?

[dceejay]

Does it show as being connected to the worldmap node.

[morry239]

No it doesn't. It only shows the worldmap without any markers or being connected to the node red.

Shall I add other nodes into the below flow or shall I correct the source code below?

<h2>Find your nearest test center in Germany</h2>

    <p>
        Now it's time to travel again, but your destination requires you to present a coronavirus test certificate?
        And you want to know where you can get tested and you need to depart in a few days? 
    </p>

    <p class="class_name">
        Don't worry - just click the test center maps below. Alternatively, you can find the test centers embedded below!
    </p>
<iframe src="http://192.168.178.26:1880/worldmap/" width="600" height="400" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
    <p></p>

    <p>
        <img src="image.jpg" width="600px" height="300px">
    </p>

[dceejay]

Well that shows it is connected. Or at least one browser is. What happens if you now hit the inject again ?

[morry239]

I hit the inject once again and it worked! Now my world map shows all the red markers in iframe. Thank you very much again for the advice.

[dceejay]

you can use the worldmap in node to detect when a new browser connects - and get it to send the same as the inject - so it would connect automatically.