diff --git a/web/package-lock.json b/web/package-lock.json
index cb494740b2..4475a47c8c 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -27,6 +27,7 @@
         "justified-layout": "^4.1.0",
         "lodash-es": "^4.17.21",
         "luxon": "^3.4.4",
+        "pmtiles": "^4.3.0",
         "qrcode": "^1.5.4",
         "socket.io-client": "~4.8.0",
         "svelte-gestures": "^5.1.3",
@@ -2481,9 +2482,10 @@
       "dev": true
     },
     "node_modules/@types/leaflet": {
-      "version": "1.9.8",
-      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz",
-      "integrity": "sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==",
+      "version": "1.9.16",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.16.tgz",
+      "integrity": "sha512-wzZoyySUxkgMZ0ihJ7IaUIblG8Rdc8AbbZKLneyn+QjYsj5q1QU7TEKYqwTr10BGSzY5LI7tJk9Ifo+mEjdFRw==",
+      "license": "MIT",
       "dependencies": {
         "@types/geojson": "*"
       }
@@ -6884,12 +6886,12 @@
       }
     },
     "node_modules/pmtiles": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/pmtiles/-/pmtiles-3.0.3.tgz",
-      "integrity": "sha512-tj4l3HHJd6/qf9VefzlPK2eYEQgbf+4uXPzNlrj3k7hHvLtibYSxfp51TF6ALt4YezM8MCdiOminnHvdAyqyGg==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/pmtiles/-/pmtiles-4.3.0.tgz",
+      "integrity": "sha512-wnzQeSiYT/MyO63o7AVxwt7+uKqU0QUy2lHrivM7GvecNy0m1A4voVyGey7bujnEW5Hn+ZzLdvHPoFaqrOzbPA==",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "@types/leaflet": "^1.9.8",
-        "fflate": "^0.8.0"
+        "fflate": "^0.8.2"
       }
     },
     "node_modules/pngjs": {
@@ -8985,6 +8987,16 @@
         }
       }
     },
+    "node_modules/svelte-maplibre/node_modules/pmtiles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pmtiles/-/pmtiles-3.2.1.tgz",
+      "integrity": "sha512-3R4fBwwoli5mw7a6t1IGwOtfmcSAODq6Okz0zkXhS1zi9sz1ssjjIfslwPvcWw5TNhdjNBUg9fgfPLeqZlH6ng==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/leaflet": "^1.9.8",
+        "fflate": "^0.8.0"
+      }
+    },
     "node_modules/svelte-parse-markup": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/svelte-parse-markup/-/svelte-parse-markup-0.1.5.tgz",
diff --git a/web/package.json b/web/package.json
index ad6dff891d..e8adaf6221 100644
--- a/web/package.json
+++ b/web/package.json
@@ -84,6 +84,7 @@
     "justified-layout": "^4.1.0",
     "lodash-es": "^4.17.21",
     "luxon": "^3.4.4",
+    "pmtiles": "^4.3.0",
     "qrcode": "^1.5.4",
     "socket.io-client": "~4.8.0",
     "svelte-gestures": "^5.1.3",
diff --git a/web/src/lib/components/shared-components/map/map.svelte b/web/src/lib/components/shared-components/map/map.svelte
index 7644064d9d..5fba0c6787 100644
--- a/web/src/lib/components/shared-components/map/map.svelte
+++ b/web/src/lib/components/shared-components/map/map.svelte
@@ -1,4 +1,8 @@
 <script lang="ts" module>
+  import { Protocol } from 'pmtiles';
+
+  let protocol = new Protocol();
+  void maplibregl.addProtocol('pmtiles', protocol.tile);
   void maplibregl.setRTLTextPlugin(mapboxRtlUrl, true);
 </script>