# Alert / Toast on Worldmap (with timeout)

**URL:** <https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876>\
**Category:** General\
**Tags:** node-red-contrib-web-worldmap\
**Created:** [30 April 2026 12:21 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876 "2026-04-30T12:21:15Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![PizzaProgram](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pizzaprogram/32/19431_2.png) [@PizzaProgram](https://discourse.nodered.org/u/PizzaProgram)\
**Post date:** [30 April 2026 12:21 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/1 "2026-04-30T12:21:15Z")

</div>

I wonder, if it would be possible to show a "toast" popup message on top of [WorldMap](https://www.npmjs.com/package/node-red-contrib-web-worldmap) ?  
Would be nice, if it would support:

- multi line,
- choosable _(at least background-)_ colour,
- timeout _(seconds)_,
- set to be user-closable only.

_Optionally:_

- Settable to close it on 1 browser window only, so it would auto-close on all other clients.
- Would be able to handle multiple alerts, scrollable
  - so they do not overlap each other,
  - nor spam the whole screen vertically.

- Maybe prioritise (critical / alert / info / debug)

[ChatGPT gave me](https://chatgpt.com/share/69f348a6-9768-8326-b6bc-9d40836c1722) some "ready to use" solution, which (of course) has nothing to do with reality, because WorldMap module has no such functions as:

```js
msg.payload = {
    command: {
        alert: "GPS not found!"
    }
};

```

### nor :

```js
msg.payload = {
    command: {
        javascript: `
(function() { ...

```

---

<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 April 2026 16:36 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/2 "2026-04-30T16:36:54Z")

</div>

Well if you embed worldmap inside your own web page as an iframe (eg using dashboard2) then you have control of the rest of the page and can probably popup whatever you like.

---

<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:** [30 April 2026 16:38 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/3 "2026-04-30T16:38:21Z")

</div>

> [@dceejay](#):
>
> embed worldmap inside your own web page as an iframe (eg using dashboard2) then you have control of the rest of the page

Or UIBUILDER of course! Where you really do get full control. 😉

---

<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 April 2026 16:39 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/4 "2026-04-30T16:39:14Z")

</div>

I don't think I mentioned his name three times did I ?

---

<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:** [30 April 2026 16:40 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/5 "2026-04-30T16:40:25Z")

</div>

> [@dceejay](#):
>
> I don't think I mentioned his name three times did I

No need: I lurk, therefore I am!

---

<div class="post-metadata">

**Author:** ![PizzaProgram](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pizzaprogram/32/19431_2.png) [@PizzaProgram](https://discourse.nodered.org/u/PizzaProgram)\
**Post date:** [1 May 2026 08:54 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/6 "2026-05-01T08:54:25Z")

</div>

## \< OFF \>

I have always followed your progress about DashBoard2.  
Also watched the [how-to-first-steps](https://discourse.nodered.org/t/uibuilder-new-release-v7-6-1-bug-fix-introducing-markweb-and-other-enhancements/100813/14) video last week.  
This is an amazing piece of module, and one day I'll have to **start** learning it, how to use it,  
but at first view it is too complicated for my basic knowledge about html + css.

@TotallyInformation it is **not** Your fault, but mine because I'm not a web-developer and seeing the "default template" made me realise: it's an overkill for what I need and that learning process about the whole thing would probably take month if not years to understand how everything works.

I'm also afraid that it would make an extra overhead to the browser, _(more memory + CPU consumption)_, which is not acceptable on a [POS](https://en.wikipedia.org/wiki/Point_of_sale) PC.  
_(Must be optimised to max 50ms respond time for the user, sometimes on a non-cooled, limited freq 6th gen CPU with 2GB RAM + Win7 running at 45+ °C environment.)_

---

<div class="post-metadata">

**Author:** ![PizzaProgram](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pizzaprogram/32/19431_2.png) [@PizzaProgram](https://discourse.nodered.org/u/PizzaProgram)\
**Post date:** [1 May 2026 08:56 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/7 "2026-05-01T08:56:57Z")

</div>

If there is no ready-to-use toast solution, I'll probably have to:

- change the code of `worldmap.js` itself
- and upload as a separate NPM to fit my needs.

_(That's what ChatGPT suggested too.)_

---

<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:** [1 May 2026 09:52 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/8 "2026-05-01T09:52:48Z")

</div>

> [@PizzaProgram](#):
>
> I'm not a web-developer and seeing the "default template" made me realise: it's an overkill for what I need and that learning process about the whole thing would probably take month if not years to understand how everything works.

No problem, that post wasn't aimed at anyone in particular. I just like to remind people that not everything is necessarily best in Dashboard and that there is a viable alternative for those who want it.

> [@PizzaProgram](#):
>
> I'm also afraid that it would make an extra overhead to the browser,

No, the opposite is true. UIBUILDER driven web sites use significantly LESS resource than Dashboard particularly in the browser while delivering a lot more flexibility. [This page](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/using/compare-d2) has some details.

Admittedly, I've not done direct comparison tests on the server-end but most use of UIBUILDER on the server has minimal impact. The new Markweb features may have a little more impact but only if you have many users using the web site; this is because conversion from Markdown to HTML happens on the server not in the browser. But for standard uibuilder nodes, there is some startup effort that adds a bunch of routes and endpoints to Node-RED's ExpressJS web server but, again, unless you have a lot of end-users hitting your resulting pages rapidly, the overheads should be minimal.

Dashboard 2, on the other hand, has to do a lot of data delivery to the front-end in order for anything to happen at all. In the browser, you have to load multiple heavy-duty libraries and the code as well as data for everything is passed from Node-RED to each client. Not a criticism of D2 by the way, just an observation.

Anyway, not a problem, you need to use whatever is best for you.

---

<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:** [1 May 2026 09:53 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/9 "2026-05-01T09:53:35Z")

</div>

I may be able to add some form of dialog as the basics are there for the help panel. But will be a while until I get some time and probably won’t easily styled apart from rewriting the css file

---

<div class="post-metadata">

**Author:** ![PizzaProgram](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pizzaprogram/32/19431_2.png) [@PizzaProgram](https://discourse.nodered.org/u/PizzaProgram)\
**Post date:** [1 May 2026 09:56 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/10 "2026-05-01T09:56:11Z")

</div>

Is it also difficult to allow to run `"command": {"js" : ...}` ?  
The map would run that JavaScript code, so we could do anything as we want.

---

<div class="post-metadata">

**Author:** ![PizzaProgram](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pizzaprogram/32/19431_2.png) [@PizzaProgram](https://discourse.nodered.org/u/PizzaProgram)\
**Post date:** [1 May 2026 10:10 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/11 "2026-05-01T10:10:36Z")

</div>

I've just found out:

- Leaflet has a ready-to-use [Map interaction plugin](https://leafletjs.com/plugins.html#user-interface) for toast messages: 🏆

[Leaflet.Notifications](https://gitlab.com/manuel.richter95/leaflet.notifications)  
Try [Demo](http://leaflet-notifications.manuel-ri.de/) \<\< here.

---

<div class="post-metadata">

**Author:** ![PizzaProgram](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pizzaprogram/32/19431_2.png) [@PizzaProgram](https://discourse.nodered.org/u/PizzaProgram)\
**Post date:** [1 May 2026 10:20 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/12 "2026-05-01T10:20:02Z")

</div>

Wow ... I've just realised the full potential of Leaflet by these plugins!

One I like the most is: [Leaflet.Control.Custom](https://github.com/yigityuce/Leaflet.Control.Custom) \> [Demo](https://yigityuce.github.io/Leaflet.Control.Custom/examples/index.html)  
It seems anything is possible with this.  
But this is cool too: [Leaflet.Dialog](https://nbtsolutions.github.io/Leaflet.Dialog/)

@dceejay Question:

- is it possible to directly operate with Leaflet ?
- something like: `"leaflet": {...}` ?
- or it would make no sense, because those plugins would need to be imported first anyway?

---

<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:** [1 May 2026 10:31 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/13 "2026-05-01T10:31:07Z")

</div>

No way am I going to allow random commands to run. Security nightmare

---

<div class="post-metadata">

**Author:** ![PizzaProgram](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pizzaprogram/32/19431_2.png) [@PizzaProgram](https://discourse.nodered.org/u/PizzaProgram)\
**Post date:** [1 May 2026 11:00 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/14 "2026-05-01T11:00:35Z")

</div>

> [@dceejay](#):
>
> Security nightmare

# \< OFF \>

Huhhh... I do not know what to say to that.

- I do not see any difference to, what you have suggested at the first place.  
_(wrapping WM to Dashboard and running ANY kind of JS / HTML etc insice DashB2)_
- If you are afraid of "extra problem support" that these unallowed scripts would cause, simply deny any help on those.
- Why would be a Leaflet pluging a problem, if millions of other people use it daily bases ?

We are the programmers, who write code into those nodes. So basically You are saying:

- WE ARE the security risk.

---

<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:** [1 May 2026 12:25 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/15 "2026-05-01T12:25:05Z")

</div>

1. correct. If you write a page to wrap it you can do what you want (and own any security issues)
2. correct. I’m avoiding them by saying no up front.
3. it’s not the plugins it’s the suggestion to allow full access to js

And re plugins. I have multiple built in already. Yes I could build in more. Just needs to be done in a controlled manner.

---

<div class="post-metadata">

**Author:** ![PizzaProgram](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pizzaprogram/32/19431_2.png) [@PizzaProgram](https://discourse.nodered.org/u/PizzaProgram)\
**Post date:** [2 May 2026 12:46 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/16 "2026-05-02T12:46:25Z")

</div>

_... just in case someone else finds this topic, and also for myself to remember:_

### There is a full detailed topic, how to use UIBUILDER + WorldMap in an `<iframe>` together:

> [@Can I use the Worldmap nodes with UIBUILDER? (Yes)](https://discourse.nodered.org/t/can-i-use-the-worldmap-nodes-with-uibuilder-yes/87890):
>
> 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: \<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…

---

<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:** [2 May 2026 15:12 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/17 "2026-05-02T15:12:33Z")

</div>

Along with a follow-up in that thread that covers using Leaflet directly which would allow you to easily connect Node-RED to a custom instance of Leaflet very easily.

> [@Can I use the Worldmap nodes with UIBUILDER? (Yes)](https://discourse.nodered.org/t/can-i-use-the-worldmap-nodes-with-uibuilder-yes/87890/2):
>
> 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: function onMapClick(e) { // console.log('leaflet click', e) uibuilder.send({topic: 'le…

---

<div class="post-metadata">

**Author:** ![PizzaProgram](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pizzaprogram/32/19431_2.png) [@PizzaProgram](https://discourse.nodered.org/u/PizzaProgram)\
**Post date:** [2 May 2026 15:19 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/18 "2026-05-02T15:19:22Z")

</div>

> [@TotallyInformation](#):
>
> Along with a follow-up in that thread that covers using Leaflet directly which would allow you to easily connect Node-RED to a custom instance of Leaflet very easily.

I'll wait a week to see, how @dceejay is going with implementing ❤ the toast (+ custom?) plugin of leaflet to Worldmap first. 🤞

If that's **not** going to happen, I'll have to **drop** worldmap, and start implementing the whole thing (your way) myself from scratch ... 😮‍💨

---

<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:** [6 May 2026 11:45 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/19 "2026-05-06T11:45:10Z")

</div>

Have now added a 'showdialog' command (in v5.7.0) that will let you show html in an overlay dialog box  
eg `{"command":{"showdialog": "<h1>Title</h1>Hello World"}}`

---

<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:** [4 August 2026 11:46 UTC](https://discourse.nodered.org/t/alert-toast-on-worldmap-with-timeout/100876/20 "2026-08-04T11:46:08Z")

</div>

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