Add preview of DEM of Rwanda

.vscode/settings.json

@@ -13,6 +13,7 @@
     "geofabrik",
     "Geographics",
     "geoservices",
+    "hillshade",
     "hinanbasho",
     "Maxar",
     "naturalearthdata",

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

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

src/components/Datasets/Rwanda10/index.tsx

@@ -0,0 +1,37 @@
+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 { Rwanda10PMTilesSource as source } from "./source";
+
+export const Rwanda10Map = () => {
+  useEffect(() => {
+    const protocol = new Protocol();
+    maplibregl.addProtocol("pmtiles", protocol.tile);
+    return () => {
+      maplibregl.removeProtocol("pmtiles");
+    };
+  }, []);
+
+  return (
+    <Map
+      initialViewState={{
+        longitude: 30.07232666015625,
+        latitude: -1.9826364384297364,
+        pitch: 60,
+        zoom: 8,
+      }}
+      dragPan={true}
+      scrollZoom={true}
+      hash={false}
+      style={{ width: "100%", height: "100%" }}
+      mapStyle="stylejson/tile.openstreetmap.jp/fiord-color-gl-style/style.json"
+      terrain={{ source: source.id, exaggeration: 2 }}
+    >
+      <Source key={source.id} {...source}>
+        {source.layers?.map((layer) => <Layer key={layer.id} {...layer} />)}
+      </Source>
+    </Map>
+  );
+};

src/components/Datasets/Rwanda10/source.ts

@@ -0,0 +1,27 @@
+import { PMTilesSource } from "../../../types/PMTilesSource";
+
+export const Rwanda10PMTilesSource: PMTilesSource = {
+  id: "rwanda-10-source",
+  tiles: [
+    "pmtiles://https://data.source.coop/smartmaps/rwanda10/rwanda10.pmtiles/{z}/{x}/{y}.webp",
+  ],
+  tileSize: 512,
+  type: "raster-dem",
+  attribution:
+    "Water and Sanitation Corporation (WASAC), National Land Authority (NLA)",
+  maxzoom: 14,
+  minzoom: 2,
+  terrain: {
+    source: "rwanda-10-source",
+  },
+  layers: [
+    {
+      id: "rwanda-10-hills",
+      type: "hillshade",
+      source: "rwanda-10-source",
+      paint: {
+        "hillshade-shadow-color": "#473B24",
+      },
+    },
+  ],
+};

src/types/PMTilesSource.d.ts

@@ -1,9 +1,14 @@
 export type PMTilesSource = {
   id: string;
-  url: string;
+  url?: string;
+  tiles?: string[];
+  tileSize?: number;
   type: "vector" | "raster" | "raster-dem";
   attribution: string;
   maxzoom?: number;
   minzoom?: number;
   layers?: LayerProps[];
+  terrain?: {
+    source: string;
+  };
 };