tweak PMTiles source

src/components/Combined/ArmedConflictWithBaseMap/index.tsx

@@ -3,14 +3,7 @@ import maplibregl from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { Layer, Map, Source } from "react-map-gl/maplibre";
 import { useEffect } from "react";
-
-const source = {
-  id: "uppsala-conflict",
-  url: "pmtiles://https://data.source.coop/smartmaps/uppsala-conflict/a.pmtiles",
-  attribution: '<a href="https://opencellid.org/">OpenCelliD</a>',
-  maxzoom: 18,
-  minzoom: 2,
-};
+import { ArmedConflictPMTilesSource as source } from "../../../components/Datasets/ArmedConflict/source";
 
 export const ArmedConflictWithBaseMap: React.FC<{ mapStyle: string }> = ({
   mapStyle,
@@ -39,23 +32,29 @@ export const ArmedConflictWithBaseMap: React.FC<{ mapStyle: string }> = ({
       <Source
         key={`${source.id}-source`}
         id={`${source.id}-source`}
-        type="vector"
+        type={source.type}
         url={source.url}
         attribution={source.attribution}
         maxzoom={source.maxzoom}
         minzoom={source.minzoom}
       >
-        <Layer
-          key={`${source.id}-layer`}
-          id={`${source.id}-layer`}
-          source={`${source.id}-source`}
-          source-layer="event"
-          type="circle"
-          paint={{
-            "circle-radius": 8,
-            "circle-color": "rgba(141, 211, 199, 0.8)",
-          }}
-        />
+        {source.layers?.map((layer) => {
+          switch (layer.type) {
+            case "circle":
+              return (
+                <Layer
+                  key={`${layer.id}-layer`}
+                  id={`${layer.id}-layer`}
+                  source={`${layer.id}-source`}
+                  source-layer={layer.sourceLayer}
+                  type={layer.type}
+                  paint={layer.paint}
+                />
+              );
+            default:
+              return null;
+          }
+        })}
       </Source>
     </Map>
   );

src/components/Combined/OpenCellIdWithBaseMap/index.tsx

@@ -3,14 +3,7 @@ import maplibregl from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { Layer, Map, Source } from "react-map-gl/maplibre";
 import { useEffect } from "react";
-
-const source = {
-  id: "opencellid",
-  url: "pmtiles://https://data.source.coop/smartmaps/opencellid/cellid.pmtiles",
-  attribution: '<a href="https://opencellid.org/">OpenCelliD</a>',
-  maxzoom: 18,
-  minzoom: 2,
-};
+import { OpenCellIdPMTilesSource as source } from "../../../components/Datasets/OpenCellId/source";
 
 export const OpenCellIdWithBaseMap: React.FC<{ mapStyle: string }> = ({
   mapStyle,
@@ -39,23 +32,29 @@ export const OpenCellIdWithBaseMap: React.FC<{ mapStyle: string }> = ({
       <Source
         key={`${source.id}-source`}
         id={`${source.id}-source`}
-        type="vector"
+        type={source.type}
         url={source.url}
         attribution={source.attribution}
         maxzoom={source.maxzoom}
         minzoom={source.minzoom}
       >
-        <Layer
-          key={`${source.id}-layer`}
-          id={`${source.id}-layer`}
-          source={`${source.id}-source`}
-          source-layer="a"
-          type="circle"
-          paint={{
-            "circle-radius": 8,
-            "circle-color": "rgba(231, 84, 128, 0.8)",
-          }}
-        />
+        {source.layers?.map((layer) => {
+          switch (layer.type) {
+            case "circle":
+              return (
+                <Layer
+                  key={`${layer.id}-layer`}
+                  id={`${layer.id}-layer`}
+                  source={`${layer.id}-source`}
+                  source-layer={layer.sourceLayer}
+                  type={layer.type}
+                  paint={layer.paint}
+                />
+              );
+            default:
+              return null;
+          }
+        })}
       </Source>
     </Map>
   );

src/components/Datasets/ArmedConflict/index.stories.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ArmedConflictMap } from ".";
+
+const meta = {
+  component: ArmedConflictMap,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof ArmedConflictMap>;
+
+export default meta;
+type Story = StoryObj<typeof ArmedConflictMap>;
+
+export const Preview: Story = {};

src/components/Datasets/ArmedConflict/index.tsx

@@ -0,0 +1,59 @@
+import { Protocol } from "pmtiles";
+import maplibregl from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+import { Layer, Map, Source } from "react-map-gl/maplibre";
+import { useEffect } from "react";
+import { ArmedConflictPMTilesSource as source } from "./source";
+
+export const ArmedConflictMap = () => {
+  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/tile.openstreetmap.jp/fiord-color-gl-style/style.json"
+    >
+      <Source
+        key={`${source.id}-source`}
+        id={`${source.id}-source`}
+        type={source.type}
+        url={source.url}
+        attribution={source.attribution}
+        maxzoom={source.maxzoom}
+        minzoom={source.minzoom}
+      >
+        {source.layers?.map((layer) => {
+          switch (layer.type) {
+            case "circle":
+              return (
+                <Layer
+                  key={`${layer.id}-layer`}
+                  id={`${layer.id}-layer`}
+                  source={`${layer.id}-source`}
+                  source-layer={layer.sourceLayer}
+                  type={layer.type}
+                  paint={layer.paint}
+                />
+              );
+            default:
+              return null;
+          }
+        })}
+      </Source>
+    </Map>
+  );
+};

src/components/Datasets/ArmedConflict/source.ts

@@ -0,0 +1,22 @@
+import { PMTilesSource } from "../../../types/PMTilesSource";
+
+export const ArmedConflictPMTilesSource: PMTilesSource = {
+  id: "uppsala-armed-conflict",
+  url: "pmtiles://https://data.source.coop/smartmaps/uppsala-conflict/a.pmtiles",
+  type: "vector",
+  attribution:
+    '<a href="https://ucdp.uu.se/">Uppsala Conflict Data Program</a>',
+  maxzoom: 18,
+  minzoom: 2,
+  layers: [
+    {
+      id: "event-layer",
+      sourceLayer: "event",
+      type: "circle",
+      paint: {
+        "circle-radius": 8,
+        "circle-color": "rgba(141, 211, 199, 0.8)",
+      },
+    },
+  ],
+};

src/components/Datasets/OpenCellId/index.tsx

@@ -3,14 +3,7 @@ import maplibregl from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { Layer, Map, Source } from "react-map-gl/maplibre";
 import { useEffect } from "react";
-
-const source = {
-  id: "opencellid",
-  url: "pmtiles://https://data.source.coop/smartmaps/opencellid/cellid.pmtiles",
-  attribution: '<a href="https://opencellid.org/">OpenCelliD</a>',
-  maxzoom: 18,
-  minzoom: 2,
-};
+import { OpenCellIdPMTilesSource as source } from "./source";
 
 export const OpenCellId = () => {
   useEffect(() => {
@@ -37,23 +30,29 @@ export const OpenCellId = () => {
       <Source
         key={`${source.id}-source`}
         id={`${source.id}-source`}
-        type="vector"
+        type={source.type}
         url={source.url}
         attribution={source.attribution}
         maxzoom={source.maxzoom}
         minzoom={source.minzoom}
       >
-        <Layer
-          key={`${source.id}-layer`}
-          id={`${source.id}-layer`}
-          source={`${source.id}-source`}
-          source-layer="a"
-          type="circle"
-          paint={{
-            "circle-radius": 8,
-            "circle-color": "rgba(231, 84, 128, 0.8)",
-          }}
-        />
+        {source.layers?.map((layer) => {
+          switch (layer.type) {
+            case "circle":
+              return (
+                <Layer
+                  key={`${layer.id}-layer`}
+                  id={`${layer.id}-layer`}
+                  source={`${layer.id}-source`}
+                  source-layer={layer.sourceLayer}
+                  type={layer.type}
+                  paint={layer.paint}
+                />
+              );
+            default:
+              return null;
+          }
+        })}
       </Source>
     </Map>
   );

src/components/Datasets/OpenCellId/source.ts

@@ -0,0 +1,21 @@
+import { PMTilesSource } from "../../../types/PMTilesSource";
+
+export const OpenCellIdPMTilesSource: PMTilesSource = {
+  id: "opencellid-source",
+  url: "pmtiles://https://data.source.coop/smartmaps/opencellid/cellid.pmtiles",
+  type: "vector",
+  attribution: '<a href="https://opencellid.org/">OpenCelliD</a>',
+  maxzoom: 18,
+  minzoom: 2,
+  layers: [
+    {
+      id: "cell-layer",
+      sourceLayer: "a",
+      type: "circle",
+      paint: {
+        "circle-radius": 8,
+        "circle-color": "rgba(141, 211, 199, 0.8)",
+      },
+    },
+  ],
+};

src/components/Datasets/OvertureMaps/index.tsx

@@ -3,41 +3,7 @@ import maplibregl from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { Layer, Map, Source } from "react-map-gl/maplibre";
 import { useEffect } from "react";
-
-const source = {
-  id: "overture-maps-source",
-  url: "pmtiles://https://tile.openstreetmap.jp/static/overture.pmtiles",
-  attribution: '<a href="https://overturemaps.org/">Overture Maps Foundation</a>',
-  maxzoom: 18,
-  minzoom: 2,
-  layers: [
-    {
-      id: "building-layer",
-      sourceLayer: "building",
-      type: "fill",
-      paint: {
-        "fill-color": "rgba(141, 211, 199, 0.8)",
-      },
-    },
-    {
-      id: "transportation-layer",
-      sourceLayer: "transportation",
-      type: "line",
-      paint: {
-        "line-color": "rgba(255, 255, 179, 0.8)",
-        "line-width": 1,
-      },
-    },
-    {
-      id: "water-layer",
-      sourceLayer: "water",
-      type: "fill",
-      paint: {
-        "fill-color": "rgba(173, 216, 230, 0.8)",
-      },
-    }
-  ]
-};
+import { OvertureMapsPMTilesSource as source } from "./source";
 
 export const OvertureMaps = () => {
   useEffect(() => {
@@ -64,21 +30,21 @@ export const OvertureMaps = () => {
       <Source
         key={`${source.id}-source`}
         id={`${source.id}-source`}
-        type="vector"
+        type={source.type}
         url={source.url}
         attribution={source.attribution}
         maxzoom={source.maxzoom}
         minzoom={source.minzoom}
       >
-        {source.layers.map((layer) => {
+        {source.layers?.map((layer) => {
           switch (layer.type) {
             case "fill":
             case "line":
               return (
                 <Layer
                   key={`${layer.id}-layer`}
                   id={`${layer.id}-layer`}
-                  source={`${source.id}-source`}
+                  source={`${layer.id}-source`}
                   source-layer={layer.sourceLayer}
                   type={layer.type}
                   paint={layer.paint}