Add un clear map dark style

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
+    }
+  ]
+}

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 = {};

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"
+    />
+  );
+};