diff --git a/package-lock.json b/package-lock.json
index 87583fb..f2578d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,7 @@
         "maputnik-design": "github:maputnik/design#172b06c",
         "ol": "^6.14.1",
         "ol-mapbox-style": "^7.1.1",
+        "pmtiles": "^2.11.0",
         "prop-types": "^15.8.1",
         "react": "^16.0.0",
         "react-accessible-accordion": "^4.0.0",
@@ -12543,6 +12544,11 @@
       "integrity": "sha512-uJQyMrX5IJZkhoEUBQ3EjxkeiZkppBd5jS/fMTJmfZxLSiaQjv2zD0kTvuvkSH89uFvgSlB6ueGpjD3HWN7Bxw==",
       "dev": true
     },
+    "node_modules/fflate": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.1.tgz",
+      "integrity": "sha512-/exOvEuc+/iaUm105QIiOt4LpBdMTWsXxqR0HDF35vx3fmaKzw7354gTilCh5rkzEt8WYyG//ku3h3nRmd7CHQ=="
+    },
     "node_modules/figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -19335,6 +19341,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/pmtiles": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/pmtiles/-/pmtiles-2.11.0.tgz",
+      "integrity": "sha512-dU9SzzaqmCGpdEuTnIba6bDHT6j09ZJFIXxwGpvkiEnce3ZnBB1VKt6+EOmJGueriweaZLAMTUmKVElU2CBe0g==",
+      "dependencies": {
+        "fflate": "^0.8.0"
+      }
+    },
     "node_modules/pnp-webpack-plugin": {
       "version": "1.6.4",
       "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
@@ -36252,6 +36266,11 @@
       "integrity": "sha512-uJQyMrX5IJZkhoEUBQ3EjxkeiZkppBd5jS/fMTJmfZxLSiaQjv2zD0kTvuvkSH89uFvgSlB6ueGpjD3HWN7Bxw==",
       "dev": true
     },
+    "fflate": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.1.tgz",
+      "integrity": "sha512-/exOvEuc+/iaUm105QIiOt4LpBdMTWsXxqR0HDF35vx3fmaKzw7354gTilCh5rkzEt8WYyG//ku3h3nRmd7CHQ=="
+    },
     "figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -41517,6 +41536,14 @@
         "find-up": "^5.0.0"
       }
     },
+    "pmtiles": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/pmtiles/-/pmtiles-2.11.0.tgz",
+      "integrity": "sha512-dU9SzzaqmCGpdEuTnIba6bDHT6j09ZJFIXxwGpvkiEnce3ZnBB1VKt6+EOmJGueriweaZLAMTUmKVElU2CBe0g==",
+      "requires": {
+        "fflate": "^0.8.0"
+      }
+    },
     "pnp-webpack-plugin": {
       "version": "1.6.4",
       "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
diff --git a/package.json b/package.json
index 749d74b..bf09338 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "maputnik-design": "github:maputnik/design#172b06c",
     "ol": "^6.14.1",
     "ol-mapbox-style": "^7.1.1",
+    "pmtiles": "^2.11.0",
     "prop-types": "^15.8.1",
     "react": "^16.0.0",
     "react-accessible-accordion": "^4.0.0",
diff --git a/src/components/MapMaplibreGl.jsx b/src/components/MapMaplibreGl.jsx
index ceba1ab..ae02712 100644
--- a/src/components/MapMaplibreGl.jsx
+++ b/src/components/MapMaplibreGl.jsx
@@ -13,7 +13,7 @@ import { colorHighlightedLayer } from '../libs/highlight'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import '../maplibregl.css'
 import '../libs/maplibre-rtl'
-
+import { Protocol } from "pmtiles";
 
 const IS_SUPPORTED = MapLibreGl.supported();
 
@@ -147,6 +147,9 @@ export default class MapMaplibreGl extends React.Component {
 
     const map = new MapLibreGl.Map(mapOpts);
 
+    const protocol = new Protocol();
+    MapLibreGl.addProtocol("pmtiles", protocol.tile);
+
     const mapViewChange = () => {
       const center = map.getCenter();
       const zoom = map.getZoom();