Receiving input when clicking on a geojson object/layer on the map using the "worldmap in" node

[levi]

Hello,

I am working on a project on Node-RED using the worldmap module. I loaded a geojson file on the map and I want to receive click actions and the object's attributes when I click one. I am using the "worldmap in" node but it doesn't receive anything when I click on objects on the map.

Is there any way I can receive the click action of the object I click? When placing a different object on the map (like the example of the car icon) it works fine, but with geojson format it does not.

[{"id":"bc415107.ec328","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"e3f5f112.39baa","type":"worldmap","z":"bc415107.ec328","name":"","lat":"","lon":"","zoom":"","layer":"","cluster":"","maxage":"","usermenu":"show","layers":"show","panit":"false","panlock":"false","zoomlock":"false","hiderightclick":"false","coords":"none","showgrid":"false","allowFileDrop":"false","path":"/worldmap","x":560,"y":160,"wires":[]},{"id":"1b94185e.9be968","type":"inject","z":"bc415107.ec328","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":210,"y":160,"wires":[["b7532e9e.ae249"]]},{"id":"b7532e9e.ae249","type":"function","z":"bc415107.ec328","name":"","func":"var geo = {\n\"type\": \"FeatureCollection\",\n\"name\": \"section_wgs84\",\n\"crs\": { \"type\": \"name\", \"properties\": { \"name\": \"urn:ogc:def:crs:OGC:1.3:CRS84\" } },\n\"features\": [\n{ \"type\": \"Feature\", \"properties\": { \"Attribute1\": \"101\",\"Attribute2\":\"102\",\"Attribute3\":\"103\" }, \"geometry\": { \"type\": \"MultiLineString\", \"coordinates\": [ [ [ 2.070202302641839, 48.94581957367069 ], [ 2.070189836287928, 48.945813825712129 ], [ 2.069858823227682, 48.94567213447975 ], [ 2.069601993033159, 48.945573735327358 ], [ 2.069219978906978, 48.94543641276271 ], [ 2.068660198809332, 48.945253641728272 ], [ 2.06822544998965, 48.945110870045703 ], [ 2.067952203630821, 48.945022232075779 ], [ 2.067662319434945, 48.944917366398215 ], [ 2.067374212652472, 48.944812423897929 ], [ 2.067145380191746, 48.944721611511454 ], [ 2.066788089909605, 48.944569095167516 ], [ 2.066419800047311, 48.944405790246634 ], [ 2.066316087300745, 48.944358133725011 ], [ 2.066094811717628, 48.944256580989709 ], [ 2.065648605850946, 48.944060830907141 ], [ 2.0646969493092, 48.943639096077128 ], [ 2.063361551946753, 48.943049691279548 ], [ 2.062053832790832, 48.942471515915422 ] ] ] } },\n{ \"type\": \"Feature\", \"properties\": { \"Attribute1\": \"201\", \"Attribute2\":\"202\", \"Attribute3\": \"203\" }, \"geometry\": { \"type\": \"MultiLineString\", \"coordinates\": [ [ [ 2.062053832790832, 48.942471515915422 ], [ 2.061906064390868, 48.942406181811016 ], [ 2.060845681670925, 48.94193787914589 ], [ 2.06080888128689, 48.941921600095569 ], [ 2.05990691424814, 48.94152357032636 ], [ 2.059610730323158, 48.9413928347021 ], [ 2.059194060290284, 48.941210951110079 ], [ 2.058649166374472, 48.94097322060864 ], [ 2.058104725786659, 48.940732063808788 ], [ 2.057526163059767, 48.940475707497043 ], [ 2.056480641100423, 48.940012787579789 ], [ 2.055367644144383, 48.939507777981213 ], [ 2.054397843515774, 48.939079430141788 ], [ 2.054237834181477, 48.939005143065053 ], [ 2.053797186703245, 48.938800418574203 ], [ 2.053222157051973, 48.938533256081023 ], [ 2.052053100099672, 48.93802165629382 ], [ 2.051130319524945, 48.93761453686637 ], [ 2.050838279940211, 48.937485690230986 ], [ 2.05073423123607, 48.937439790498573 ], [ 2.050721936381672, 48.937434445590853 ] ] ] } },\n]\n}\nvar m = {overlay:\"Golf Clubhouse\", geojson:geo, fit:true};\nmsg.payload = {command:{map:m}};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":390,"y":160,"wires":[["e3f5f112.39baa"]]},{"id":"26c86314.f73ecc","type":"worldmap in","z":"bc415107.ec328","name":"","path":"/worldmap","events":"all","x":310,"y":260,"wires":[["74140d47.893a24"]]},{"id":"74140d47.893a24","type":"debug","z":"bc415107.ec328","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":480,"y":260,"wires":[]}]

Node-RED version: v1.2.7
Node.js version: v14.15.1
Windows 10 OS

Thank you!

[dceejay]

Indeed you currently can't do that - but good thought...

now added clickable:true option to the object in v2.14.0

[{"id":"e3f5f112.39baa","type":"worldmap","z":"64eed394.c7935c","name":"","lat":"","lon":"","zoom":"","layer":"","cluster":"","maxage":"","usermenu":"show","layers":"show","panit":"false","panlock":"false","zoomlock":"false","hiderightclick":"false","coords":"none","showgrid":"false","allowFileDrop":"false","path":"/worldmap","x":500,"y":280,"wires":[]},{"id":"1b94185e.9be968","type":"inject","z":"64eed394.c7935c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":150,"y":280,"wires":[["b7532e9e.ae249"]]},{"id":"b7532e9e.ae249","type":"function","z":"64eed394.c7935c","name":"","func":"var geo = {\n\"type\": \"FeatureCollection\",\n\"name\": \"section_wgs84\",\n\"crs\": { \"type\": \"name\", \"properties\": { \"name\": \"urn:ogc:def:crs:OGC:1.3:CRS84\" } },\n\"features\": [\n{ \"type\": \"Feature\", \"properties\": { \"Attribute1\": \"101\",\"Attribute2\":\"102\",\"Attribute3\":\"103\" }, \"geometry\": { \"type\": \"MultiLineString\", \"coordinates\": [ [ [ 2.070202302641839, 48.94581957367069 ], [ 2.070189836287928, 48.945813825712129 ], [ 2.069858823227682, 48.94567213447975 ], [ 2.069601993033159, 48.945573735327358 ], [ 2.069219978906978, 48.94543641276271 ], [ 2.068660198809332, 48.945253641728272 ], [ 2.06822544998965, 48.945110870045703 ], [ 2.067952203630821, 48.945022232075779 ], [ 2.067662319434945, 48.944917366398215 ], [ 2.067374212652472, 48.944812423897929 ], [ 2.067145380191746, 48.944721611511454 ], [ 2.066788089909605, 48.944569095167516 ], [ 2.066419800047311, 48.944405790246634 ], [ 2.066316087300745, 48.944358133725011 ], [ 2.066094811717628, 48.944256580989709 ], [ 2.065648605850946, 48.944060830907141 ], [ 2.0646969493092, 48.943639096077128 ], [ 2.063361551946753, 48.943049691279548 ], [ 2.062053832790832, 48.942471515915422 ] ] ] } },\n{ \"type\": \"Feature\", \"properties\": { \"Attribute1\": \"201\", \"Attribute2\":\"202\", \"Attribute3\": \"203\" }, \"geometry\": { \"type\": \"MultiLineString\", \"coordinates\": [ [ [ 2.062053832790832, 48.942471515915422 ], [ 2.061906064390868, 48.942406181811016 ], [ 2.060845681670925, 48.94193787914589 ], [ 2.06080888128689, 48.941921600095569 ], [ 2.05990691424814, 48.94152357032636 ], [ 2.059610730323158, 48.9413928347021 ], [ 2.059194060290284, 48.941210951110079 ], [ 2.058649166374472, 48.94097322060864 ], [ 2.058104725786659, 48.940732063808788 ], [ 2.057526163059767, 48.940475707497043 ], [ 2.056480641100423, 48.940012787579789 ], [ 2.055367644144383, 48.939507777981213 ], [ 2.054397843515774, 48.939079430141788 ], [ 2.054237834181477, 48.939005143065053 ], [ 2.053797186703245, 48.938800418574203 ], [ 2.053222157051973, 48.938533256081023 ], [ 2.052053100099672, 48.93802165629382 ], [ 2.051130319524945, 48.93761453686637 ], [ 2.050838279940211, 48.937485690230986 ], [ 2.05073423123607, 48.937439790498573 ], [ 2.050721936381672, 48.937434445590853 ] ] ] } },\n]\n}\nvar m = {overlay:\"Golf Clubhouse\", geojson:geo, fit:true, clickable:true};\nmsg.payload = {command:{map:m}};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":330,"y":280,"wires":[["e3f5f112.39baa"]]},{"id":"26c86314.f73ecc","type":"worldmap in","z":"64eed394.c7935c","name":"","path":"/worldmap","events":"all","x":250,"y":380,"wires":[["74140d47.893a24"]]},{"id":"74140d47.893a24","type":"debug","z":"64eed394.c7935c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":420,"y":380,"wires":[]}]

clicking will return something like

[levi]

Thank you Jay! This was very helpful.

I have three more questions if you have the time.

I was also wondering, is there anyway I could add a pop-up button when I click on one of the objects? I tried to do it like the examples provided but it seems to be different for geojson.

Is there anyway to select multiple objects at the same time, like all at once?

Can I change the color of geojson layer?

[dceejay]

Hi,

I don't think there is a standard way for geojson to specify a button - but happy to be told otherwise. I guess we could invent a way but would it need to be per feature ,or just the same button for all features - per feature would mean you had to fixup the geojson in advance which would be non-standard (afaik) - global could be ok but then would apply to all features.

No you cannot select multiple features.

Yes you can set color - there is a vague standard (as in it doesn't seem to be part of the spec but others follow it anyway) you can set a value on properties - eg inside your geojson

{ "type": "Feature", "properties": { "color":"#ff0000", "Attribute1":...

[levi]

Hi,

Yes, there has to be a button for each feature. What way would you suggest to fix the geojson in advance?

[dceejay]

Well as the geojson doesn't support buttons etc, I wouldn't. I would try to unpack it and convert it to objects that worldmap can understand more fully.