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
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.
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?
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 ?
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.
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.
Thanks dceejay,
I had come to the same conclusion. If I could get it to work!
I have tried the example from the readme.
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.
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
Hi will do. Am off today but will be at a keyboard latet
Thanks that's great.
here you go
[{"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
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
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
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.
wow - what an omission !... - lat lon now included in v2.8.3
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;-).
feel free to contribute some !
Have added an addToForm(n,v) utility function to make submitting multiple values easier. (and added an example to the docs) - v2.8.5
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.
[
{
"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
}
]
Not at computer so can’t see. But you can always filter them out.
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.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy