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.
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.
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
