# Node-red world map zoom and marking

**URL:** https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745
**Category:** General
**Tags:** node-red-dashboard
**Created:** [15 November 2021 04:03 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745 "2021-11-15T04:03:49Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![aqidishak](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aqidishak/32/51070_2.png) [@aqidishak](https://discourse.nodered.org/u/aqidishak)
#### Post date: [15 November 2021 04:03 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/1 "2021-11-15T04:03:49Z")

</div>

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?

 ![Screenshot 2021-11-15 120107](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/2/e24f1895040c95e811868c5009573473eb35abb9.jpeg)

---

<div class="post-metadata">

### Author: ![aqidishak](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aqidishak/32/51070_2.png) [@aqidishak](https://discourse.nodered.org/u/aqidishak)
#### Post date: [15 November 2021 04:24 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/2 "2021-11-15T04:24:02Z")

</div>

![Screenshot 2021-11-15 122346](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/e/eeaec52ea42fb7ff4a8db59cb077f709f2ccb054.png)

---

<div class="post-metadata">

### Author: ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)
#### Post date: [15 November 2021 04:51 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/3 "2021-11-15T04:51:12Z")

</div>

Welcome @aqidishak to the forum.

Please read [node-red-contrib-web-worldmap (node) - Node-RED](https://flows.nodered.org/node/node-red-contrib-web-worldmap) - 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.

---

<div class="post-metadata">

### Author: ![aqidishak](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aqidishak/32/51070_2.png) [@aqidishak](https://discourse.nodered.org/u/aqidishak)
#### Post date: [15 November 2021 06:09 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/4 "2021-11-15T06:09:37Z")

</div>

i found the zoom command but i don't know where the code should be in? in function or worldmap node?

---

<div class="post-metadata">

### Author: ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)
#### Post date: [15 November 2021 06:54 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/5 "2021-11-15T06:54:21Z")

</div>

You need to inject into the worlrmap a message like below.

```auto
msg.payload = { "command": { "layer":"Esri Satellite", "lat":51, "lon":3, "zoom":10 }};

```

---

<div class="post-metadata">

### Author: ![aqidishak](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aqidishak/32/51070_2.png) [@aqidishak](https://discourse.nodered.org/u/aqidishak)
#### Post date: [15 November 2021 08:18 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/6 "2021-11-15T08:18:44Z")

</div>

I tried and it doesn't work, put it in inject node right?

---

<div class="post-metadata">

### Author: ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)
#### Post date: [15 November 2021 08:46 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/7 "2021-11-15T08:46:00Z")

</div>

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

```auto
[
    {
        "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"
            ]
        ]
    }
]

```

---

<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: [15 November 2021 10:05 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/8 "2021-11-15T10:05:07Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![aqidishak](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aqidishak/32/51070_2.png) [@aqidishak](https://discourse.nodered.org/u/aqidishak)
#### Post date: [16 November 2021 03:33 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/9 "2021-11-16T03:33:00Z")

</div>

I don't know what is wrong, maybe i don't understand, seems like it is not working

---

<div class="post-metadata">

### Author: ![aqidishak](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aqidishak/32/51070_2.png) [@aqidishak](https://discourse.nodered.org/u/aqidishak)
#### Post date: [16 November 2021 03:34 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/10 "2021-11-16T03:34:20Z")

</div>

is there any coding in the world map in node? I'm new in coding world

---

<div class="post-metadata">

### Author: ![aqidishak](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aqidishak/32/51070_2.png) [@aqidishak](https://discourse.nodered.org/u/aqidishak)
#### Post date: [16 November 2021 03:38 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/11 "2021-11-16T03:38:38Z")

</div>

![Screenshot 2021-11-16 113758](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/f/2ff12d3dca55afe75acf060807dd864a6f19ac46.png)

---

<div class="post-metadata">

### Author: ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)
#### Post date: [16 November 2021 04:58 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/12 "2021-11-16T04:58:37Z")

</div>

Post your flow, then I can have a look.

---

<div class="post-metadata">

### Author: ![aqidishak](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aqidishak/32/51070_2.png) [@aqidishak](https://discourse.nodered.org/u/aqidishak)
#### Post date: [16 November 2021 06:12 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/13 "2021-11-16T06:12:13Z")

</div>

![Screenshot 2021-11-16 140716](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/7/0760170cdf81b1a8245ad485340f1d1b4fbfe865.png)  
this is the flow, I use the dashboard link to make some table

 ![Screenshot 2021-11-16 140940](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/d/adc817da5a35d8d6d1280a20403dd27ccb3dc3f6.jpeg)  
this is the map (or output?)

 ![Screenshot 2021-11-16 113758](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/f/2ff12d3dca55afe75acf060807dd864a6f19ac46.png)  
and this is the code in the function node they point out the mark of lat and lon

---

<div class="post-metadata">

### Author: ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)
#### Post date: [16 November 2021 06:23 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/14 "2021-11-16T06:23:08Z")

</div>

Copy you fowl and post it in between 3 x back ticks ```

![CopyFlow](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/8/c88b224deb38acb7427d6ee7a84359338e725fdd.gif)

---

<div class="post-metadata">

### Author: ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)
#### Post date: [16 November 2021 06:50 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/17 "2021-11-16T06:50:36Z")

</div>

You code needs to in be between 3 x back ticks ```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/4/8477db59ee4f7e08b98e5b12529c4450c0f7fde8.png)

---

<div class="post-metadata">

### Author: ![aqidishak](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aqidishak/32/51070_2.png) [@aqidishak](https://discourse.nodered.org/u/aqidishak)
#### Post date: [16 November 2021 06:50 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/18 "2021-11-16T06:50:38Z")

</div>

```auto
[
    {
        "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"
            ]
        ]
    }
]

```

---

<div class="post-metadata">

### Author: ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)
#### Post date: [16 November 2021 07:06 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/19 "2021-11-16T07:06:54Z")

</div>

Try this.

```auto
[
    {
        "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
    }
]

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/6/c63690db8d502af063a1a6f18448e246ed3be698.jpeg)

---

<div class="post-metadata">

### Author: ![aqidishak](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aqidishak/32/51070_2.png) [@aqidishak](https://discourse.nodered.org/u/aqidishak)
#### Post date: [16 November 2021 08:47 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/20 "2021-11-16T08:47:24Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)
#### Post date: [16 November 2021 08:55 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/21 "2021-11-16T08:55:21Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/b/0bbec530f755943e803070f616775b2a747329e8.png)

```auto
[
    {
        "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
    }
]

```

---

<div class="post-metadata">

### Author: ![aqidishak](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aqidishak/32/51070_2.png) [@aqidishak](https://discourse.nodered.org/u/aqidishak)
#### Post date: [16 November 2021 09:12 UTC](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745/22 "2021-11-16T09:12:54Z")

</div>

Thank you soo much appreciate it , im really new into this and coding world ,still learning ..again thank you for help me

[Next page](https://discourse.nodered.org/t/node-red-world-map-zoom-and-marking/53745.md?page=2)
