Add preview of DEM1A by Smart Maps Group

.vscode/settings.json

@@ -16,6 +16,7 @@
     "hillshade",
     "hinanbasho",
     "Maxar",
+    "NASADEM",
     "naturalearthdata",
     "opencellid",
     "openstreetmap",

lib/data/data.source.coop/smartmaps/dem1a/index.yaml

@@ -0,0 +1,9 @@
+data_id: smartmaps_global_dem1a
+license: unknown
+attributions:
+  - 測量法に基づく国土地理院長承認（使用）R 6JHs 133
+description: This dataset is RGB elevation tiles of the world converted from open data namely NASADEM. Although we can find RGB elevation tiles dataset easily, sometimes it is difficult to use it because of the copyright. We made these RGB elevation tiles as open data to reduce constraints in the importation of geographical data and make the imported data flexible and effectively usable anywhere. This work is done under the UN Smart Maps Group of UN Open GIS Initiative.
+data_format: pmtiles
+file_format: pmtiles
+file_size: 182GB
+url: https://data.source.coop/smartmaps/dem1a/dem1a.pmtiles

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

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

src/components/Datasets/DEM1A/index.tsx

@@ -0,0 +1,38 @@
+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 { DEM1APMTilesSource as source } from "./source";
+
+export const DEM1AMap = () => {
+  useEffect(() => {
+    const protocol = new Protocol();
+    maplibregl.addProtocol("pmtiles", protocol.tile);
+    return () => {
+      maplibregl.removeProtocol("pmtiles");
+    };
+  }, []);
+
+  return (
+    <Map
+      initialViewState={{
+        longitude: 141.49156,
+        latitude: 38.46212,
+        pitch: 50,
+        bearing: -180,
+        zoom: 18,
+      }}
+      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 }}
+    >
+      <Source key={source.id} {...source}>
+        {source.layers?.map((layer) => <Layer key={layer.id} {...layer} />)}
+      </Source>
+    </Map>
+  );
+};

src/components/Datasets/DEM1A/source.ts

@@ -0,0 +1,26 @@
+import { PMTilesSource } from "../../../types/PMTilesSource";
+
+export const DEM1APMTilesSource: PMTilesSource = {
+  id: "dem1a-source",
+  tiles: [
+    "pmtiles://https://data.source.coop/smartmaps/dem1a/dem1a.pmtiles/{z}/{x}/{y}.webp",
+  ],
+  tileSize: 512,
+  type: "raster-dem",
+  attribution: "測量法に基づく国土地理院長承認（使用）R 6JHs 133",
+  maxzoom: 17,
+  minzoom: 2,
+  terrain: {
+    source: "dem1a-source",
+  },
+  layers: [
+    {
+      id: "dem1a-hills",
+      type: "hillshade",
+      source: "dem1a-source",
+      paint: {
+        "hillshade-shadow-color": "#473B24",
+      },
+    },
+  ],
+};