Can I use the Worldmap nodes with UIBUILDER? (Yes)

[TotallyInformation]

Question: Is it possible to use the 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:

<iframe src="../worldmap/" class="worldmap"></iframe>

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:

.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.

[TotallyInformation]

By the way, using the LeafletJS 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:

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