# Worldmap - uibuilder pairing

**URL:** <https://discourse.nodered.org/t/worldmap-uibuilder-pairing/46330>\
**Category:** General\
**Created:** [27 May 2021 10:22 UTC](https://discourse.nodered.org/t/worldmap-uibuilder-pairing/46330 "2021-05-27T10:22:32Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![yalinsayi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yalinsayi/32/6127_2.png) [@yalinsayi](https://discourse.nodered.org/u/yalinsayi)\
**Post date:** [27 May 2021 10:22 UTC](https://discourse.nodered.org/t/worldmap-uibuilder-pairing/46330/1 "2021-05-27T10:22:32Z")

</div>

Hello,

I have an interface built with uibuilder (vue + vuetify). In it I have an embedded worldmap with iframe. In my app i will have multiple concurrent users. I want uibuilder and worldmap in the same browser instance to communicate with each other through node-red. I also have events originated from node-red, i want to pass them to both.

worldmap has `_sessionid`, uibuilder has `_socketId` to identify their instances, what's the best practice of pairing them.

Thanks.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [27 May 2021 21:12 UTC](https://discourse.nodered.org/t/worldmap-uibuilder-pairing/46330/2 "2021-05-27T21:12:18Z")

</div>

The use of iFrame's is fraught with issues at the best of times, I couldn't really predict what happens when you mix them with websockets.

Also, I don't know how Dave's worldmap arranges its comms, possibly using raw websockets rather than [Socket.IO](http://Socket.IO) which is what uibuilder and Dashboard use.

uibuilder's \_socketId is a [Socket.IO](http://Socket.IO) thing, [Socket.IO](http://Socket.IO) uses it to send a msg to a specific browser tab, the id is reset if you reload the tab so it really isn't terribly reliable. If you want to have a more reliable way of tracking a specific session, you need to add something more robust.

I've really not looked at the code for Worldmap so I don't know how it works other than I believe that it uses the LeafletJS library. You might therefore want to have a look around to see if there are any VueJS wrappers for Leaflet, I imagine there would be. Sensibly, you would then code up your page to use the same msg format as Worldmap and it could then be published as an extension to uibuilder.

A quick look at the worldmap code shows that it is using sockjs for websocket comms. It would also seem that worldmap is tied into Dashboard. but uses its own comms channel.

---

<div class="post-metadata">

**Author:** ![yalinsayi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yalinsayi/32/6127_2.png) [@yalinsayi](https://discourse.nodered.org/u/yalinsayi)\
**Post date:** [29 May 2021 08:08 UTC](https://discourse.nodered.org/t/worldmap-uibuilder-pairing/46330/3 "2021-05-29T08:08:10Z")

</div>

Thanks for your reply Julian,

I'll try the Dashboard plugin.

---

<div class="post-metadata">

**Author:** ![janvda](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/janvda/32/234_2.png) [@janvda](https://discourse.nodered.org/u/janvda)\
**Post date:** [29 May 2021 09:10 UTC](https://discourse.nodered.org/t/worldmap-uibuilder-pairing/46330/4 "2021-05-29T09:10:21Z")

</div>

> [@TotallyInformation](#):
>
> It would also seem that worldmap is tied into Dashboard. but uses its own comms channel.

I don't think that is completely true. There are 2 nodes `worldmap` and `ui_worldmap` that are capable of drawing a map and I think that only the latter node requires dashboard. Correct me if I am wrong @dceejay

---

<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 May 2021 10:09 UTC](https://discourse.nodered.org/t/worldmap-uibuilder-pairing/46330/5 "2021-05-29T10:09:27Z")

</div>

Correct - the ui one is just a wrapper around the other to help embed it in the node-red-dashboard. They "both" use sockjs as the transport.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [29 May 2021 14:20 UTC](https://discourse.nodered.org/t/worldmap-uibuilder-pairing/46330/6 "2021-05-29T14:20:39Z")

</div>

I looked at the code before my comment and it did seem to reference some Dashboard-like variables is all.

---

<div class="post-metadata">

**Author:** ![yalinsayi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yalinsayi/32/6127_2.png) [@yalinsayi](https://discourse.nodered.org/u/yalinsayi)\
**Post date:** [29 May 2021 17:28 UTC](https://discourse.nodered.org/t/worldmap-uibuilder-pairing/46330/7 "2021-05-29T17:28:42Z")

</div>

@dceejay i couldn't find ui\_worldmap node in NR palette. In management tab its shown faded.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/2/223c9c70d353bb5b6fede3a3fe4202c0f6109a6a.png)  
worldmap and dashboard are in their latest versions.

my node red is at v1.2.9, may be that's the problem. i will try again after NR update.

---

<div class="post-metadata">

**Author:** ![yalinsayi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yalinsayi/32/6127_2.png) [@yalinsayi](https://discourse.nodered.org/u/yalinsayi)\
**Post date:** [29 May 2021 18:03 UTC](https://discourse.nodered.org/t/worldmap-uibuilder-pairing/46330/8 "2021-05-29T18:03:46Z")

</div>

nope, i upgrade node-red to v1.3.5, ui\_worldmap is still unavailable. how can i enable it ?

---

<div class="post-metadata">

**Author:** ![janvda](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/janvda/32/234_2.png) [@janvda](https://discourse.nodered.org/u/janvda)\
**Post date:** [30 May 2021 06:11 UTC](https://discourse.nodered.org/t/worldmap-uibuilder-pairing/46330/9 "2021-05-30T06:11:22Z")

</div>

Did you also install node-red-dashboard ? That is a prerequisite if you want to use ui\_worldmap.

---

<div class="post-metadata">

**Author:** ![yalinsayi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yalinsayi/32/6127_2.png) [@yalinsayi](https://discourse.nodered.org/u/yalinsayi)\
**Post date:** [1 June 2021 10:28 UTC](https://discourse.nodered.org/t/worldmap-uibuilder-pairing/46330/10 "2021-06-01T10:28:35Z")

</div>

yes it's installed.

---

<div class="post-metadata">

**Author:** ![janvda](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/janvda/32/234_2.png) [@janvda](https://discourse.nodered.org/u/janvda)\
**Post date:** [1 June 2021 19:25 UTC](https://discourse.nodered.org/t/worldmap-uibuilder-pairing/46330/11 "2021-06-01T19:25:15Z")

</div>

Maybe you need to first install dashboard and then worldmap node. If you didn’t do that you can try uninstalling the worldmap and reinstalling it.

---

<div class="post-metadata">

**Author:** ![yalinsayi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yalinsayi/32/6127_2.png) [@yalinsayi](https://discourse.nodered.org/u/yalinsayi)\
**Post date:** [15 June 2021 14:38 UTC](https://discourse.nodered.org/t/worldmap-uibuilder-pairing/46330/12 "2021-06-15T14:38:46Z")

</div>

I solved it, i'm putting here for future reference:

i discovered that worldmap accepts url parameters. so,

1. when uibuilder client receives "client connect" control message containing uibuilders `_socketId` from server it creates the worlmap iframe with `_socketId` as a parameter.
2. when worldmap iframe created it sends "connected" message to node-red.
3. node-red receives "connected" message and parameter containing uibuilders `_socketId` and worldmaps `_sessionid`
4. node-red sends the `_sessionid` of worldmap to the uibuilder instance specified by `_socketId` received as worldmap parameter.
5. uibuilder instance receives message containing worldmaps `session id`. sets in a variable.
6. node red can create utility functions in worldmap instance with uibuilder `_socketId` as a parameter
7. hence uibuilder and worldmap instances in the same browser window "knows" eachother.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [15 June 2021 15:34 UTC](https://discourse.nodered.org/t/worldmap-uibuilder-pairing/46330/13 "2021-06-15T15:34:38Z")

</div>

Nice, well done.

---

<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 June 2021 15:35 UTC](https://discourse.nodered.org/t/worldmap-uibuilder-pairing/46330/14 "2021-06-29T15:35:05Z")

</div>

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