Merge pull request #115 from UNopenGIS/add-kontur-population

Add KonturPopulationMap

.vscode/settings.json

@@ -17,6 +17,8 @@
     "hillshade",
     "hinanbasho",
     "ISCGM",
+    "Kontur",
+    "kpop",
     "landuse",
     "Maxar",
     "NASADEM",

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

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

src/components/Datasets/KonturPopulation/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 { KonturPopulationPMTilesSource as source } from "./source";
+
+export const KonturPopulationMap = () => {
+  useEffect(() => {
+    const protocol = new Protocol();
+    maplibregl.addProtocol("pmtiles", protocol.tile);
+    return () => {
+      maplibregl.removeProtocol("pmtiles");
+    };
+  }, []);
+
+  return (
+    <Map
+      initialViewState={{
+        longitude: 28.034088,
+        latitude: -26.195246,
+        zoom: 6,
+      }}
+      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} source-layer={layer.sourceLayer} {...layer} />
+        ))}
+      </Source>
+    </Map>
+  );
+};

src/components/Datasets/KonturPopulation/source.ts

@@ -0,0 +1,30 @@
+import { PMTilesSource } from "../../../types/PMTilesSource";
+
+export const KonturPopulationPMTilesSource: PMTilesSource = {
+  id: "kpop-source",
+  url: "pmtiles://https://data.source.coop/smartmaps/foil4gr1/kpop.pmtiles",
+  type: "vector",
+  attribution:
+    '<a href="https://data.humdata.org/m/dataset/kontur-population-dataset">Kontur Population: Global Population Density for 400m H3 Hexagons</a>',
+  maxzoom: 14,
+  minzoom: 0,
+  layers: [
+    {
+      id: "kpop-layer",
+      type: "fill",
+      source: "kpop-source",
+      sourceLayer: "kpop",
+      paint: {
+        "fill-color": [
+          "interpolate",
+          ["linear"],
+          ["number", ["get", "pop"]],
+          0,
+          "rgba(0, 255, 0, 0.01)",
+          100000,
+          "rgba(0, 255, 0, 0.6)",
+        ],
+      },
+    },
+  ],
+};