Add UNClearMapRaster

.vscode/settings.json

@@ -5,10 +5,12 @@
     "arcgis",
     "arcgisonline",
     "BODC",
+    "clearmap",
     "DAAC",
     "GEBCO",
     "geofabrik",
     "Geographics",
+    "geoservices",
     "hinanbasho",
     "Maxar",
     "naturalearthdata",

public/stylejson/geoservices.un.org/clearmap/style.json

@@ -0,0 +1,21 @@
+{
+  "version": 8,
+  "sources": {
+    "un_clearmap": {
+      "type": "raster",
+      "tiles": [
+        "https://geoservices.un.org/arcgis/rest/services/ClearMap_WebTopo/MapServer/tile/{z}/{y}/{x}"
+      ],
+      "attribution": "<a href=\"https://www.un.org/geospatial/\">UN Geospatial</a>"
+    }
+  },
+  "layers": [
+    {
+      "id": "un_clearmap",
+      "source": "un_clearmap",
+      "type": "raster",
+      "maxzoom": 6,
+      "minzoom": 0
+    }
+  ]
+}

src/App.tsx

@@ -1,7 +1,8 @@
 import './App.css'
-import { ArcGisWorldImagery } from './components/ArcGisWorldImagery'
+import { ArcGISWorldImagery } from './components/ArcGISWorldImagery'
 import { OpenStreetMapFrHotRaster } from './components/OpenStreetMapFrHotRaster'
 import { OpenStreetMapOrgRaster } from './components/OpenStreetMapOrgRaster'
+import { UNClearMapRaster } from './components/UNClearMapRaster'
 
 function App() {
   return (
@@ -13,9 +14,10 @@ function App() {
         display: 'flex',
         flexDirection: 'column',
       }}>
+        <UNClearMapRaster />
         <OpenStreetMapOrgRaster />
         <OpenStreetMapFrHotRaster />
-        <ArcGisWorldImagery />
+        <ArcGISWorldImagery />
       </div>
     </div>
   )

src/components/ArcGisWorldImagery/index.tsx → src/components/ArcGISWorldImagery/index.tsx

@@ -1,7 +1,7 @@
 import { Map } from "react-map-gl/maplibre";
 import "maplibre-gl/dist/maplibre-gl.css";
 
-export const ArcGisWorldImagery = () => {
+export const ArcGISWorldImagery = () => {
   return (
     <div>
       <h2>

src/components/UNClearMapRaster/index.tsx

@@ -0,0 +1,24 @@
+import { Map } from "react-map-gl/maplibre";
+import "maplibre-gl/dist/maplibre-gl.css";
+
+export const UNClearMapRaster = () => {
+  return (
+    <div>
+      <h2>
+        https://unopengis.github.io/foil4g/stylejson/geoservices.un.org/clearmap/style.json
+      </h2>
+      <Map
+        initialViewState={{
+          longitude: 0,
+          latitude: 0,
+          zoom: 4,
+        }}
+        dragPan={false}
+        scrollZoom={false}
+        hash={false}
+        style={{ width: "100%", height: "400px" }}
+        mapStyle="stylejson/geoservices.un.org/clearmap/style.json"
+      />
+    </div>
+  );
+};