How to make when we click button and it zoom to specific location (lat,lon)?... another question is, when I refresh the page (map) the mark will be gone and I need to inject it again so how to make it automatically inject after I refresh the map or web?
Welcome @aqidishak to the forum.
Please read node-red-contrib-web-worldmap (node) - Node-RED - there a few commands on how to control the map.
Search a bit on this forum there are a few examples on how to recall the markers if you refresh the map or if you navigate to another page and back.
i found the zoom command but i don't know where the code should be in? in function or worldmap node?
You need to inject into the worlrmap a message like below.
msg.payload = { "command": { "layer":"Esri Satellite", "lat":51, "lon":3, "zoom":10 }};
I tried and it doesn't work, put it in inject node right?
You can do it in the inject or function, or you can create a input from the dashboard.
The main thing is to send the payload into the worldmap node
[
{
"id": "eb9e917c1235dc5b",
"type": "worldmap",
"z": "81bf79cd33a5bd8a",
"name": "",
"lat": "",
"lon": "",
"zoom": "",
"layer": "",
"cluster": "19",
"maxage": "",
"usermenu": "show",
"layers": "show",
"panit": "false",
"panlock": "false",
"zoomlock": "false",
"hiderightclick": "false",
"coords": "none",
"showgrid": "false",
"allowFileDrop": "false",
"path": "/worldmap",
"mapname": "",
"mapurl": "",
"mapopt": "",
"mapwms": false,
"x": 1580,
"y": 100,
"wires": []
},
{
"id": "6ea53eb23705ee58",
"type": "inject",
"z": "81bf79cd33a5bd8a",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 1200,
"y": 100,
"wires": [
[
"04b10c2813c4ac49"
]
]
},
{
"id": "04b10c2813c4ac49",
"type": "function",
"z": "81bf79cd33a5bd8a",
"name": "",
"func": "msg.payload = { \"command\": { \"layer\":\"Esri Satellite\", \"lat\":51, \"lon\":3, \"zoom\":10 }};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 1360,
"y": 100,
"wires": [
[
"eb9e917c1235dc5b"
]
]
}
]
For the automatic inject part - use a worldmap-in node set to detect connect events - so when a new client connects it can trigger sending of the required data.
1 Like
I don't know what is wrong, maybe i don't understand, seems like it is not working
is there any coding in the world map in node? I'm new in coding world
Post your flow, then I can have a look.
this is the flow, I use the dashboard link to make some table
this is the map (or output?)
and this is the code in the function node they point out the mark of lat and lon
Copy you fowl and post it in between 3 x back ticks ```
You code needs to in be between 3 x back ticks ```
[
{
"id": "0430c6938cb6f325",
"type": "tab",
"label": "Map",
"disabled": false,
"info": "",
"env": []
},
{
"id": "e8b38bd564251aa2",
"type": "worldmap",
"z": "0430c6938cb6f325",
"name": "Malaysia",
"lat": "4.210484",
"lon": "101.975769",
"zoom": "8",
"layer": "EsriS",
"cluster": "",
"maxage": "",
"usermenu": "show",
"layers": "show",
"panit": "false",
"panlock": "false",
"zoomlock": "false",
"hiderightclick": "false",
"coords": "deg",
"showgrid": "true",
"allowFileDrop": "true",
"path": "/worldmap",
"overlist": "DR,CO,RA,DN,BU,RW,SN,AC,TL,HM",
"maplist": "OSMC,EsriC,EsriS,EsriT,UKOS,OpTop,HB",
"mapname": "",
"mapurl": "",
"mapopt": "",
"mapwms": false,
"x": 640,
"y": 480,
"wires": []
},
{
"id": "4147960bf8bc3e20",
"type": "function",
"z": "0430c6938cb6f325",
"name": "",
"func": "msg.payload = [\n { name:\"Pahang\", lat:3.763386, lon:103.220184, \"radius\":3000, icon:\"fa-exchange\" },\n { name:\"Johor\", lat:1.485368, lon:103.761818, icon:\"fa-plus-square\" },\n { name:\"Melaka\", lat:2.194418, lon:102.249062, icon:\"fa-plus-square\" },\n { name:\"Selangor\", lat:3.073838, lon:101.518349, icon:\"fa-plus-square\" },\n { name:\"Kuala Lumpur\", lat:3.139003, lon:101.686852, icon:\"fa-plus-square\" },\n]\nreturn msg;\n",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 440,
"y": 480,
"wires": [
[
"e8b38bd564251aa2"
]
]
},
{
"id": "a22cd01e217eaaf0",
"type": "inject",
"z": "0430c6938cb6f325",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "43",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payloadType": "date",
"x": 180,
"y": 480,
"wires": [
[
"4147960bf8bc3e20"
]
]
}
]
Try this.
[
{
"id": "0430c6938cb6f325",
"type": "tab",
"label": "Map",
"disabled": false,
"info": ""
},
{
"id": "e8b38bd564251aa2",
"type": "worldmap",
"z": "0430c6938cb6f325",
"name": "Malaysia",
"lat": "4.210484",
"lon": "101.975769",
"zoom": "8",
"layer": "EsriS",
"cluster": "",
"maxage": "",
"usermenu": "show",
"layers": "show",
"panit": "false",
"panlock": "false",
"zoomlock": "false",
"hiderightclick": "false",
"coords": "deg",
"showgrid": "true",
"allowFileDrop": "true",
"path": "/worldmap",
"mapname": "",
"mapurl": "",
"mapopt": "",
"mapwms": false,
"x": 700,
"y": 460,
"wires": []
},
{
"id": "4147960bf8bc3e20",
"type": "function",
"z": "0430c6938cb6f325",
"name": "Map All",
"func": "msg.payload = [\n { name:\"Pahang\", lat:3.763386, lon:103.220184, \"radius\":3000, icon:\"fa-exchange\" },\n { name:\"Johor\", lat:1.485368, lon:103.761818, icon:\"fa-plus-square\" },\n { name:\"Melaka\", lat:2.194418, lon:102.249062, icon:\"fa-plus-square\" },\n { name:\"Selangor\", lat:3.073838, lon:101.518349, icon:\"fa-plus-square\" },\n { name:\"Kuala Lumpur\", lat:3.139003, lon:101.686852, icon:\"fa-plus-square\" },\n]\nreturn msg;\n",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 500,
"y": 240,
"wires": [
[
"e8b38bd564251aa2"
]
]
},
{
"id": "b3347a89dbac0b7d",
"type": "ui_worldmap",
"z": "0430c6938cb6f325",
"group": "fc919dea017b5a77",
"order": 5,
"width": "30",
"height": "16",
"name": "",
"lat": "",
"lon": "",
"zoom": "",
"layer": "",
"cluster": "",
"maxage": "",
"usermenu": "hide",
"layers": "hide",
"panit": "false",
"panlock": "false",
"zoomlock": "false",
"hiderightclick": "true",
"coords": "none",
"showgrid": "false",
"allowFileDrop": "false",
"path": "/worldmap",
"mapname": "",
"mapurl": "",
"mapopt": "",
"mapwms": false,
"x": 700,
"y": 520,
"wires": []
},
{
"id": "ca30316a926a9335",
"type": "ui_button",
"z": "0430c6938cb6f325",
"name": "",
"group": "fc919dea017b5a77",
"order": 3,
"width": "5",
"height": "1",
"passthru": false,
"label": "Selangor",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 260,
"y": 360,
"wires": [
[
"c31dd11a8fe91243"
]
]
},
{
"id": "95ba5a22803b64f2",
"type": "ui_button",
"z": "0430c6938cb6f325",
"name": "",
"group": "fc919dea017b5a77",
"order": 4,
"width": "5",
"height": "1",
"passthru": false,
"label": "Melaka",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 260,
"y": 420,
"wires": [
[
"d6168d1294dcc3ca"
]
]
},
{
"id": "c31dd11a8fe91243",
"type": "function",
"z": "0430c6938cb6f325",
"name": "Zoom To Selangor",
"func": "msg.payload = { \"command\": { \"lat\":3.073838, \"lon\":101.518349, \"zoom\":10 }};\nreturn msg;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 470,
"y": 360,
"wires": [
[
"e8b38bd564251aa2"
]
]
},
{
"id": "d6168d1294dcc3ca",
"type": "function",
"z": "0430c6938cb6f325",
"name": "Zoom To Melaka",
"func": "msg.payload = { \"command\": { \"lat\":2.194418, \"lon\":102.249062, \"zoom\":12 }};\nreturn msg;\n",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 470,
"y": 420,
"wires": [
[
"e8b38bd564251aa2"
]
]
},
{
"id": "046746197c8016cd",
"type": "ui_button",
"z": "0430c6938cb6f325",
"name": "",
"group": "fc919dea017b5a77",
"order": 2,
"width": "5",
"height": "1",
"passthru": false,
"label": "Zoom Out",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 260,
"y": 300,
"wires": [
[
"3d15c35caaac6c0b"
]
]
},
{
"id": "3d15c35caaac6c0b",
"type": "function",
"z": "0430c6938cb6f325",
"name": "Zoom Out",
"func": "msg.payload = { \"command\": { \"lat\":4.210484, \"lon\":101.975769, \"zoom\":8 }};\nreturn msg;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 500,
"y": 300,
"wires": [
[
"e8b38bd564251aa2"
]
]
},
{
"id": "990785eeab5d53b2",
"type": "ui_button",
"z": "0430c6938cb6f325",
"name": "",
"group": "fc919dea017b5a77",
"order": 1,
"width": "5",
"height": "1",
"passthru": false,
"label": "Map All",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 260,
"y": 240,
"wires": [
[
"4147960bf8bc3e20"
]
]
},
{
"id": "fc919dea017b5a77",
"type": "ui_group",
"name": "Map",
"tab": "f5b182865a403b56",
"order": 1,
"disp": true,
"width": "30",
"collapse": false,
"className": ""
},
{
"id": "f5b182865a403b56",
"type": "ui_tab",
"name": "Malaysia",
"icon": "dashboard",
"order": 3,
"disabled": false,
"hidden": false
}
]
it works thank you so much but is there any possibility to make the link node in the dashboard clickable like the button node means it zooms when I click Pahang link?
Some thing like this?
Play a bit with node-red and read all the post on worldmap, you will find a lot of thing it is capable off.
Try to make the flow and post it, if you don't win
[
{
"id": "0430c6938cb6f325",
"type": "tab",
"label": "Map",
"disabled": false,
"info": ""
},
{
"id": "e8b38bd564251aa2",
"type": "worldmap",
"z": "0430c6938cb6f325",
"name": "Malaysia",
"lat": "4.210484",
"lon": "101.975769",
"zoom": "8",
"layer": "EsriS",
"cluster": "",
"maxage": "",
"usermenu": "show",
"layers": "show",
"panit": "false",
"panlock": "false",
"zoomlock": "false",
"hiderightclick": "false",
"coords": "deg",
"showgrid": "true",
"allowFileDrop": "true",
"path": "/worldmap",
"mapname": "",
"mapurl": "",
"mapopt": "",
"mapwms": false,
"x": 700,
"y": 460,
"wires": []
},
{
"id": "4147960bf8bc3e20",
"type": "function",
"z": "0430c6938cb6f325",
"name": "Map All",
"func": "msg.payload = [\n { name:\"Pahang\", lat:3.763386, lon:103.220184, \"radius\":3000, icon:\"fa-exchange\" },\n { name:\"Johor\", lat:1.485368, lon:103.761818, icon:\"fa-plus-square\" },\n { name:\"Melaka\", lat:2.194418, lon:102.249062, icon:\"fa-plus-square\" },\n { name:\"Selangor\", lat:3.073838, lon:101.518349, icon:\"fa-plus-square\" },\n { name:\"Kuala Lumpur\", lat:3.139003, lon:101.686852, icon:\"fa-plus-square\" },\n]\nreturn msg;\n",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 500,
"y": 240,
"wires": [
[
"e8b38bd564251aa2"
]
]
},
{
"id": "b3347a89dbac0b7d",
"type": "ui_worldmap",
"z": "0430c6938cb6f325",
"group": "fc919dea017b5a77",
"order": 5,
"width": "30",
"height": "16",
"name": "",
"lat": "",
"lon": "",
"zoom": "",
"layer": "",
"cluster": "",
"maxage": "",
"usermenu": "hide",
"layers": "hide",
"panit": "false",
"panlock": "false",
"zoomlock": "false",
"hiderightclick": "true",
"coords": "none",
"showgrid": "false",
"allowFileDrop": "false",
"path": "/worldmap",
"mapname": "",
"mapurl": "",
"mapopt": "",
"mapwms": false,
"x": 700,
"y": 520,
"wires": []
},
{
"id": "ca30316a926a9335",
"type": "ui_button",
"z": "0430c6938cb6f325",
"name": "",
"group": "fc919dea017b5a77",
"order": 3,
"width": "5",
"height": "1",
"passthru": false,
"label": "Selangor",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 260,
"y": 360,
"wires": [
[
"c31dd11a8fe91243"
]
]
},
{
"id": "95ba5a22803b64f2",
"type": "ui_button",
"z": "0430c6938cb6f325",
"name": "",
"group": "fc919dea017b5a77",
"order": 4,
"width": "5",
"height": "1",
"passthru": false,
"label": "Melaka",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 260,
"y": 420,
"wires": [
[
"d6168d1294dcc3ca"
]
]
},
{
"id": "c31dd11a8fe91243",
"type": "function",
"z": "0430c6938cb6f325",
"name": "Zoom To Selangor",
"func": "msg.payload = { \"command\": { \"lat\":3.073838, \"lon\":101.518349, \"zoom\":10 }};\nreturn msg;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 470,
"y": 360,
"wires": [
[
"e8b38bd564251aa2"
]
]
},
{
"id": "d6168d1294dcc3ca",
"type": "function",
"z": "0430c6938cb6f325",
"name": "Zoom To Melaka",
"func": "msg.payload = { \"command\": { \"lat\":2.194418, \"lon\":102.249062, \"zoom\":12 }};\nreturn msg;\n",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 470,
"y": 420,
"wires": [
[
"e8b38bd564251aa2"
]
]
},
{
"id": "046746197c8016cd",
"type": "ui_button",
"z": "0430c6938cb6f325",
"name": "",
"group": "fc919dea017b5a77",
"order": 2,
"width": "5",
"height": "1",
"passthru": false,
"label": "Zoom Out",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 260,
"y": 300,
"wires": [
[
"3d15c35caaac6c0b"
]
]
},
{
"id": "3d15c35caaac6c0b",
"type": "function",
"z": "0430c6938cb6f325",
"name": "Zoom Out",
"func": "msg.payload = { \"command\": { \"lat\":4.210484, \"lon\":101.975769, \"zoom\":8 }};\nreturn msg;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 500,
"y": 300,
"wires": [
[
"e8b38bd564251aa2"
]
]
},
{
"id": "990785eeab5d53b2",
"type": "ui_button",
"z": "0430c6938cb6f325",
"name": "",
"group": "fc919dea017b5a77",
"order": 1,
"width": "5",
"height": "1",
"passthru": false,
"label": "Map All",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 260,
"y": 240,
"wires": [
[
"4147960bf8bc3e20"
]
]
},
{
"id": "67de60bf793b38a4",
"type": "worldmap in",
"z": "0430c6938cb6f325",
"name": "",
"path": "/worldmap",
"events": "all",
"x": 710,
"y": 400,
"wires": [
[
"80462ace01db0fd1"
]
]
},
{
"id": "80462ace01db0fd1",
"type": "debug",
"z": "0430c6938cb6f325",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 880,
"y": 400,
"wires": []
},
{
"id": "fc919dea017b5a77",
"type": "ui_group",
"name": "Map",
"tab": "f5b182865a403b56",
"order": 1,
"disp": true,
"width": "30",
"collapse": false,
"className": ""
},
{
"id": "f5b182865a403b56",
"type": "ui_tab",
"name": "Malaysia",
"icon": "dashboard",
"order": 3,
"disabled": false,
"hidden": false
}
]
Thank you soo much appreciate it , im really new into this and coding world ,still learning ..again thank you for help me
1 Like
