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]

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

General

Topic		Replies	Views
World Map don't maintain the Marker when restart the page Dashboard node-red-dashboard , windows	13	394	2 March 2023
Gps dashboard for live location General	64	6116	14 October 2020
Maps and putting location information on it General	15	599	24 August 2022
Is possible to drag and drop a marker and then save the new coord position? Dashboard mqtt , node-red-contrib-web-worldmap	2	113	11 July 2024
No output in the worldmap Dashboard	36	3469	10 May 2020

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.

Node-red world map zoom and marking

Related topics