diff --git a/lib/data/data.source.coop/smartmaps/uppsala-conflict/index.yaml b/lib/data/data.source.coop/smartmaps/uppsala-conflict/index.yaml new file mode 100644 index 0000000..71d06ec --- /dev/null +++ b/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 diff --git a/src/components/Combined/ArmedConflictWithBaseMap/index.stories.ts b/src/components/Combined/ArmedConflictWithBaseMap/index.stories.ts new file mode 100644 index 0000000..721a633 --- /dev/null +++ b/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; + +export default meta; +type Story = StoryObj; + +export const Preview: Story = {}; diff --git a/src/components/Combined/ArmedConflictWithBaseMap/index.tsx b/src/components/Combined/ArmedConflictWithBaseMap/index.tsx new file mode 100644 index 0000000..05e7f44 --- /dev/null +++ b/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: 'OpenCelliD', + maxzoom: 18, + minzoom: 2, + }; + + return ( + + + + + + ); +}; diff --git a/src/components/Combined/OpenCellId/index.stories.ts b/src/components/Combined/OpenCellIdWithBaseMap/index.stories.ts similarity index 72% rename from src/components/Combined/OpenCellId/index.stories.ts rename to src/components/Combined/OpenCellIdWithBaseMap/index.stories.ts index 17846be..5f08b56 100644 --- a/src/components/Combined/OpenCellId/index.stories.ts +++ b/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; +} satisfies Meta; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Preview: Story = {}; diff --git a/src/components/Combined/OpenCellId/index.tsx b/src/components/Combined/OpenCellIdWithBaseMap/index.tsx similarity index 91% rename from src/components/Combined/OpenCellId/index.tsx rename to src/components/Combined/OpenCellIdWithBaseMap/index.tsx index 8fa4229..e2e3680 100644 --- a/src/components/Combined/OpenCellId/index.tsx +++ b/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}) => >