diff --git a/web/package-lock.json b/web/package-lock.json
index f0273a6e79..d7a4c9d85d 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -27,13 +27,14 @@
         "justified-layout": "^4.1.0",
         "lodash-es": "^4.17.21",
         "luxon": "^3.4.4",
+        "maplibre-gl": "^5.3.0",
         "pmtiles": "^4.3.0",
         "qrcode": "^1.5.4",
         "socket.io-client": "~4.8.0",
         "svelte-gestures": "^5.1.3",
         "svelte-i18n": "^4.0.1",
         "svelte-local-storage-store": "^0.6.4",
-        "svelte-maplibre": "^0.9.13",
+        "svelte-maplibre": "^1.0.0",
         "thumbhash": "^0.1.1"
       },
       "devDependencies": {
@@ -1629,7 +1630,8 @@
     "node_modules/@mapbox/unitbezier": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
-      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
+      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==",
+      "license": "BSD-2-Clause"
     },
     "node_modules/@mapbox/vector-tile": {
       "version": "1.3.1",
@@ -1648,16 +1650,18 @@
       }
     },
     "node_modules/@maplibre/maplibre-gl-style-spec": {
-      "version": "20.1.1",
-      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-20.1.1.tgz",
-      "integrity": "sha512-z85ARNPCBI2Cs5cPOS3DSbraTN+ue8zrcYVoSWBuNrD/mA+2SKAJ+hIzI22uN7gac6jBMnCdpPKRxS/V0KSZVQ==",
+      "version": "23.1.0",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-23.1.0.tgz",
+      "integrity": "sha512-R6/ihEuC5KRexmKIYkWqUv84Gm+/QwsOUgHyt1yy2XqCdGdLvlBWVWIIeTZWN4NGdwmY6xDzdSGU2R9oBLNg2w==",
+      "license": "ISC",
       "dependencies": {
         "@mapbox/jsonlint-lines-primitives": "~2.0.2",
         "@mapbox/unitbezier": "^0.0.1",
         "json-stringify-pretty-compact": "^4.0.0",
         "minimist": "^1.2.8",
+        "quickselect": "^3.0.0",
         "rw": "^1.3.3",
-        "sort-object": "^3.0.3"
+        "tinyqueue": "^3.0.0"
       },
       "bin": {
         "gl-style-format": "dist/gl-style-format.mjs",
@@ -1665,6 +1669,18 @@
         "gl-style-validate": "dist/gl-style-validate.mjs"
       }
     },
+    "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/quickselect": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
+      "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
+      "license": "ISC"
+    },
+    "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/tinyqueue": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
+      "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==",
+      "license": "ISC"
+    },
     "node_modules/@mdi/js": {
       "version": "7.4.47",
       "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
@@ -2474,9 +2490,10 @@
       "license": "MIT"
     },
     "node_modules/@types/geojson": {
-      "version": "7946.0.14",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
-      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg=="
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "license": "MIT"
     },
     "node_modules/@types/geojson-vt": {
       "version": "3.2.5",
@@ -3161,14 +3178,6 @@
         "dequal": "^2.0.3"
       }
     },
-    "node_modules/arr-union": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
-      "integrity": "sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/assertion-error": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
@@ -3179,14 +3188,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/assign-symbols": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
-      "integrity": "sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -3351,23 +3352,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/bytewise": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/bytewise/-/bytewise-1.1.0.tgz",
-      "integrity": "sha512-rHuuseJ9iQ0na6UDhnrRVDh8YnWVlU6xM3VH6q/+yHDeUH2zIhUzP+2/h3LIrhLDBtTqzWpE3p3tP/boefskKQ==",
-      "dependencies": {
-        "bytewise-core": "^1.2.2",
-        "typewise": "^1.0.3"
-      }
-    },
-    "node_modules/bytewise-core": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/bytewise-core/-/bytewise-core-1.2.3.tgz",
-      "integrity": "sha512-nZD//kc78OOxeYtRlVk8/zXqTB4gf/nlguL1ggWA8FuchMyOxcyHR4QPQZMUmA7czC+YnaBrPUCubqAWe50DaA==",
-      "dependencies": {
-        "typewise-core": "^1.2"
-      }
-    },
     "node_modules/cac": {
       "version": "6.7.14",
       "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
@@ -4011,7 +3995,8 @@
     "node_modules/earcut": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
-      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==",
+      "peer": true
     },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
@@ -4700,17 +4685,6 @@
         "type": "^2.7.2"
       }
     },
-    "node_modules/extend-shallow": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
-      "dependencies": {
-        "is-extendable": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/fabric": {
       "version": "6.6.1",
       "resolved": "https://registry.npmjs.org/fabric/-/fabric-6.6.1.tgz",
@@ -5205,7 +5179,8 @@
     "node_modules/geojson-vt": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
-      "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
+      "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==",
+      "peer": true
     },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
@@ -5226,14 +5201,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/get-value": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
-      "integrity": "sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/gl-matrix": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
@@ -5295,27 +5262,41 @@
       }
     },
     "node_modules/global-prefix": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
-      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-4.0.0.tgz",
+      "integrity": "sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==",
+      "license": "MIT",
       "dependencies": {
-        "ini": "^1.3.5",
-        "kind-of": "^6.0.2",
-        "which": "^1.3.1"
+        "ini": "^4.1.3",
+        "kind-of": "^6.0.3",
+        "which": "^4.0.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=16"
+      }
+    },
+    "node_modules/global-prefix/node_modules/isexe": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
+      "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=16"
       }
     },
     "node_modules/global-prefix/node_modules/which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
+      "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
+      "license": "ISC",
       "dependencies": {
-        "isexe": "^2.0.0"
+        "isexe": "^3.1.1"
       },
       "bin": {
-        "which": "bin/which"
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^16.13.0 || >=18.0.0"
       }
     },
     "node_modules/globals": {
@@ -5603,9 +5584,13 @@
       "optional": true
     },
     "node_modules/ini": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.3.tgz",
+      "integrity": "sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==",
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
     },
     "node_modules/inline-style-parser": {
       "version": "0.2.4",
@@ -5686,14 +5671,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/is-extendable": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -5734,6 +5711,7 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
       "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
       "dependencies": {
         "isobject": "^3.0.1"
       },
@@ -5782,6 +5760,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5975,18 +5954,14 @@
     "node_modules/json-stringify-pretty-compact": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-4.0.0.tgz",
-      "integrity": "sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q=="
+      "integrity": "sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==",
+      "license": "MIT"
     },
     "node_modules/just-compare": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/just-compare/-/just-compare-2.3.0.tgz",
       "integrity": "sha512-6shoR7HDT+fzfL3gBahx1jZG3hWLrhPAf+l7nCwahDdT9XDtosB9kIF0ZrzUp5QY8dJWfQVr5rnsPqsbvflDzg=="
     },
-    "node_modules/just-flush": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/just-flush/-/just-flush-2.3.0.tgz",
-      "integrity": "sha512-fBuxQ1gJ61BurmhwKS5LYTzhkbrT5j/2U7ax+UbLm9aRvCTh2h6AfzLteOckE4KKomqOf0Y3zIG3Xu57sRsKUg=="
-    },
     "node_modules/justified-layout": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/justified-layout/-/justified-layout-4.1.0.tgz",
@@ -6243,9 +6218,10 @@
       }
     },
     "node_modules/maplibre-gl": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.0.1.tgz",
-      "integrity": "sha512-UF+wI2utIciFXNg6+gYaMe7IGa9fMLzAZM3vdlGilqyWYmuibjcN40yGVgkz2r28//aOLphvtli3TbDEjEqHww==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-5.3.0.tgz",
+      "integrity": "sha512-qru6B6jHlDPR4Q9/P4W1zEPbPofR4wwYbrrjiHKWI7yLtyXmpJ1/G1KaIYDr5uNdFbPZ7uiZAWdqtfdNLmIhGg==",
+      "license": "BSD-3-Clause",
       "dependencies": {
         "@mapbox/geojson-rewind": "^0.5.2",
         "@mapbox/jsonlint-lines-primitives": "^2.0.2",
@@ -6254,24 +6230,24 @@
         "@mapbox/unitbezier": "^0.0.1",
         "@mapbox/vector-tile": "^1.3.1",
         "@mapbox/whoots-js": "^3.1.0",
-        "@maplibre/maplibre-gl-style-spec": "^20.1.1",
-        "@types/geojson": "^7946.0.14",
+        "@maplibre/maplibre-gl-style-spec": "^23.1.0",
+        "@types/geojson": "^7946.0.16",
         "@types/geojson-vt": "3.2.5",
         "@types/mapbox__point-geometry": "^0.1.4",
         "@types/mapbox__vector-tile": "^1.3.4",
         "@types/pbf": "^3.0.5",
         "@types/supercluster": "^7.1.3",
-        "earcut": "^2.2.4",
-        "geojson-vt": "^3.2.1",
+        "earcut": "^3.0.1",
+        "geojson-vt": "^4.0.2",
         "gl-matrix": "^3.4.3",
-        "global-prefix": "^3.0.0",
+        "global-prefix": "^4.0.0",
         "kdbush": "^4.0.2",
         "murmurhash-js": "^1.0.0",
-        "pbf": "^3.2.1",
+        "pbf": "^3.3.0",
         "potpack": "^2.0.0",
-        "quickselect": "^2.0.0",
+        "quickselect": "^3.0.0",
         "supercluster": "^8.0.1",
-        "tinyqueue": "^2.0.3",
+        "tinyqueue": "^3.0.0",
         "vt-pbf": "^3.1.3"
       },
       "engines": {
@@ -6282,6 +6258,30 @@
         "url": "https://github.com/maplibre/maplibre-gl-js?sponsor=1"
       }
     },
+    "node_modules/maplibre-gl/node_modules/earcut": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.1.tgz",
+      "integrity": "sha512-0l1/0gOjESMeQyYaK5IDiPNvFeu93Z/cO0TjZh9eZ1vyCtZnA7KMZ8rQggpsJHIbGSdrqYq9OhuveadOVHCshw==",
+      "license": "ISC"
+    },
+    "node_modules/maplibre-gl/node_modules/geojson-vt": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-4.0.2.tgz",
+      "integrity": "sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A==",
+      "license": "ISC"
+    },
+    "node_modules/maplibre-gl/node_modules/quickselect": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
+      "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
+      "license": "ISC"
+    },
+    "node_modules/maplibre-gl/node_modules/tinyqueue": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
+      "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==",
+      "license": "ISC"
+    },
     "node_modules/memoizee": {
       "version": "0.4.17",
       "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.17.tgz",
@@ -6842,9 +6842,10 @@
       }
     },
     "node_modules/pbf": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
-      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.3.0.tgz",
+      "integrity": "sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==",
+      "license": "BSD-3-Clause",
       "dependencies": {
         "ieee754": "^1.1.12",
         "resolve-protobuf-schema": "^2.1.0"
@@ -7424,7 +7425,8 @@
     "node_modules/quickselect": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
-      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
+      "peer": true
     },
     "node_modules/react-is": {
       "version": "17.0.2",
@@ -7868,20 +7870,6 @@
       "integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==",
       "dev": true
     },
-    "node_modules/set-value": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
-      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
-      "dependencies": {
-        "extend-shallow": "^2.0.1",
-        "is-extendable": "^0.1.1",
-        "is-plain-object": "^2.0.3",
-        "split-string": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/shallow-clone": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
@@ -8060,38 +8048,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/sort-asc": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.2.0.tgz",
-      "integrity": "sha512-umMGhjPeHAI6YjABoSTrFp2zaBtXBej1a0yKkuMUyjjqu6FJsTF+JYwCswWDg+zJfk/5npWUUbd33HH/WLzpaA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/sort-desc": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.2.0.tgz",
-      "integrity": "sha512-NqZqyvL4VPW+RAxxXnB8gvE1kyikh8+pR+T+CXLksVRN9eiQqkQlPwqWYU0mF9Jm7UnctShlxLyAt1CaBOTL1w==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/sort-object": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-3.0.3.tgz",
-      "integrity": "sha512-nK7WOY8jik6zaG9CRwZTaD5O7ETWDLZYMM12pqY8htll+7dYeqGfEUPcUBHOpSJg2vJOrvFIY2Dl5cX2ih1hAQ==",
-      "dependencies": {
-        "bytewise": "^1.1.0",
-        "get-value": "^2.0.2",
-        "is-extendable": "^0.1.1",
-        "sort-asc": "^0.2.0",
-        "sort-desc": "^0.2.0",
-        "union-value": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -8155,40 +8111,6 @@
       "dev": true,
       "license": "CC0-1.0"
     },
-    "node_modules/split-string": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
-      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
-      "dependencies": {
-        "extend-shallow": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/split-string/node_modules/extend-shallow": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-      "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
-      "dependencies": {
-        "assign-symbols": "^1.0.0",
-        "is-extendable": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/split-string/node_modules/is-extendable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-      "dependencies": {
-        "is-plain-object": "^2.0.4"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -8967,23 +8889,22 @@
       }
     },
     "node_modules/svelte-maplibre": {
-      "version": "0.9.14",
-      "resolved": "https://registry.npmjs.org/svelte-maplibre/-/svelte-maplibre-0.9.14.tgz",
-      "integrity": "sha512-5HBvibzU/Uf3g8eEz4Hty5XAwoBhW9Tp7NQEvb80U/glR/M1IHyzUKss6XMq8Zbci2wtsASeoPc6dA5R4+0e0w==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/svelte-maplibre/-/svelte-maplibre-1.0.0.tgz",
+      "integrity": "sha512-lw6t0dnsaYzIPECqymSPnODuWGQnVVzEN1F0cPTXOIDcltEMkefDL3E5MnQ5YU4BY+VYedRDFYo7swEjZwpQCA==",
       "license": "MIT",
       "dependencies": {
         "d3-geo": "^3.1.0",
         "dequal": "^2.0.3",
         "just-compare": "^2.3.0",
-        "just-flush": "^2.3.0",
-        "maplibre-gl": "^4.0.0",
+        "maplibre-gl": "^4.0.0 || ^5.0.1",
         "pmtiles": "^3.0.3"
       },
       "peerDependencies": {
-        "@deck.gl/core": "^8.8.0",
-        "@deck.gl/layers": "^8.8.0",
-        "@deck.gl/mapbox": "^8.8.0",
-        "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0"
+        "@deck.gl/core": "^9",
+        "@deck.gl/layers": "^9",
+        "@deck.gl/mapbox": "^9",
+        "svelte": "^5.0.0"
       },
       "peerDependenciesMeta": {
         "@deck.gl/core": {
@@ -9321,7 +9242,8 @@
     "node_modules/tinyqueue": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
-      "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
+      "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==",
+      "peer": true
     },
     "node_modules/tinyrainbow": {
       "version": "2.0.0",
@@ -9484,19 +9406,6 @@
         "typescript": ">=4.8.4 <5.9.0"
       }
     },
-    "node_modules/typewise": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/typewise/-/typewise-1.0.3.tgz",
-      "integrity": "sha512-aXofE06xGhaQSPzt8hlTY+/YWQhm9P0jYUp1f2XtmW/3Bk0qzXcyFWAtPoo2uTGQj1ZwbDuSyuxicq+aDo8lCQ==",
-      "dependencies": {
-        "typewise-core": "^1.2.0"
-      }
-    },
-    "node_modules/typewise-core": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/typewise-core/-/typewise-core-1.2.0.tgz",
-      "integrity": "sha512-2SCC/WLzj2SbUwzFOzqMCkz5amXLlxtJqDKTICqg30x+2DZxcfZN2MvQZmGfXWKNWaKK9pBPsvkcwv8bF/gxKg=="
-    },
     "node_modules/uglify-js": {
       "version": "3.17.4",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
@@ -9522,20 +9431,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/union-value": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
-      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
-      "dependencies": {
-        "arr-union": "^3.1.0",
-        "get-value": "^2.0.6",
-        "is-extendable": "^0.1.1",
-        "set-value": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/universalify": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
diff --git a/web/package.json b/web/package.json
index 634d62bafc..cf24ccc939 100644
--- a/web/package.json
+++ b/web/package.json
@@ -42,13 +42,14 @@
     "justified-layout": "^4.1.0",
     "lodash-es": "^4.17.21",
     "luxon": "^3.4.4",
+    "maplibre-gl": "^5.3.0",
     "pmtiles": "^4.3.0",
     "qrcode": "^1.5.4",
     "socket.io-client": "~4.8.0",
     "svelte-gestures": "^5.1.3",
     "svelte-i18n": "^4.0.1",
     "svelte-local-storage-store": "^0.6.4",
-    "svelte-maplibre": "^0.9.13",
+    "svelte-maplibre": "^1.0.0",
     "thumbhash": "^0.1.1"
   },
   "devDependencies": {
diff --git a/web/src/lib/components/shared-components/map/map.svelte b/web/src/lib/components/shared-components/map/map.svelte
index 5fba0c6787..dc594bae3f 100644
--- a/web/src/lib/components/shared-components/map/map.svelte
+++ b/web/src/lib/components/shared-components/map/map.svelte
@@ -16,7 +16,7 @@
   import mapboxRtlUrl from '@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js?url';
   import { mdiCog, mdiMap, mdiMapMarker } from '@mdi/js';
   import type { Feature, GeoJsonProperties, Geometry, Point } from 'geojson';
-  import type { GeoJSONSource, LngLatLike } from 'maplibre-gl';
+  import { type GeoJSONSource, GlobeControl, type LngLatLike } from 'maplibre-gl';
   import maplibregl from 'maplibre-gl';
   import { t } from 'svelte-i18n';
   import {
@@ -70,7 +70,6 @@
 
   const theme = $derived($mapSettings.allowDarkMode ? $colorTheme.value : Theme.LIGHT);
   const styleUrl = $derived(theme === Theme.DARK ? $serverConfig.mapDarkStyleUrl : $serverConfig.mapLightStyleUrl);
-  const style = $derived(fetch(styleUrl).then((response) => response.json()));
 
   export function addClipMapMarker(lng: number, lat: number) {
     if (map) {
@@ -143,112 +142,132 @@
       country: featurePoint.properties.country,
     };
   };
+
+  $effect(() => {
+    map?.setStyle(styleUrl, {
+      transformStyle: (previousStyle, nextStyle) => {
+        if (previousStyle) {
+          // Preserves the custom map markers from the previous style when the theme is switched
+          // Required until https://github.com/dimfeld/svelte-maplibre/issues/146 is fixed
+          const customLayers = previousStyle.layers.filter((l) => l.type == 'fill' && l.source == 'geojson');
+          const layers = nextStyle.layers.concat(customLayers);
+          const sources = nextStyle.sources;
+
+          for (const [key, value] of Object.entries(previousStyle.sources || {})) {
+            if (key.startsWith('geojson')) {
+              sources[key] = value;
+            }
+          }
+
+          return {
+            ...nextStyle,
+            sources,
+            layers,
+          };
+        }
+        return nextStyle;
+      },
+    });
+  });
 </script>
 
-{#await style then style}
-  <MapLibre
-    {hash}
-    {style}
-    class="h-full"
-    {center}
-    {zoom}
-    attributionControl={false}
-    diffStyleUpdates={true}
-    on:load={(event) => event.detail.setMaxZoom(18)}
-    on:load={(event) => event.detail.on('click', handleMapClick)}
-    bind:map
-  >
-    {#snippet children({ map }: { map: maplibregl.Map })}
-      <NavigationControl position="top-left" showCompass={!simplified} />
-
-      {#if !simplified}
-        <GeolocateControl position="top-left" />
-        <FullscreenControl position="top-left" />
-        <ScaleControl />
-        <AttributionControl compact={false} />
-      {/if}
-
-      {#if showSettingsModal !== undefined}
-        <Control>
-          <ControlGroup>
-            <ControlButton on:click={() => (showSettingsModal = true)}><Icon path={mdiCog} size="100%" /></ControlButton
-            >
-          </ControlGroup>
-        </Control>
-      {/if}
-
-      {#if onOpenInMapView}
-        <Control position="top-right">
-          <ControlGroup>
-            <ControlButton on:click={() => onOpenInMapView()}>
-              <Icon title={$t('open_in_map_view')} path={mdiMap} size="100%" />
-            </ControlButton>
-          </ControlGroup>
-        </Control>
-      {/if}
-
-      <GeoJSON
-        data={{
-          type: 'FeatureCollection',
-          features: mapMarkers.map((marker) => asFeature(marker)),
-        }}
-        id="geojson"
-        cluster={{ radius: 500, maxZoom: 24 }}
-      >
-        <MarkerLayer
-          applyToClusters
-          asButton
-          on:click={(event) => handlePromiseError(handleClusterClick(event.detail.feature.properties?.cluster_id, map))}
-        >
-          {#snippet children({ feature }: { feature: maplibregl.Feature })}
-            <div
-              class="rounded-full w-[40px] h-[40px] bg-immich-primary text-immich-gray flex justify-center items-center font-mono font-bold shadow-lg hover:bg-immich-dark-primary transition-all duration-200 hover:text-immich-dark-bg opacity-90"
-            >
-              {feature.properties?.point_count}
-            </div>
-          {/snippet}
-        </MarkerLayer>
-        <MarkerLayer
-          applyToClusters={false}
-          asButton
-          on:click={(event) => {
-            if (!popup) {
-              handleAssetClick(event.detail.feature.properties?.id, map);
-            }
-          }}
-        >
-          {#snippet children({ feature }: { feature: Feature<Geometry, GeoJsonProperties> })}
-            {#if useLocationPin}
-              <Icon
-                path={mdiMapMarker}
-                size="50px"
-                class="location-pin dark:text-immich-dark-primary text-immich-primary"
-              />
-            {:else}
-              <img
-                src={getAssetThumbnailUrl(feature.properties?.id)}
-                class="rounded-full w-[60px] h-[60px] border-2 border-immich-primary shadow-lg hover:border-immich-dark-primary transition-all duration-200 hover:scale-150 object-cover bg-immich-primary"
-                alt={feature.properties?.city && feature.properties.country
-                  ? $t('map_marker_for_images', {
-                      values: { city: feature.properties.city, country: feature.properties.country },
-                    })
-                  : $t('map_marker_with_image')}
-              />
-            {/if}
-            {#if popup}
-              <Popup offset={[0, -30]} openOn="click" closeOnClickOutside>
-                {@render popup?.({ marker: asMarker(feature) })}
-              </Popup>
-            {/if}
-          {/snippet}
-        </MarkerLayer>
-      </GeoJSON>
-    {/snippet}
-  </MapLibre>
-  <style>
-    .location-pin {
-      transform: translate(0, -50%);
-      filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.3));
+<!--  We handle style loading ourselves so we set style blank here -->
+<MapLibre
+  {hash}
+  style=""
+  class="h-full"
+  {center}
+  {zoom}
+  attributionControl={false}
+  diffStyleUpdates={true}
+  onload={(event) => {
+    event.setMaxZoom(18);
+    event.on('click', handleMapClick);
+    if (!simplified) {
+      event.addControl(new GlobeControl(), 'top-left');
     }
-  </style>
-{/await}
+  }}
+  bind:map
+>
+  {#snippet children({ map }: { map: maplibregl.Map })}
+    <NavigationControl position="top-left" showCompass={!simplified} />
+
+    {#if !simplified}
+      <GeolocateControl position="top-left" />
+      <FullscreenControl position="top-left" />
+      <ScaleControl />
+      <AttributionControl compact={false} />
+    {/if}
+
+    {#if showSettingsModal !== undefined}
+      <Control>
+        <ControlGroup>
+          <ControlButton onclick={() => (showSettingsModal = true)}><Icon path={mdiCog} size="100%" /></ControlButton>
+        </ControlGroup>
+      </Control>
+    {/if}
+
+    {#if onOpenInMapView}
+      <Control position="top-right">
+        <ControlGroup>
+          <ControlButton onclick={() => onOpenInMapView()}>
+            <Icon title={$t('open_in_map_view')} path={mdiMap} size="100%" />
+          </ControlButton>
+        </ControlGroup>
+      </Control>
+    {/if}
+
+    <GeoJSON
+      data={{
+        type: 'FeatureCollection',
+        features: mapMarkers.map((marker) => asFeature(marker)),
+      }}
+      id="geojson"
+      cluster={{ radius: 35, maxZoom: 17 }}
+    >
+      <MarkerLayer
+        applyToClusters
+        asButton
+        onclick={(event) => handlePromiseError(handleClusterClick(event.feature.properties?.cluster_id, map))}
+      >
+        {#snippet children({ feature })}
+          <div
+            class="rounded-full w-[40px] h-[40px] bg-immich-primary text-immich-gray flex justify-center items-center font-mono font-bold shadow-lg hover:bg-immich-dark-primary transition-all duration-200 hover:text-immich-dark-bg opacity-90"
+          >
+            {feature.properties?.point_count}
+          </div>
+        {/snippet}
+      </MarkerLayer>
+      <MarkerLayer
+        applyToClusters={false}
+        asButton
+        onclick={(event) => {
+          if (!popup) {
+            handleAssetClick(event.feature.properties?.id, map);
+          }
+        }}
+      >
+        {#snippet children({ feature }: { feature: Feature<Geometry, GeoJsonProperties> })}
+          {#if useLocationPin}
+            <Icon path={mdiMapMarker} size="50px" class="dark:text-immich-dark-primary text-immich-primary" />
+          {:else}
+            <img
+              src={getAssetThumbnailUrl(feature.properties?.id)}
+              class="rounded-full w-[60px] h-[60px] border-2 border-immich-primary shadow-lg hover:border-immich-dark-primary transition-all duration-200 hover:scale-150 object-cover bg-immich-primary"
+              alt={feature.properties?.city && feature.properties.country
+                ? $t('map_marker_for_images', {
+                    values: { city: feature.properties.city, country: feature.properties.country },
+                  })
+                : $t('map_marker_with_image')}
+            />
+          {/if}
+          {#if popup}
+            <Popup offset={[0, -30]} openOn="click" closeOnClickOutside>
+              {@render popup?.({ marker: asMarker(feature) })}
+            </Popup>
+          {/if}
+        {/snippet}
+      </MarkerLayer>
+    </GeoJSON>
+  {/snippet}
+</MapLibre>
diff --git a/web/svelte.config.js b/web/svelte.config.js
index c5c93e5330..269ba2d923 100644
--- a/web/svelte.config.js
+++ b/web/svelte.config.js
@@ -9,6 +9,9 @@ process.env.PUBLIC_IMMICH_PAY_HOST = process.env.PUBLIC_IMMICH_PAY_HOST || 'http
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
+  compilerOptions: {
+    runes: true,
+  },
   preprocess: vitePreprocess(),
   kit: {
     adapter: adapter({