Add OpenCellId for example of preview of BaseData

.vscode/settings.json

@@ -5,6 +5,7 @@
     "arcgis",
     "arcgisonline",
     "BODC",
+    "cellid",
     "clearmap",
     "cyberjapandata",
     "DAAC",

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"

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
+    }
+  ]
+}

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 = {};

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"
+    />
+  );
+};

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"

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"

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"

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"

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"

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"