# Can I use the Worldmap nodes with UIBUILDER? (Yes)
**URL:** https://discourse.nodered.org/t/can-i-use-the-worldmap-nodes-with-uibuilder-yes/87890
**Category:** FAQs
**Tags:** uibuilder
**Created:** [12 May 2024 10:11 UTC](https://discourse.nodered.org/t/can-i-use-the-worldmap-nodes-with-uibuilder-yes/87890 "2024-05-12T10:11:05Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [12 May 2024 10:11 UTC](https://discourse.nodered.org/t/can-i-use-the-worldmap-nodes-with-uibuilder-yes/87890/1 "2024-05-12T10:11:05Z")
Question: Is it possible to use the [node-red-contrib-web-worldmap](https://flows.nodered.org/node/node-red-contrib-web-worldmap) nodes with UIBUILDER?
Short answer: Yes, absolutely.
* * *
If you are using a default Node-RED/UIBUILDER configuration, all you need to do is add the following line to your `index.html` file:
```auto
```
If you have changed the map url away from the default, simply change the `src` attribute accordingly. Note the use of a relative URL here which saves you having to worry about the exact URL. If, however, you are using UIBUILDER's custom ExpressJS web server feature, you would need to use a more complete URL.
By default, the iframe will be quite small so you will want to adjust the sizing. To get something that fills the page when using the UIBUILDER default brand css, try something like this added to your `index.css` file:
```auto
.worldmap {
width:100%;
height: calc(100vh - 10rem);
}
```
Note the use of a calculated height here. `100vh` is the full height of the browser window. We take off `10rem` (rem is the measure of the default page font). So simply adjust the subtracted number to fit your page layout.
The only node in the collection you wont need is the `ui_woldmap` node of course since nothing special is needed to use the map with UIBUILDER. 🙂
Worldmap uses its own websocket connection separate to UIBUILDER's and all features work as expected. If you are getting odd results, check out your browser console as some features may trigger cross-domain restrictions (CORS), this is not a UIBUILDER issue.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [12 May 2024 10:34 UTC](https://discourse.nodered.org/t/can-i-use-the-worldmap-nodes-with-uibuilder-yes/87890/2 "2024-05-12T10:34:08Z")
By the way, using the [LeafletJS](https://leafletjs.com) library directly (this is the same library that worldmap uses) is not really much harder since UIBUILDER already provides comms between Node-RED and the browser.
Add the leaflet js library and css to your page, add a div with an id="map" (so you can use leaflet's examples). Then add the example code from their website.
To send a user click on the map back to Node-RED:
```auto
function onMapClick(e) {
// console.log('leaflet click', e)
uibuilder.send({topic: 'leaflet click', payload: e.latlng})
}
```
That's it!
Now you can build your own map apps 😀
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [11 June 2024 10:11 UTC](https://discourse.nodered.org/t/can-i-use-the-worldmap-nodes-with-uibuilder-yes/87890/3 "2024-06-11T10:11:15Z")
This topic was automatically closed after 30 days. New replies are no longer allowed.