# Unable to show multiple locations on worldmap

**URL:** <https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652>\
**Category:** Developing Nodes\
**Created:** [9 September 2020 16:42 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652 "2020-09-09T16:42:05Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![morry239](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@morry239](https://discourse.nodered.org/u/morry239)\
**Post date:** [9 September 2020 16:42 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/1 "2020-09-09T16:42:05Z")

</div>

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](https://flows.nodered.org/flow/5d2c9fa71b249b21d3c377087dd5b395)

And the node that I tried to replicate:

![node](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/6/36cacc9b174540fd88b563a65af169f78c8c46f2.png)

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.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [9 September 2020 17:59 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/2 "2020-09-09T17:59:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![morry239](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@morry239](https://discourse.nodered.org/u/morry239)\
**Post date:** [10 September 2020 12:17 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/3 "2020-09-10T12:17:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [10 September 2020 13:05 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/4 "2020-09-10T13:05:32Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![morry239](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@morry239](https://discourse.nodered.org/u/morry239)\
**Post date:** [17 September 2020 13:31 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/5 "2020-09-17T13:31:32Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [17 September 2020 15:08 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/6 "2020-09-17T15:08:15Z")

</div>

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

```auto
{ 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

```auto
[ 
  { 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.

---

<div class="post-metadata">

**Author:** ![morry239](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@morry239](https://discourse.nodered.org/u/morry239)\
**Post date:** [22 September 2020 14:00 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/7 "2020-09-22T14:00:46Z")

</div>

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:

 ![node](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/5/d59b0ebefb24434aedb2e2fa9d33e757fb6b737a.png)  
 ![functionnode](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/c/2c77b7a6de73e0bb8aad1bab55cf99db25cee04c.png)

Could you kindly point out what went wrong here?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [22 September 2020 15:03 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/8 "2020-09-22T15:03:03Z")

</div>

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

```auto
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;

```

---

<div class="post-metadata">

**Author:** ![morry239](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@morry239](https://discourse.nodered.org/u/morry239)\
**Post date:** [28 September 2020 07:37 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/9 "2020-09-28T07:37:16Z")

</div>

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.

 ![functionnode](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/6/46565a3e2c4cdc7828293e79431b091244d40e20.png) ![json](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/6/f6ec5ebebfdb37fdd79d84c1ad14b4c016f03e74.png)

And a video for my Nodes

> **[zoom\_0.mp4 (video)](https://drive.google.com/file/d/1bWqpyqPmu4cXSmkZUPx8Q2YEg4vhZTL6/view?usp=sharing%5C)**
>
> Google Drive file.

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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [28 September 2020 08:13 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/10 "2020-09-28T08:13:53Z")

</div>

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

```auto
[{"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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/e/9e92f2dc5d0fffaab58a3ae84137f97a85bc1992.jpeg)

---

<div class="post-metadata">

**Author:** ![morry239](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@morry239](https://discourse.nodered.org/u/morry239)\
**Post date:** [28 September 2020 09:35 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/11 "2020-09-28T09:35:55Z")

</div>

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](https://aka.ms/ghei36)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [28 September 2020 09:40 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/12 "2020-09-28T09:40:47Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/91cb058e1d39793ed6ff29da6df5a40cfffd7f9e.png)  
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...

---

<div class="post-metadata">

**Author:** ![morry239](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@morry239](https://discourse.nodered.org/u/morry239)\
**Post date:** [28 September 2020 14:24 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/13 "2020-09-28T14:24:15Z")

</div>

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

 ![node-red-madeit](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/8/3834d3ee0db134ca396241880ba3e3c5b6e1379d.png)

---

<div class="post-metadata">

**Author:** ![morry239](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@morry239](https://discourse.nodered.org/u/morry239)\
**Post date:** [29 September 2020 21:43 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/14 "2020-09-29T21:43:29Z")

</div>

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:

 ![no markers on iframe](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/6/66315923d4cb919fa5392b52fca90e0e3b85ea55.png)

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:

```auto
<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?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [29 September 2020 22:03 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/15 "2020-09-29T22:03:59Z")

</div>

Does it show as being connected to the worldmap node.

---

<div class="post-metadata">

**Author:** ![morry239](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@morry239](https://discourse.nodered.org/u/morry239)\
**Post date:** [30 September 2020 06:43 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/16 "2020-09-30T06:43:20Z")

</div>

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?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/91cb058e1d39793ed6ff29da6df5a40cfffd7f9e.png)

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [30 September 2020 07:03 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/17 "2020-09-30T07:03:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![morry239](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@morry239](https://discourse.nodered.org/u/morry239)\
**Post date:** [30 September 2020 07:19 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/18 "2020-09-30T07:19:08Z")

</div>

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.

 ![FUNZIONAMAGNIFICO](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/7/c7cb815e3e85a1eb2c3fa2856383d90cf8ee2e90.png)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [30 September 2020 08:19 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/19 "2020-09-30T08:19:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [29 November 2020 08:19 UTC](https://discourse.nodered.org/t/unable-to-show-multiple-locations-on-worldmap/32652/20 "2020-11-29T08:19:09Z")

</div>

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