Merge pull request #80 from UNopenGIS/add-smp-ucdp

Add smp ucdp

lib/data/data.source.coop/smartmaps/uppsala-conflict/index.yaml

@@ -0,0 +1,10 @@
+data_id: smartmaps_uppsala_conflict_pmtiles
+license: CC-BY-4.0
+attributions:
+  - Uppsala Conflict Data Program
+  - UN Smart Maps
+description: PMTiles converted Armed conflict data from the Uppsala Conflict Data Program (UCDP) by UN Smart Maps.
+data_format: pmtiles
+file_format: pmtiles
+file_size: 130MB
+url: https://data.source.coop/smartmaps/uppsala-conflict/a.pmtiles

src/components/Combined/ArmedConflictWithBaseMap/index.stories.ts

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ArmedConflictWithBaseMap } from ".";
+import { mapStyleOptions } from "../../mapStyleOptions";
+
+const meta = {
+  component: ArmedConflictWithBaseMap,
+  argTypes: {
+    mapStyle: {
+      options: mapStyleOptions,
+      control: { type: "select" },
+    },
+  },
+  args: {
+    mapStyle: "stylejson/tile.openstreetmap.jp/fiord-color-gl-style/style.json",
+  },
+  parameters: {
+    layout: "fullscreen",
+    options: {
+      bottomPanelHeight: 300,
+    },
+  },
+} satisfies Meta<typeof ArmedConflictWithBaseMap>;
+
+export default meta;
+type Story = StoryObj<typeof ArmedConflictWithBaseMap>;
+
+export const Preview: Story = {};

src/components/Combined/ArmedConflictWithBaseMap/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";
+
+export const ArmedConflictWithBaseMap:React.FC<{mapStyle: string}> = ({mapStyle}) => {
+  useEffect(() => {
+    const protocol = new Protocol();
+    maplibregl.addProtocol("pmtiles", protocol.tile);
+    return () => {
+      maplibregl.removeProtocol("pmtiles");
+    };
+  }, []);
+
+  const layer = {
+    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,
+  };
+
+  return (
+    <Map
+      initialViewState={{
+        longitude: 0,
+        latitude: 0,
+        zoom: 4,
+      }}
+      dragPan={true}
+      scrollZoom={true}
+      hash={false}
+      style={{ width: "100%", height: "100%" }}
+      mapStyle={mapStyle}
+    >
+      <Source
+        key={`${layer.id}-source`}
+        id={`${layer.id}-source`}
+        type="vector"
+        url={layer.url}
+        attribution={layer.attribution}
+        maxzoom={layer.maxzoom}
+        minzoom={layer.minzoom}
+      >
+        <Layer
+          id={`${layer.id}-layer`}
+          source={`${layer.id}-source`}
+          source-layer="event"
+          type="circle"
+          paint={{
+            "circle-radius": 8,
+            "circle-color": "rgba(141, 211, 199, 0.8)",
+          }}
+        />
+      </Source>
+    </Map>
+  );
+};

src/components/Combined/OpenCellId/index.stories.ts → src/components/Combined/OpenCellIdWithBaseMap/index.stories.ts

@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { OpenCellIdWithStyle } from ".";
+import { OpenCellIdWithBaseMap } from ".";
 import { mapStyleOptions } from "../../mapStyleOptions";
 
 const meta = {
-  component: OpenCellIdWithStyle,
+  component: OpenCellIdWithBaseMap,
   argTypes: {
     mapStyle: {
       options: mapStyleOptions,
@@ -19,9 +19,9 @@ const meta = {
       bottomPanelHeight: 300,
     },
   },
-} satisfies Meta<typeof OpenCellIdWithStyle>;
+} satisfies Meta<typeof OpenCellIdWithBaseMap>;
 
 export default meta;
-type Story = StoryObj<typeof OpenCellIdWithStyle>;
+type Story = StoryObj<typeof OpenCellIdWithBaseMap>;
 
 export const Preview: Story = {};

src/components/Combined/OpenCellId/index.tsx → src/components/Combined/OpenCellIdWithBaseMap/index.tsx

@@ -4,7 +4,7 @@ import "maplibre-gl/dist/maplibre-gl.css";
 import { Layer, Map, Source } from "react-map-gl/maplibre";
 import { useEffect } from "react";
 
-export const OpenCellIdWithStyle:React.FC<{mapStyle: string}> = ({mapStyle}) => {
+export const OpenCellIdWithBaseMap:React.FC<{mapStyle: string}> = ({mapStyle}) => {
   useEffect(() => {
     const protocol = new Protocol();
     maplibregl.addProtocol("pmtiles", protocol.tile);
@@ -45,7 +45,7 @@ export const OpenCellIdWithStyle:React.FC<{mapStyle: string}> = ({mapStyle}) =>
       >
         <Layer
           id={`${layer.id}-layer`}
-          source="opencellid-source"
+          source={`${layer.id}-source`}
           source-layer="a"
           type="circle"
           paint={{