From 40d8b42ece946ad3b1a943ca46162e2d862eff0d Mon Sep 17 00:00:00 2001
From: yuiseki <yuiseki@gmail.com>
Date: Sun, 11 Aug 2024 13:47:39 +0900
Subject: [PATCH] Add un clear map dark style

---
 .../clearmap_dark/style.json                  | 21 +++++++++++++++++++
 .../UNClearMapDarkRaster/index.stories.ts     | 14 +++++++++++++
 .../Maps/UNClearMapDarkRaster/index.tsx       | 19 +++++++++++++++++
 3 files changed, 54 insertions(+)
 create mode 100644 public/stylejson/geoservices.un.org/clearmap_dark/style.json
 create mode 100644 src/components/Maps/UNClearMapDarkRaster/index.stories.ts
 create mode 100644 src/components/Maps/UNClearMapDarkRaster/index.tsx

diff --git a/public/stylejson/geoservices.un.org/clearmap_dark/style.json b/public/stylejson/geoservices.un.org/clearmap_dark/style.json
new file mode 100644
index 0000000..250d106
--- /dev/null
+++ b/public/stylejson/geoservices.un.org/clearmap_dark/style.json
@@ -0,0 +1,21 @@
+{
+  "version": 8,
+  "sources": {
+    "un_clearmap": {
+      "type": "raster",
+      "tiles": [
+        "https://geoservices.un.org/arcgis/rest/services/ClearMap_WebDark/MapServer/tile/{z}/{y}/{x}"
+      ],
+      "attribution": "<a href=\"https://www.un.org/geospatial/\">UN Geospatial</a>"
+    }
+  },
+  "layers": [
+    {
+      "id": "un_clearmap_dark",
+      "source": "un_clearmap_dark",
+      "type": "raster",
+      "maxzoom": 6,
+      "minzoom": 0
+    }
+  ]
+}
diff --git a/src/components/Maps/UNClearMapDarkRaster/index.stories.ts b/src/components/Maps/UNClearMapDarkRaster/index.stories.ts
new file mode 100644
index 0000000..88b4e12
--- /dev/null
+++ b/src/components/Maps/UNClearMapDarkRaster/index.stories.ts
@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { UNClearMapDarkRaster 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 = {};
diff --git a/src/components/Maps/UNClearMapDarkRaster/index.tsx b/src/components/Maps/UNClearMapDarkRaster/index.tsx
new file mode 100644
index 0000000..6814860
--- /dev/null
+++ b/src/components/Maps/UNClearMapDarkRaster/index.tsx
@@ -0,0 +1,19 @@
+import { Map } from "react-map-gl/maplibre";
+import "maplibre-gl/dist/maplibre-gl.css";
+
+export const UNClearMapDarkRaster = () => {
+  return (
+    <Map
+      initialViewState={{
+        longitude: 0,
+        latitude: 0,
+        zoom: 4,
+      }}
+      dragPan={true}
+      scrollZoom={true}
+      hash={false}
+      style={{ width: "100%", height: "100%" }}
+      mapStyle="stylejson/geoservices.un.org/clearmap_dark/style.json"
+    />
+  );
+};