# Worldmap dashboard - no mouse click events

**URL:** <https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234>\
**Category:** Dashboard\
**Created:** [18 February 2021 13:10 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234 "2021-02-18T13:10:56Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![rogerjames99](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogerjames99/32/25201_2.png) [@rogerjames99](https://discourse.nodered.org/u/rogerjames99)\
**Post date:** [18 February 2021 13:10 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/1 "2021-02-18T13:10:56Z")

</div>

Hi, the documentation for worldmap mentions "click" events. I just want to be informed when and where a mouse click is made on the map. I can see various events coming from the "worldmap in" node but no click events. What do I need to do to get them? All help gratefully received.

Thanks

Roger

---

<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:** [18 February 2021 17:33 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/2 "2021-02-18T17:33:35Z")

</div>

The click events it mentions are mostly ones for right click to open context menus etc - or draw events if on the drawing layer. Generic clicks are not passed through.

---

<div class="post-metadata">

**Author:** ![rogerjames99](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogerjames99/32/25201_2.png) [@rogerjames99](https://discourse.nodered.org/u/rogerjames99)\
**Post date:** [18 February 2021 21:20 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/3 "2021-02-18T21:20:57Z")

</div>

Thanks for the quick answer. Is there any way for me to pick up the underlying leaflet object and get events from that? Or are you saying that leaflet itself does not pass up these events?

---

<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:** [18 February 2021 22:50 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/4 "2021-02-18T22:50:26Z")

</div>

Leaflet certainly does. So in theory the code could be modified to catch those events.. Not sure how easy it would be to catch all as existing handlers for objects and buttons may trap them first.. Or do you only want clicks on parts of the map with nothing on ?

---

<div class="post-metadata">

**Author:** ![rogerjames99](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogerjames99/32/25201_2.png) [@rogerjames99](https://discourse.nodered.org/u/rogerjames99)\
**Post date:** [18 February 2021 23:14 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/5 "2021-02-18T23:14:31Z")

</div>

Good timing, was just browsing the forum when your reply popped up.

I really just want to make are very simple usage of the map. I want to add some UI to manage adding, removing and editing a vector layer containing point objects with associated named attributes. and then persisting this layer as a wms vector layer, that can be loaded back to the map.

The application is managing fire control equipment over a large area. Pumps, hydrants, sensors, etc. So I am trying to make the interface as simple as possible.

---

<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:** [19 February 2021 10:38 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/6 "2021-02-19T10:38:06Z")

</div>

The way I have seen people do things like this is to use the right click contextmenu command to configure your own popup when clicked... that can contain any html form you like (default is a simple add marker) - and can use the feedback() function to send some payload back to the worldmap in node - that leaves the default left click to do usual zoom, pan, grab etc.

---

<div class="post-metadata">

**Author:** ![rogerjames99](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogerjames99/32/25201_2.png) [@rogerjames99](https://discourse.nodered.org/u/rogerjames99)\
**Post date:** [19 February 2021 12:13 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/7 "2021-02-19T12:13:08Z")

</div>

Thanks dceejay,

I had come to the same conclusion. If I could get it to work!

I have tried the example from the readme.

```auto
msg.payload.command = {
contextmenu: '<button name="Clicker" onclick=\'feedback(this.name,"ping!)\'>Click me</button>'
}

```

All I get is the same default menu (add item). I have tried various ways of send the input to the map node. inject node, function node. Event sending a empty string does not seem to work.

```auto
msg.payload = {};
msg.payload.command = {};
msg.payload.command.contextmenu = "";
return msg;

```

I have done this snippet in a few different ways, and still nothing changes. I feel like I must be missing something glaringly obvious here. Can you give me a clue? Or even better a snippet 🙂

Thanks,

Roger

---

<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:** [19 February 2021 12:30 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/8 "2021-02-19T12:30:27Z")

</div>

Hi will do. Am off today but will be at a keyboard latet

---

<div class="post-metadata">

**Author:** ![rogerjames99](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogerjames99/32/25201_2.png) [@rogerjames99](https://discourse.nodered.org/u/rogerjames99)\
**Post date:** [19 February 2021 14:25 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/9 "2021-02-19T14:25:19Z")

</div>

Thanks that's great.

---

<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:** [19 February 2021 16:09 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/10 "2021-02-19T16:09:01Z")

</div>

here you go

```auto
[{"id":"75d51935.033378","type":"worldmap","z":"78444ab3.45a654","name":"","lat":"","lon":"","zoom":"6","layer":"","cluster":"","maxage":"","usermenu":"show","layers":"show","panit":"false","panlock":"false","zoomlock":"false","hiderightclick":"false","coords":"none","showgrid":"false","allowFileDrop":"false","path":"/worldmap","x":1160,"y":280,"wires":[]},{"id":"1727e76e.701f59","type":"worldmap in","z":"78444ab3.45a654","name":"","path":"/worldmap","events":"all","x":840,"y":340,"wires":[["3656e0bf.ed8b6","a0095875.4e1878","84bf68e3.fc6728","898921da.17565"]]},{"id":"3656e0bf.ed8b6","type":"debug","z":"78444ab3.45a654","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1030,"y":340,"wires":[]},{"id":"e5e2e1cb.3b7fc","type":"inject","z":"78444ab3.45a654","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":830,"y":280,"wires":[["57e8a741.dc8ef8"]]},{"id":"57e8a741.dc8ef8","type":"function","z":"78444ab3.45a654","name":"","func":"var menu = \"Add data <input name='foo' onchange='feedback(this.name,this.value,null,true)'></input><br/>\"\nmenu += \"Line 2 <input name='bar' onchange='feedback(this.name,this.value,null,true)'></input><br/>\"\nmenu += '<button name=\"Clicker\" onclick=\\'feedback(this.name,\"ping!\",null,true)\\'>Click me</button>'\n\nmsg.payload = { \n command: {\n \"contextmenu\": menu\n }\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":980,"y":280,"wires":[["75d51935.033378"]]}]

```

There is " missing from the example in the doc - will fix

---

<div class="post-metadata">

**Author:** ![rogerjames99](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogerjames99/32/25201_2.png) [@rogerjames99](https://discourse.nodered.org/u/rogerjames99)\
**Post date:** [20 February 2021 00:18 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/11 "2021-02-20T00:18:05Z")

</div>

Thanks that worked. Surprised I missed that missing quote. Tested on both the dashboard and non dashboard nodes.

Only thing I did notice was that in both cases it is not possible to get anything in to any of the fields. As soon as you click on the mouse to move focus to a different line, or type return or tab into the input field, the popup closes, with no data returned in the event.

Makes it a tad difficult to use.

Once again, thanks,

Roger

---

<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:** [20 February 2021 08:23 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/12 "2021-02-20T08:23:39Z")

</div>

Auto close is an option in that feedback call. (The boolean true I think). So just remove that. And you can call that from any element, doesn't have to be onclick

---

<div class="post-metadata">

**Author:** ![rogerjames99](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogerjames99/32/25201_2.png) [@rogerjames99](https://discourse.nodered.org/u/rogerjames99)\
**Post date:** [20 February 2021 09:07 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/13 "2021-02-20T09:07:33Z")

</div>

Just been looking your source at that area. Took me a while to work out the feedback function was defined in your code!

Yet another question. How can I get the current lat/lon fed in as a parameter to the call to feedback in the onclick html? What objects are available in the context that piece of script is executed in?

Your currrent code only puts in the lat/lon in when the click is on a marker. Supplying it from the client by default when the click is "somewhere on the map" as well would make the feedback more useful (and avoid having to do it in the html).

Once again thanks for helping me out, and thanks for this extremely useful node red module.

---

<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:** [20 February 2021 14:03 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/14 "2021-02-20T14:03:44Z")

</div>

wow - what an omission !... - lat lon now included in v2.8.3

---

<div class="post-metadata">

**Author:** ![rogerjames99](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogerjames99/32/25201_2.png) [@rogerjames99](https://discourse.nodered.org/u/rogerjames99)\
**Post date:** [20 February 2021 14:45 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/15 "2021-02-20T14:45:06Z")

</div>

Good grief, I like this level of service!

Tested on IBM cloud and working nicely.

Maybe if you are still sat in front of your computer. Some documentation in the readme on the feedback function might not go amiss;-).

---

<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:** [20 February 2021 14:49 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/16 "2021-02-20T14:49:38Z")

</div>

feel free to contribute some !

---

<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:** [20 February 2021 15:44 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/17 "2021-02-20T15:44:02Z")

</div>

Have added an addToForm(n,v) utility function to make submitting multiple values easier. (and added an example to the docs) - v2.8.5

---

<div class="post-metadata">

**Author:** ![rogerjames99](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogerjames99/32/25201_2.png) [@rogerjames99](https://discourse.nodered.org/u/rogerjames99)\
**Post date:** [20 February 2021 20:04 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/18 "2021-02-20T20:04:50Z")

</div>

addForm working great.

But, there is always a but.

When adding the item back to the map. Having any custom values in the message stops the marker appearing on the map.

```auto
[
    {
        "id": "66862aab.3500c4",
        "type": "tab",
        "label": "map",
        "disabled": false,
        "info": ""
    },
    {
        "id": "552ffcc3.ee4794",
        "type": "ui_worldmap",
        "z": "66862aab.3500c4",
        "group": "6846504f.f1de98",
        "order": 0,
        "width": "27",
        "height": "15",
        "name": "dashmap",
        "lat": "50.86928",
        "lon": "-1.85308",
        "zoom": "18",
        "layer": "OSM",
        "cluster": "",
        "maxage": "",
        "usermenu": "show",
        "layers": "show",
        "panit": "false",
        "panlock": "false",
        "zoomlock": "false",
        "hiderightclick": "false",
        "coords": "none",
        "showgrid": "false",
        "allowFileDrop": "false",
        "path": "/dashmap",
        "x": 840,
        "y": 260,
        "wires": []
    },
    {
        "id": "37201464.9f850c",
        "type": "debug",
        "z": "66862aab.3500c4",
        "name": "mapevents",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 450,
        "y": 120,
        "wires": []
    },
    {
        "id": "cca8d55c.29be18",
        "type": "function",
        "z": "66862aab.3500c4",
        "name": "setup-context-menu",
        "func": "var menu = \"Name <input name='name' onchange='addToForm(this.name,this.value)'></input><br/>\"\nmenu += \"Type <input name='type' onchange='addToForm(this.name,this.value)'></input><br/>\"\nmenu += '<button name=\"my_form\" onclick=\\'feedback(this.name,\"$form\",null,true)\\'>Submit</button>'\n\nmsg.payload = {\n command: {\n \"contextmenu\": menu\n }\n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 640,
        "y": 220,
        "wires": [
            [
                "552ffcc3.ee4794",
                "482c23ba.23d9bc"
            ]
        ]
    },
    {
        "id": "b316cde.8b8af3",
        "type": "worldmap in",
        "z": "66862aab.3500c4",
        "name": "",
        "path": "/dashmap",
        "events": "all",
        "x": 200,
        "y": 220,
        "wires": [
            [
                "37201464.9f850c",
                "29c07caf.cd99e4"
            ]
        ]
    },
    {
        "id": "29c07caf.cd99e4",
        "type": "switch",
        "z": "66862aab.3500c4",
        "name": "",
        "property": "payload.action",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "layer",
                "vt": "str"
            },
            {
                "t": "eq",
                "v": "feedback",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 430,
        "y": 220,
        "wires": [
            [
                "cca8d55c.29be18"
            ],
            [
                "8ce3d134.c0e54"
            ]
        ]
    },
    {
        "id": "482c23ba.23d9bc",
        "type": "debug",
        "z": "66862aab.3500c4",
        "name": "setup-context-menu",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 880,
        "y": 180,
        "wires": []
    },
    {
        "id": "99fd8519.4e607",
        "type": "inject",
        "z": "66862aab.3500c4",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "str",
        "x": 210,
        "y": 300,
        "wires": [
            [
                "cca8d55c.29be18"
            ]
        ]
    },
    {
        "id": "8ce3d134.c0e54",
        "type": "function",
        "z": "66862aab.3500c4",
        "name": "process-feedback",
        "func": "
var menu = \"Name <input name='name' onchange='addToForm(this.name,this.value)'></input><br/>\";
menu += \"Type <input name='type' onchange='addToForm(this.name,this.value)'></input><br/>\";menu += '<button name=\"my_form\" onclick=\\'feedback(this.name,\"$form\",null,true)\\'>Submit</button>';
var point = {
    name: msg.payload.value.name,
    label: msg.payload.value.name,
    lat: msg.payload.lat,
    lon: msg.payload.lon,
// type: msg.payload.value.type,
    contextmenu: menu,
    icon: \"car\",
    iconColor:\"darkred\"
}
msg.payload = point;
return msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 450,
        "y": 400,
        "wires": [
            [
                "552ffcc3.ee4794",
                "17d7efbb.c7a92"
            ]
        ]
    },
    {
        "id": "17d7efbb.c7a92",
        "type": "debug",
        "z": "66862aab.3500c4",
        "name": "process-feedback",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 870,
        "y": 400,
        "wires": []
    },
    {
        "id": "6846504f.f1de98",
        "type": "ui_group",
        "name": "Site plan",
        "tab": "ef10a04c.589f3",
        "order": 1,
        "disp": true,
        "width": "30",
        "collapse": false
    },
    {
        "id": "ef10a04c.589f3",
        "type": "ui_tab",
        "name": "maptab",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

```

---

<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:** [20 February 2021 20:37 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/19 "2021-02-20T20:37:08Z")

</div>

Not at computer so can’t see. But you can always filter them out.

---

<div class="post-metadata">

**Author:** ![rogerjames99](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogerjames99/32/25201_2.png) [@rogerjames99](https://discourse.nodered.org/u/rogerjames99)\
**Post date:** [20 February 2021 23:31 UTC](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234/20 "2021-02-20T23:31:41Z")

</div>

> Not at computer so can’t see. But you can always filter them out.

But I need to store extra attributes against the marker. I suspect because I am catching the context menu on the map itself, client side is not creating a new marker when the popup is closed. So I send back a message to create a marker with the properties I have just received in the feedback. But if one of the attributes I send back is a custom one, the marker is not created.

[Next page](https://discourse.nodered.org/t/worldmap-dashboard-no-mouse-click-events/41234.md?page=2)