diff --git a/.vscode/settings.json b/.vscode/settings.json
index f86e4e0..8ed91d3 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -5,6 +5,7 @@
     "arcgis",
     "arcgisonline",
     "BODC",
+    "cellid",
     "clearmap",
     "cyberjapandata",
     "DAAC",
diff --git a/package-lock.json b/package-lock.json
index 340fb22..77cc988 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "maplibre-gl": "^4.4.0",
+        "pmtiles": "^3.0.6",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-map-gl": "^7.1.7"
@@ -6669,6 +6670,15 @@
       "integrity": "sha512-R5M+SYhMbwBeQcNXYWNCZkl09vkVfAtcPIaCGdzIkkbeaTrVbGQ7HVgi4s+EmM/M1K4ZuWQH0jGcvMvNePfxYA==",
       "license": "MIT"
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.12.tgz",
+      "integrity": "sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/lodash": {
       "version": "4.17.6",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.6.tgz",
@@ -9535,6 +9545,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -12676,6 +12692,16 @@
         "pathe": "^1.1.2"
       }
     },
+    "node_modules/pmtiles": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/pmtiles/-/pmtiles-3.0.6.tgz",
+      "integrity": "sha512-IdeMETd5lBIDVTLul1HFl0Q7l4KLJjzdxgcp+sN7pYvbipaV7o/0u0HiV06kaFCD0IGEN8KtUHyFZpY30WMflw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/leaflet": "^1.9.8",
+        "fflate": "^0.8.0"
+      }
+    },
     "node_modules/polished": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/polished/-/polished-4.3.1.tgz",
diff --git a/package.json b/package.json
index 3d405f2..3247840 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "maplibre-gl": "^4.4.0",
+    "pmtiles": "^3.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.7"
diff --git a/public/stylejson/opencellid.org/style.json b/public/stylejson/opencellid.org/style.json
new file mode 100644
index 0000000..cb35182
--- /dev/null
+++ b/public/stylejson/opencellid.org/style.json
@@ -0,0 +1,20 @@
+{
+  "version": 8,
+  "sources": {
+    "opencellid": {
+      "type": "vector",
+      "url": "pmtiles://https://data.source.coop/smartmaps/opencellid/cellid.pmtiles",
+      "attribution": "<a href=\"https://opencellid.org/\">OpenCelliD</a>"
+    }
+  },
+  "layers": [
+    {
+      "id": "opencellid",
+      "source": "opencellid",
+      "source-layer": "a",
+      "type": "circle",
+      "maxzoom": 18,
+      "minzoom": 2
+    }
+  ]
+}
diff --git a/src/components/BaseData/OpenCellId/index.stories.ts b/src/components/BaseData/OpenCellId/index.stories.ts
new file mode 100644
index 0000000..9f172e3
--- /dev/null
+++ b/src/components/BaseData/OpenCellId/index.stories.ts
@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { OpenCellId } from ".";
+
+const meta = {
+  component: OpenCellId,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof OpenCellId>;
+
+export default meta;
+type Story = StoryObj<typeof OpenCellId>;
+
+export const Preview: Story = {};
diff --git a/src/components/BaseData/OpenCellId/index.tsx b/src/components/BaseData/OpenCellId/index.tsx
new file mode 100644
index 0000000..02cc50f
--- /dev/null
+++ b/src/components/BaseData/OpenCellId/index.tsx
@@ -0,0 +1,30 @@
+import { Protocol } from "pmtiles";
+import maplibregl from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+import { Map } from "react-map-gl/maplibre";
+import { useEffect } from "react";
+
+export const OpenCellId = () => {
+  useEffect(() => {
+    const protocol = new Protocol();
+    maplibregl.addProtocol("pmtiles", protocol.tile);
+    return () => {
+      maplibregl.removeProtocol("pmtiles");
+    };
+  }, []);
+
+  return (
+    <Map
+      initialViewState={{
+        longitude: 0,
+        latitude: 0,
+        zoom: 4,
+      }}
+      dragPan={true}
+      scrollZoom={true}
+      hash={false}
+      style={{ width: "100%", height: "100%" }}
+      mapStyle="stylejson/opencellid.org/style.json"
+    />
+  );
+};
diff --git a/src/components/BaseMaps/OpenStreetMap/OpenStreetMapFrHotRaster/index.tsx b/src/components/BaseMaps/OpenStreetMap/OpenStreetMapFrHotRaster/index.tsx
index c0526a1..2e31a07 100644
--- a/src/components/BaseMaps/OpenStreetMap/OpenStreetMapFrHotRaster/index.tsx
+++ b/src/components/BaseMaps/OpenStreetMap/OpenStreetMapFrHotRaster/index.tsx
@@ -9,8 +9,8 @@ export const OpenStreetMapFrHotRaster = () => {
         latitude: 0,
         zoom: 4,
       }}
-      dragPan={false}
-      scrollZoom={false}
+      dragPan={true}
+      scrollZoom={true}
       hash={false}
       style={{ width: "100%", height: "100%" }}
       mapStyle="stylejson/tile.openstreetmap.fr/hot/style.json"
diff --git a/src/components/BaseMaps/OpenStreetMap/OpenStreetMapJpOSMBrightVector/index.tsx b/src/components/BaseMaps/OpenStreetMap/OpenStreetMapJpOSMBrightVector/index.tsx
index 30eaf1d..1fffd12 100644
--- a/src/components/BaseMaps/OpenStreetMap/OpenStreetMapJpOSMBrightVector/index.tsx
+++ b/src/components/BaseMaps/OpenStreetMap/OpenStreetMapJpOSMBrightVector/index.tsx
@@ -9,8 +9,8 @@ export const OpenStreetMapJpOSMBrightVector = () => {
         latitude: 0,
         zoom: 4,
       }}
-      dragPan={false}
-      scrollZoom={false}
+      dragPan={true}
+      scrollZoom={true}
       hash={false}
       style={{ width: "100%", height: "100%" }}
       mapStyle="https://tile.openstreetmap.jp/styles/osm-bright/style.json"
diff --git a/src/components/BaseMaps/OpenStreetMap/OpenStreetMapOrgRaster/index.tsx b/src/components/BaseMaps/OpenStreetMap/OpenStreetMapOrgRaster/index.tsx
index f5b2915..9f683f5 100644
--- a/src/components/BaseMaps/OpenStreetMap/OpenStreetMapOrgRaster/index.tsx
+++ b/src/components/BaseMaps/OpenStreetMap/OpenStreetMapOrgRaster/index.tsx
@@ -9,8 +9,8 @@ export const OpenStreetMapOrgRaster = () => {
         latitude: 0,
         zoom: 4,
       }}
-      dragPan={false}
-      scrollZoom={false}
+      dragPan={true}
+      scrollZoom={true}
       hash={false}
       style={{ width: "100%", height: "100%" }}
       mapStyle="stylejson/tile.openstreetmap.org/style.json"
diff --git a/src/components/BaseMaps/SatelliteImagery/ArcGISWorldImagery/index.tsx b/src/components/BaseMaps/SatelliteImagery/ArcGISWorldImagery/index.tsx
index 1b29bdb..b564e73 100644
--- a/src/components/BaseMaps/SatelliteImagery/ArcGISWorldImagery/index.tsx
+++ b/src/components/BaseMaps/SatelliteImagery/ArcGISWorldImagery/index.tsx
@@ -9,8 +9,8 @@ export const ArcGISWorldImagery = () => {
         latitude: 0,
         zoom: 4,
       }}
-      dragPan={false}
-      scrollZoom={false}
+      dragPan={true}
+      scrollZoom={true}
       hash={false}
       style={{ width: "100%", height: "100%" }}
       mapStyle="stylejson/server.arcgisonline.com/world_imagery/style.json"
diff --git a/src/components/BaseMaps/SatelliteImagery/GSISeamlessPhoto/index.tsx b/src/components/BaseMaps/SatelliteImagery/GSISeamlessPhoto/index.tsx
index 9a20dad..08eff10 100644
--- a/src/components/BaseMaps/SatelliteImagery/GSISeamlessPhoto/index.tsx
+++ b/src/components/BaseMaps/SatelliteImagery/GSISeamlessPhoto/index.tsx
@@ -9,8 +9,8 @@ export const GSISeamlessPhoto = () => {
         latitude: 0,
         zoom: 4,
       }}
-      dragPan={false}
-      scrollZoom={false}
+      dragPan={true}
+      scrollZoom={true}
       hash={false}
       style={{ width: "100%", height: "100%" }}
       mapStyle="stylejson/cyberjapandata.gsi.go.jp/xyz/seamlessphoto/style.json"
diff --git a/src/components/BaseMaps/UNClearMapRaster/index.tsx b/src/components/BaseMaps/UNClearMapRaster/index.tsx
index ad30ba3..4b02eec 100644
--- a/src/components/BaseMaps/UNClearMapRaster/index.tsx
+++ b/src/components/BaseMaps/UNClearMapRaster/index.tsx
@@ -9,8 +9,8 @@ export const UNClearMapRaster = () => {
         latitude: 0,
         zoom: 4,
       }}
-      dragPan={false}
-      scrollZoom={false}
+      dragPan={true}
+      scrollZoom={true}
       hash={false}
       style={{ width: "100%", height: "100%" }}
       mapStyle="stylejson/geoservices.un.org/clearmap/style.json"