feat: GeoZarr source (#2040)

* feat(WIP): geoZarr

* chore(deps): use ol dev package

* chore(deps): add zarrita package

* chore: update story

* chore(deps): update package-lock

* chore(docs): update map view

Author: silvester-pari

elements/map/src/layers.ts

@@ -57,6 +57,7 @@ export type OLAdvancedSources = {
   CartoDB: typeof import("ol/source/CartoDB").default;
   DataTile: typeof import("ol/source/DataTile").default;
   GeoTIFF: typeof import("ol/source/GeoTIFF").default;
+  GeoZarr: typeof import("ol/source/GeoZarr").default;
   Google: typeof import("ol/source/Google").default;
   IIIF: typeof import("ol/source/IIIF").default;
   Image: typeof import("ol/source/Image").default;
@@ -176,6 +177,7 @@ export type EoxLayer =
   | EOxLayerType<"Vector", "Cluster">
   | EOxLayerType<"VectorTile", "VectorTile">
   | EOxLayerType<"WebGLTile", "GeoTIFF">
+  | EOxLayerType<"WebGLTile", "GeoZarr">
   | EOxLayerType<"Tile", "OSM">
   | EOxLayerType<"Tile", "WMTSCapabilities">
   | EOxLayerType<"Tile", "StadiaMaps">

elements/map/src/plugins/advancedLayersAndSources/sources.js

@@ -2,6 +2,7 @@ import BingMaps from "ol/source/BingMaps";
 import CartoDB from "ol/source/CartoDB";
 import DataTile from "ol/source/DataTile";
 import GeoTIFF from "ol/source/GeoTIFF";
+import GeoZarr from "ol/source/GeoZarr";
 import Google from "ol/source/Google";
 import IIIF from "ol/source/IIIF";
 import Image from "ol/source/Image";
@@ -37,6 +38,7 @@ window.eoxMapAdvancedOlSources = {
     Cluster,
     DataTile,
     GeoTIFF,
+    GeoZarr,
     Google,
     IIIF,
     Image,

elements/map/stories/geo-zarr-layer.js

@@ -0,0 +1,52 @@
+/**
+ * Renders `GeoZarr` layer as `WebGLTile`
+ *
+ * @returns {Object} The story configuration with arguments for the component.
+ */
+const GeoZarrLayerStory = {
+  args: {
+    center: [1407372, 5701616],
+    layers: [
+      {
+        type: "Tile",
+        properties: {
+          id: "customId",
+        },
+        source: {
+          type: "OSM",
+        },
+      },
+      {
+        type: "WebGLTile",
+        properties: {
+          id: "geozarrLayer",
+        },
+        source: {
+          type: "GeoZarr",
+          url: "https://s3.explorer.eopf.copernicus.eu/esa-zarr-sentinel-explorer-fra/tests-output/sentinel-2-l2a/S2A_MSIL2A_20251107T100231_N0511_R122_T32TQR_20251107T115310.zarr",
+          group: "measurements/reflectance",
+          bands: ["b04", "b03", "b02", "b05"],
+        },
+        style: {
+          gamma: 1.5,
+          color: [
+            "color",
+            ["interpolate", ["linear"], ["band", 1], 0, 0, 0.5, 255],
+            ["interpolate", ["linear"], ["band", 2], 0, 0, 0.5, 255],
+            ["interpolate", ["linear"], ["band", 3], 0, 0, 0.5, 255],
+            [
+              "case",
+              ["==", ["+", ["band", 1], ["band", 2], ["band", 3]], 0],
+              0,
+              1,
+            ],
+          ],
+        },
+      },
+    ],
+    zoom: 9,
+    storyCodeBefore: `import "@eox/map/src/plugins/advancedLayersAndSources"`,
+  },
+};
+
+export default GeoZarrLayerStory;

elements/map/stories/index.js

@@ -8,6 +8,7 @@ export { default as StaticImageLayerStory } from "./static-image";
 export { default as STACLayerStory } from "./stac-layer";
 export { default as MapboxStyleLayerStory } from "./mapbox-style-layer";
 export { default as GeoTIFFLayerStory } from "./geo-tiff-layer";
+export { default as GeoZarrLayerStory } from "./geo-zarr-layer";
 export { default as GroupLayerStory } from "./group-layer";
 export { default as ControlsStory } from "./controls";
 export { default as GeolocationStory } from "./geo-location";

elements/map/stories/map.stories.js

@@ -11,6 +11,7 @@ import {
   STACLayerStory,
   MapboxStyleLayerStory,
   GeoTIFFLayerStory,
+  GeoZarrLayerStory,
   GroupLayerStory,
   ControlsStory,
   GeolocationStory,
@@ -193,6 +194,11 @@ export const MapboxStyleLayer = MapboxStyleLayerStory;
  */
 export const GeoTIFFLayer = GeoTIFFLayerStory;
 
+/**
+ * Renders `GeoZarr` layer as `WebGLTile`
+ */
+export const GeoZarrLayer = GeoZarrLayerStory;
+
 /**
  * Renders `Group` layer which contains multiple layers in a group
  */