WordMap marker popup open=visible?

PizzaProgram · 8 April 2026 09:21

I'm trying to create a pizza-delivery map, where 1 or multiple addresses would be selectable.
(Multi-select mode would be activated by a user-button.)

If the user clicks a marker:

the popup window shows,
we get a nice notification from the click event,

but there is no way to know, if the marker is currently "selected" or not?
(So is the popup currently visible or not.)
Also, the popup panel can be closed with the "X" icon of it's top-right corner, which gives no event notification from wordmap-in node at all.

Has anybody any idea, how should I handle "selections" on WordMap?

(Worst case dropping popups and switching to context (right click) panels...)

PS: an other problem with those popup panels that they are not semi-transparent, and hiding everything beneath...

PizzaProgram · 8 April 2026 09:45

ChatGPT gave me ^link 3 choices:

Use label instead of popup.

Well, I'm already using them for the most important infos,
the popup gives all the other infos, which would not fit on a small label. (The full address, which delivery boy takes it, etc.)
And a big label would hide all the other markers permanently.

So this is not a good way.

PS: ... thinking about the other recommendations, (3. + Advanced) but using HTML + JS is not easy for me. (I'm mainly a Pascal developer with medium JS knowledge only.)

dceejay · 8 April 2026 11:55

If you click it then the pop up should still be open. But yes there is no close event so you can’t tell if it has been closed. I can look to add one but it won’t be for a couple of weeks.

Not sure about transparency. If you end up with overlapping popups then they will get had to read very quickly.

PizzaProgram · 8 April 2026 14:34

I don't think it will be necessary. Currently investigating the possibility to move the whole thing from popup to -> context menu (right click).

I agree. I'll leave it to the user to close them, if they are in the way.
(Maybe will add a global button to close all of the at once forcibly.)

About "selected":

I think I will manipulate the COLOUR of the marker.
On click event I get the actual colour via msg back, also I'm storing all data in a map() too.

Need to investigate:

do I get any response from right click back? (context)

PizzaProgram · 24 April 2026 21:21

Found +1 bug around popup:

Uncaught TypeError: can't access property "getContent", marker.getPopup() is undefined

Line: 2277

marker.on('dragend', function (e) {
    var l = marker.getLatLng().toString().replace('LatLng(','lat, lon : ').replace(')','')
    marker.setPopupContent(marker.getPopup().getContent().split("lat, lon")[0] + l);

It happens at 'dragend', when the marker has a popup.

PizzaProgram · 25 April 2026 01:25

After 16 hours of search + debugging I've found an other strange behaviour:

If "clickable" key presents in JSON, popup does not work any more!

(Even, if {"clickable": true, ...} !)

Example to test with:

[
    {
        "name": "Popped",
        "layer": "LAY",
        "draggable": false,
        "lat": 47.58103955629886,
        "lon": 18.400929650256415,
        "icon": "circle",
        "iconColor": "#9100F0",
        "popup": "Head<br>multiline ",
        "popped": true,
        "label": "009 - 11:12<br>SzamSorkert"
    },
    {
        "name": "PopError",
        "layer": "LAY",
        "draggable": false,
        "lat": 47.57103955629886,
        "lon": 18.400929650256415,
        "icon": "circle",
        "iconColor": "#0100F0",
        "popup": "Head<br>multiline ",
        "label": "001 - 13:59<br>Pizza",
        "popped": true,
        "clickable": true,
        "contextmenu": "test3"
    }
]

PizzaProgram · 25 April 2026 01:45

Maybe I'm wrong, but this is strange:

Why is data.hasOwnProperty("clickable") undefined, when it is not?

Also there are many other places where the same thing happens.

Edit:

My fix based on ChatGPT suggestions:

if ( ! ("clickable" in data) || (data.clickable === true)) { ...

Edit2 : (better)

This will give true, even if "clickable" key does not exist:

if ( data.clickable !== false) { ...

Test yourself:

[{"id":"95568156ea88244c","type":"function","z":"a88b58905bd7ee66","name":"function 1","func":"let k = {};\nif ((! Object.hasOwn(k, \"clickable\")) || (data.clickable === true)) node.warn(\"1 OK\");\n\nif (k.clickable !== false) node.warn(\"2 OK\");\n\nreturn null;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":620,"y":100,"wires":[["e21d6c6b952e75fd"]]},{"id":"03611e0de4421d2a","type":"inject","z":"a88b58905bd7ee66","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":490,"y":100,"wires":[["95568156ea88244c"]]},{"id":"e21d6c6b952e75fd","type":"debug","z":"a88b58905bd7ee66","name":"debug 2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":800,"y":100,"wires":[]}]

@dceejay Please remember:

to check all 18 occurrences of the word clickable, to fix similar errors everywhere in your code!
For example: (Line 1692)

opt.clickable = (data.hasOwnProperty("clickable")) ? data.clickable : false;

should be: ... ? data.clickable : true; !! (Default true.)
Even better (simpler + faster) :

opt.clickable = (data.clickable !== false);

PizzaProgram · 25 April 2026 14:19

This code is a bit dirty too, starting at Line 2374 :

    var p;
    if (data.hasOwnProperty("popped") && (data.popped === true)) {
        p = true;
        delete data.popped;
    }
    if (data.hasOwnProperty("popped") && (data.popped === false)) {
        marker.closePopup();
        p = false;
        delete data.popped;
    }
...
    if (p === true) { marker.openPopup(); }

Because if data.popped key does not exists, p will be uninitialised!
Also: Why deleting that value?

dceejay · 25 April 2026 16:19

I can't seem to replicate the one about drag end - do you have an example ?

dceejay · 25 April 2026 16:20

Ah yes - better fix is
line 2432 if (!data.hasOwnProperty("clickable") || data.clickable == true) {

dceejay · 25 April 2026 16:27

Yes the initial declaration should probably be var p = false; but I need to think about what the intention was...
We delete any properties that cause actions or are represented in other ways - as all the remaining ones are added to the default popup around line 2443.

PizzaProgram · 26 April 2026 02:18

That's bad, because this way it not possible to determine, whether I have already popped it, or not. (To create an up/down effect, or "all up/down")

I have fixed every error I've found so far, tested 2 hour long and no other errors found.
You can download it from here ... Please overwrite your own with this!

fixed:

heatmap error
popup inconsistencies
popped
clickable
speed optimisations

The only tiny problem with it, is still:

if popped from code, but popup is closed with the X at the corner, than msg.payload.popup is showing the wrong state
So the user has to click 2x the next time, to force-show popup again.

But this problem is still much smaller than any other cases!

Added a new command:

To be able to disable right-click "Add marker" context menu: {"command":{"disableaddmarker":true}} (default false) Similar to hiderightclick, but this command still allows marker's context menus.

In long therm I'd like to see an implementations where:
"clickable" should :

not just disable the popup, but also the "click" event!
and to disable popup only, a new property should be introduced: "popupDisabled" (default false)

PizzaProgram · 26 April 2026 02:41

I'd like to ask You 4 things:

Please release my version as v5.7.0 (not 5.6.x ! ) because it is a major fix.
( I don't need any credit for my work, just please keep my code the way it is, do not "half-copy" my solutions, like last time! )
Please put more comments into your code !
It is very hard to understand your intentions and find bugs this way.
Nobody cares, if the whole code is 3500 or 3700 lines long, but it is much easier to find a part, if it properly divided. Like:

// *************************
// ** Put text here ...   **
// *************************
var rclk = {};
...

Change help to ...

hiderightclick - disables the right click that allows adding or deleting points on the map. Also disables context menu of all markers. - {"command":{"hiderightclick":true}}
Add after this:

disableaddmarker - does not allow right-click "Add marker" context menu on map: {"command":{"disableaddmarker":true}} (default false). Similar to hiderightclick, but this command still allows marker's context menus.

Thank You very much in forward!

dceejay · 26 April 2026 08:43

As I said - I'm adding events for openPopup and closePopup so you can determine that

That's not how it works - please can you create Pull Requests against the project here Pull requests · dceejay/RedMap · GitHub (Ideally having created and Issue first) - and please separate them into individual Pull Requests - IE - one for each enhancement and one for fixes as I believe I have already fixed some of them.

Also this is the first I recall of "speed optimisations" ? what are they ? (separate PR please)

Where are you seeing that state ? If you send it again it should re-open - and once I send the events you will know what state it is in.

Re new commands - currently setting clickable does already disable the click event, and setting contextmenu to "" disables the right context menu - but yes separate PRs for these please

- yes - will try to do better moving forwards

Latest changes are in Master but not re-published yet.

PizzaProgram · 26 April 2026 10:29

Done:
https://github.com/dceejay/RedMap/pull/318

PizzaProgram · 26 April 2026 11:04

That's great! Please auto set .popped to the right state =true/false of the object at the same time. (Even if nobody calls these new events from NodeRed.)

Since I have removed the "delete lines" from your code, I can see the last state, and manually set reversed state, if the situation requires it. I have full control now!
For example:

if ( ! ManualPopupCurrentlyDisallowedHere) {
  msg.payload.clickable = false;
  msg.payload.popped = ! msg.payload.popped;
}

Deleting the whole (sometimes very complex) popup text just to disable the popup is nonsence. Also I have to know, if the popup was open or not, when they right-click (opening the context menu), so I can interact differently!

So yes, knowing the state of the popped is necessary. Do not delete!

OFF

Pizza delivery boys are usually not "university educated iT professionals" (to put it mildly...)
So I have to create a very automated + simplified user interface for them, check every move they make and do counter-interactions, so they do less mistakes.
If you think, they can not "break a 1-button app", you are wrong!

dceejay · 26 April 2026 20:06

Discussion moved to PR - add "disableaddmarker"; fix popped+clickable+ heat by PizzaProgram · Pull Request #318 · dceejay/RedMap · GitHub

PizzaProgram · 1 May 2026 20:17

@dceejay You were right:

msg.payload = { 
    "command" : { "contextmenu": "" }
}

This one works, it will disable the map's context menu.
So my solution: {"command":{"disableaddmarker":true}} is not necessary at all.

< off >
I remember I've tried this, but it did not work. Probably I've made a mistake by adding the key under "map" branch when I've tested it first.

msg.payload = { 
    "command" : {"map": {  "contextmenu": "" }} // WRONG !!
}

Topic		Replies	Views
Node-RED Worldmap Popup's requiring right click for button to function Dashboard	12	1532	1 September 2021
Worldmap dashboard - no mouse click events Dashboard	22	1563	21 February 2021
I get click events for markers but not for circles etc. in node-red-contrib-web-worldmap General	8	313	18 March 2023
Worldmap - Working with Markers example Share Your Projects	3	2030	3 April 2021
Node-red world map zoom and marking General node-red-dashboard	20	1422	16 November 2021