Worldmap problem

Dashboard
1

螢幕擷取畫面 2024-06-26 200658
螢幕擷取畫面 2024-06-26 2006581919×824 158 KB

螢幕擷取畫面 2024-06-26 200645
螢幕擷取畫面 2024-06-26 2006451679×688 76.6 KB

(upload://uhlehYNzomXFhlKagc6NFp0xJQg.jpeg)
I have a very simple flow to show location using an esp32, I want to display a map and a search text on dashboard, but only the map is showing, I checked the group but still don't known what's wrong. Here is the flow.(I'm new to here and I'm not native english speaker, so if there are any errors please tell me)

[
    {
        "id": "e3aee37cc83a31ac",
        "type": "tab",
        "label": "maptest2",
        "disabled": false,
        "info": ""
    },
    {
        "id": "bcb0141b7cda9dc8",
        "type": "mqtt in",
        "z": "e3aee37cc83a31ac",
        "name": "",
        "topic": "data",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "7a2320a6a7227415",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 130,
        "y": 120,
        "wires": [
            [
                "820f84ca8315ef5a"
            ]
        ]
    },
    {
        "id": "3e94150e399995be",
        "type": "function",
        "z": "e3aee37cc83a31ac",
        "name": "json_sql",
        "func": "let locjson = msg.payload;\n\n\n// 1.檢查 locjson 是否是一個物件\nif (typeof locjson === 'object') {\n\n    // 2.建立 SQL 語句\n    let sql = \"INSERT INTO test.locations (location_name, latitude, longitude) VALUES (?, ?, ?)\";\n\n    // 3.將資料放入 SQL 語句\n    msg.topic = sql;\n    msg.payload = [locjson.location_name, locjson.latitude, locjson.longitude];\n\n    // 4.返回包含 SQL 語句和資料的物件\n    return msg;\n} else {\n    // 如果 locjson 不是一個物件，您可以進行錯誤處理或者直接返回一個空物件\n    return {};\n}\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 340,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "0febf61a50950e65",
        "type": "mysql",
        "z": "e3aee37cc83a31ac",
        "mydb": "db5df050fcecd411",
        "name": "localhost",
        "x": 560,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "7cf4c5fbaabacc7d",
        "type": "mqtt in",
        "z": "e3aee37cc83a31ac",
        "name": "",
        "topic": "loc",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "7a2320a6a7227415",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 130,
        "y": 240,
        "wires": [
            [
                "4881becabd384f2c"
            ]
        ]
    },
    {
        "id": "4881becabd384f2c",
        "type": "function",
        "z": "e3aee37cc83a31ac",
        "name": "draw_circle",
        "func": "const radiusInMeters = 20; // 20 meters\nconst locjson = msg.payload;\n\nif (typeof locjson === 'object') {\n    const centerLat = locjson.lat;\n    const centerLon = locjson.lon;\n\n    const circle = {\n        name: \"loccircle\",\n        lat: centerLat,\n        lon: centerLon,\n        radius: radiusInMeters,\n        icon: \"fa-circle\",\n        iconColor: \"rgba(0,0,255,0.2)\", \n        layer: \"overlay\"\n    };\n\n    msg.payload = circle;\n    return msg;\n} else {\n    return {};\n}\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 340,
        "y": 240,
        "wires": [
            [
                "674552c834298e41",
                "b3f0cbc1780e923b"
            ]
        ]
    },
    {
        "id": "3ad6944b878bba28",
        "type": "mysql",
        "z": "e3aee37cc83a31ac",
        "mydb": "db5df050fcecd411",
        "name": "",
        "x": 560,
        "y": 380,
        "wires": [
            [
                "7029386d7e40bfa1"
            ]
        ]
    },
    {
        "id": "7ae963ceb33b98cd",
        "type": "function",
        "z": "e3aee37cc83a31ac",
        "name": "read_mysql",
        "func": "msg.topic = \"SELECT name, latitude, longitude, url FROM location\";\nreturn msg;\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 350,
        "y": 380,
        "wires": [
            [
                "3ad6944b878bba28"
            ]
        ]
    },
    {
        "id": "7029386d7e40bfa1",
        "type": "function",
        "z": "e3aee37cc83a31ac",
        "name": "to_map",
        "func": "// 假設 msg.payload 是從 mysql 節點收到的資料\nfor (let i = 0; i < msg.payload.length; i++) {\n    let location = msg.payload[i];\n    msg.payload[i] = {\n        name: location.name,\n        lat: location.latitude,\n        lon: location.longitude,\n        url: location.url,\n        imageUrl: location.image_url,\n        iconColor: \"blue\"\n    };\n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 760,
        "y": 380,
        "wires": [
            []
        ]
    },
    {
        "id": "1d5359da11d8c9a4",
        "type": "inject",
        "z": "e3aee37cc83a31ac",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "6",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 140,
        "y": 380,
        "wires": [
            [
                "7ae963ceb33b98cd"
            ]
        ]
    },
    {
        "id": "820f84ca8315ef5a",
        "type": "function",
        "z": "e3aee37cc83a31ac",
        "name": "json_sql_test",
        "func": "let locjson = msg.payload;\n\n\n// 1.檢查 locjson 是否是一個物件\nif (typeof locjson === 'object') {\n\n    // 2.建立 SQL 語句\n    let sql = \"INSERT INTO database.location (name, latitude, longtitude) VALUES (?, ?, ?)\";\n\n    // 3.將資料放入 SQL 語句\n    msg.topic = sql;\n    msg.payload = [locjson.name, locjson.latitude, locjson.longitude];\n\n    // 4.返回包含 SQL 語句和資料的物件\n    return msg;\n} else {\n    // 如果 locjson 不是一個物件，您可以進行錯誤處理或者直接返回一個空物件\n    return {};\n}\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 350,
        "y": 40,
        "wires": [
            [
                "0febf61a50950e65"
            ]
        ]
    },
    {
        "id": "674552c834298e41",
        "type": "worldmap-tracks",
        "z": "e3aee37cc83a31ac",
        "name": "",
        "depth": "5",
        "layer": "combined",
        "smooth": false,
        "x": 550,
        "y": 200,
        "wires": [
            [
                "b3f0cbc1780e923b"
            ]
        ]
    },
    {
        "id": "b3f0cbc1780e923b",
        "type": "ui_worldmap",
        "z": "e3aee37cc83a31ac",
        "group": "9fe6850439ffc766",
        "order": 4,
        "width": 12,
        "height": 8,
        "name": "map",
        "lat": "25.150612343292043",
        "lon": "121.77575292797698",
        "zoom": "17",
        "layer": "OSMC",
        "cluster": "",
        "maxage": "",
        "usermenu": "hide",
        "layers": "hide",
        "panit": "false",
        "panlock": "false",
        "zoomlock": "false",
        "hiderightclick": "true",
        "coords": "none",
        "showgrid": "false",
        "showruler": "false",
        "allowFileDrop": "false",
        "path": "/worldmap",
        "overlist": "DR,CO,RA,DN,HM",
        "maplist": "OSMG,OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS",
        "mapname": "",
        "mapurl": "",
        "mapopt": "",
        "mapwms": false,
        "x": 790,
        "y": 240,
        "wires": []
    },
    {
        "id": "33b4ef92154ba28d",
        "type": "debug",
        "z": "e3aee37cc83a31ac",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 800,
        "y": 140,
        "wires": []
    },
    {
        "id": "3cd6cc8bdac50fb2",
        "type": "debug",
        "z": "e3aee37cc83a31ac",
        "name": "debug 2",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 960,
        "y": 380,
        "wires": []
    },
    {
        "id": "2",
        "type": "ui_text_input",
        "z": "e3aee37cc83a31ac",
        "name": "",
        "label": "輸入名稱",
        "tooltip": "",
        "group": "9fe6850439ffc766",
        "order": 2,
        "width": 4,
        "height": 1,
        "passthru": true,
        "mode": "text",
        "delay": "0",
        "topic": "",
        "topicType": "str",
        "x": 120,
        "y": 480,
        "wires": [
            [
                "4",
                "c3a5b862cffdf9f6"
            ]
        ]
    },
    {
        "id": "4",
        "type": "ui_button",
        "z": "e3aee37cc83a31ac",
        "name": "",
        "group": "9fe6850439ffc766",
        "order": 1,
        "width": 4,
        "height": 1,
        "passthru": true,
        "label": "查詢紐",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "",
        "topicType": "str",
        "x": 310,
        "y": 480,
        "wires": [
            [
                "5"
            ]
        ]
    },
    {
        "id": "5",
        "type": "function",
        "z": "e3aee37cc83a31ac",
        "name": "Build SQL Query",
        "func": "var locationName = msg.payload;\nmsg.topic = \"SELECT name, latitude, longitude FROM location WHERE name = '\" + locationName + \"'\";\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 500,
        "y": 480,
        "wires": [
            [
                "6"
            ]
        ]
    },
    {
        "id": "6",
        "type": "mysql",
        "z": "e3aee37cc83a31ac",
        "mydb": "db5df050fcecd411",
        "name": "",
        "x": 680,
        "y": 480,
        "wires": [
            [
                "8"
            ]
        ]
    },
    {
        "id": "8",
        "type": "template",
        "z": "e3aee37cc83a31ac",
        "name": "Format Output",
        "field": "payload",
        "fieldType": "msg",
        "format": "html",
        "syntax": "mustache",
        "template": "<div>\n  <p><strong>Name:</strong> {{payload[0].name}}</p>\n  <p><strong>Latitude:</strong> {{payload[0].latitude}}</p>\n  <p><strong>Longitude:</strong> {{payload[0].longitude}}</p>\n</div>",
        "output": "str",
        "x": 860,
        "y": 480,
        "wires": [
            [
                "9"
            ]
        ]
    },
    {
        "id": "9",
        "type": "ui_text",
        "z": "e3aee37cc83a31ac",
        "group": "9fe6850439ffc766",
        "order": 3,
        "width": 4,
        "height": 1,
        "name": "",
        "label": "位置",
        "format": "{{msg.payload}}",
        "layout": "col-center",
        "x": 1040,
        "y": 480,
        "wires": []
    },
    {
        "id": "c3a5b862cffdf9f6",
        "type": "debug",
        "z": "e3aee37cc83a31ac",
        "name": "debug 3",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 280,
        "y": 560,
        "wires": []
    },
    {
        "id": "0a62af7ab733edf4",
        "type": "ui_spacer",
        "z": "e3aee37cc83a31ac",
        "name": "spacer",
        "group": "3",
        "order": 1,
        "width": 1,
        "height": 1
    },
    {
        "id": "e46758d6c6a034ad",
        "type": "ui_spacer",
        "z": "e3aee37cc83a31ac",
        "name": "spacer",
        "group": "3",
        "order": 1,
        "width": 1,
        "height": 1
    },
    {
        "id": "7a2320a6a7227415",
        "type": "mqtt-broker",
        "name": "",
        "broker": "192.168.26.140",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "15",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willPayload": "",
        "willMsg": {},
        "userProps": "",
        "sessionExpiry": ""
    },
    {
        "id": "db5df050fcecd411",
        "type": "MySQLdatabase",
        "name": "",
        "host": "localhost",
        "port": "3306",
        "db": "database",
        "tz": "",
        "charset": "UTF8"
    },
    {
        "id": "9fe6850439ffc766",
        "type": "ui_group",
        "name": "table",
        "tab": "10",
        "order": 1,
        "disp": true,
        "width": "12",
        "collapse": true
    },
    {
        "id": "10",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]
2

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)
In your code above, you have not used backquotes, so the code is not displayed correctly.
You have used ''' instead of ```

``` 
   code goes here 
```

You can edit and correct your post by clicking the pencil :pencil2: icon.

See this post for more details - How to share code or flow json

1 Like
3

ok, thank you

1 Like
4

In your flow where you read the database and send that to a function node, the output of the function node is not connected to anything. Try connecting it to the worldmap node.

One thing to think about, when you have n issue where you are getting data from MQTT or getting data from a database, remember no one else has access to that data. It is a good idea to create an inject node with the data being sent to the map so others can duplicate your issue.

5

螢幕擷取畫面 2024-06-26 230117
螢幕擷取畫面 2024-06-26 2301171260×844 166 KB

After connect a worldmap node to function, I'll get two maps, still no text here.
Should I add some random points on map to replace the mqtt nodes? I'm not sure what you mean, still thank you for your answer!

6

Add a debug node to the output of the to_map and then copy the data and past it to a reply. That way I can see what you are sending to the map.

There’s a great page in the docs (Working with messages : Node-RED) that will explain how to use the debug panel to find the right path/value for any data item.

Pay particular attention to the part about the buttons that appear under your mouse pointer when you over hover a debug message property in the sidebar.

BX00Cy7yHi

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)

``` 
   code goes here 
```

You can edit and correct your post by clicking the pencil :pencil2: icon.

See this post for more details - How to share code or flow json

7 
{"name":"library","lat":25.15029,"lon":121.77539,"url":"https://li.ntou.edu.tw/","iconColor":"blue"}

螢幕擷取畫面 2024-06-27 104716
螢幕擷取畫面 2024-06-27 1047161677×690 86.7 KB

Like this?

8

Have you tried any of the 'example flows' that are available for the WorldMap widget?
You can access them by clicking the hamburger menu - top-right of window, then 'Import' option.
world_map_C

world_map_A

world_map_B

I'd also suggest inserting some 'Debug' nodes so you can see what the received data looks likes and its format coming out of the MQTT-In and MySQL nodes.

9

So I took the data you provided and put it in an inject node so I could test it. This is the inject node:

[{"id":"e667c7e50b8a7b19","type":"inject","z":"e3aee37cc83a31ac","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"name\":\"library\",\"lat\":25.15029,\"lon\":121.77539,\"url\":\"https://li.ntou.edu.tw/\",\"iconColor\":\"blue\"}","payloadType":"json","x":670,"y":300,"wires":[["b3f0cbc1780e923b"]]}]

attaching It to the input of the world map node and running it and I see this:

map
map769×612 62.9 KB

So you can see it is working.

Do you want have two separate worldmap nodes?

1 Like
11

That's what I want! Is there any difference between my flow and the flow you copied? Really weird, maybe the problem is about dashboard settings?(btw I delete one ui_worldmap node and connected two function nodes to the same worldmap nodes)

12

I tried the Map in Dashboard and another examples, but these examples are rarely
used dashboard nodes

13

One difference I can see is in @zenofmud 'test' Inject node he hasn't got the 'imageURL' entry which in your screenshot says it is undefined. Not sure if having an undefined value will upset things. Might be worth temporarily removing the entry and see if your map works.

{
    "name": "library",
    "lat": 25.15029,
    "lon": 121.77539,
    "url": "https://li.ntou.edu.tw/",
    "iconColor": "blue"
}
14

@dynamicdave is correct, the undefined variable imageUrl is causing your problem. Either fill it in or remove it from the object,

15

Can you raise as an issue please ? Thanks

16

um I found that Palette shows " * type_already_registered", and I just tried a simple flow of dashboard, then it shows "Welcome to the Node-RED Dashboard
Please add some UI nodes to your flow and redeplo", maybe this is the problem, should I delete somthing?

17

sorry what do you mean?

18

I'm unclear about what you mean

um I found that Palette shows " * type_already_registered"
What did you do to have this happen? Can you provide a screen shot?

I just tried a simple flow of dashboard, then it shows "Welcome to the Node-RED Dashboard Please add some UI nodes to your flow and redeploy"
Did you do this on a completely new flow? Please export and attach the flow.

19

螢幕擷取畫面 2024-06-29 234531
螢幕擷取畫面 2024-06-29 234531954×765 25.1 KB

螢幕擷取畫面 2024-06-30 001347
螢幕擷取畫面 2024-06-30 0013471485×770 91.3 KB

thi original flow shows only worldmap just like before
螢幕擷取畫面 2024-06-30 001242
螢幕擷取畫面 2024-06-30 0012421919×774 95.8 KB

if I delete the worldmap node and redeploy
螢幕擷取畫面 2024-06-29 234247
螢幕擷取畫面 2024-06-29 2342471916×824 21.7 KB

if I see this, I need to restart nodered, or I won't see anything whatever I change the flow and redeploy. After I restart the node-red:
螢幕擷取畫面 2024-06-30 002613
螢幕擷取畫面 2024-06-30 0026131480×738 84.2 KB

螢幕擷取畫面 2024-06-30 001228
螢幕擷取畫面 2024-06-30 0012281919×822 11.7 KB

ye I can see it but if I try to add worldmap node, then I'll back to the original situation. I'm trying to delete dashboard-evi, I guess maybe it cause some problem, but I can't do this either...

20

Certainly it will cause problems.
Go into your .node-red folder (assuming this is a conventional install) and run
npm remove the-full-name-of-dashboard-evi
I don't know exactly what it is called. Then restart node red.

1 Like
21

Finally I sloved this stupid problem, thank you and zenofmud and dynamicdave!

2 Likes