@eodash/eodash 5.2.0 → 5.3.0

package/core/client/eodashSTAC/auth.js

@@ -0,0 +1,86 @@
+/**
+* Generic handler for possible authentications schemes as defined in STAC authentication extension.
+* @param {import("@/types").StacAuthItem } item
+* @param {import("@/types").StacAuthLink | import("@/types").StacAuthAsset} linkOrAsset
+* @returns {string}
+*/
+export function handleAuthenticationOfLink(item, linkOrAsset) {
+  // browse through all authentication refs on a link to find a first one we support
+  for (const authRef of linkOrAsset["auth:refs"] || []) {
+    const authSchemes  = item["auth:schemes"];
+    if (authRef in authSchemes) {
+      switch (authSchemes[authRef].type) {
+        case "apiKey": {
+          //@ts-expect-error TODO
+          return handleApiKeyBasedAuth(authSchemes[authRef], linkOrAsset.href);
+        }
+        // case "signedUrl":
+        // case "s3":
+        // case "http":
+        // case "openIdConnect":
+        // case "apiKey":
+        // case "oauth2":
+        // todo add more handlers when needed
+        default:
+        console.error(`eodash does not support referenced authentication scheme ${authRef}`);
+      }
+    }
+  }
+  return linkOrAsset.href;
+}
+/**
+* Generic handler for possible authentications schemes as defined in STAC authentication extension.
+* @param {import("@/types").ApiKeyAuthScheme } schemeDef
+* @param { string } href
+* @returns { string }
+*/
+function handleApiKeyBasedAuth(schemeDef, href) {
+  // add token to query parameters of href
+  let url = href;
+  switch (schemeDef.in) {
+    case "query": {
+      const apiKey = schemeDef.name;
+      const envVar = "EODASH_" + apiKey;
+      const envValue = process.env[envVar];
+      if (envValue) {
+        url = setQueryParam(href, apiKey, envValue);
+      } else {
+        console.error(`env variable ${envVar} for authentication parameter ${apiKey} not set`);
+      }
+      break
+    }
+    default:
+      console.error('eodash does not support any referenced handler');
+  }
+  return url;
+}
+
+/**
+ * Inserts or replaces a query parameter in a URL string (without escaping special characters).
+ *
+ * @param {string} url - Input URL (may contain special characters)
+ * @param {string} key - Query parameter key (e.g. "token", "authCode")
+ * @param {string} value - Value to set for the key
+ * @returns {string} - Updated URL string
+ */
+function setQueryParam(url, key, value) {
+  // Split off any fragment (#something)
+  const [base, hash] = url.split("#", 2);
+
+  // Regex to detect existing key, respecting ? or &
+  const pattern = new RegExp(`([?&])${key}=[^&#]*`, "i");
+
+  if (pattern.test(base)) {
+    // Replace existing key=value
+    url = base.replace(pattern, `$1${key}=${value}`);
+  } else {
+    // Append as new key=value
+    const joiner = base.includes("?") ? "&" : "?";
+    url = `${base}${joiner}${key}=${value}`;
+  }
+
+  // Reattach fragment if present
+  if (hash) url += "#" + hash;
+
+  return url;
+}

package/core/client/eodashSTAC/createLayers.js

@@ -1,13 +1,17 @@
 import { registerProjection } from "@/store/actions";
 import { mapEl } from "@/store/states";
+
 import {
   extractRoles,
   getProjectionCode,
   createLayerID,
   createAssetID,
   mergeGeojsons,
+  extractLayerConfig,
   addTooltipInteraction,
+  fetchStyle,
 } from "./helpers";
+import { handleAuthenticationOfLink } from "./auth";
 import log from "loglevel";
 
 /**
@@ -41,7 +45,7 @@ export async function createLayersFromAssets(
 
   const geoJsonSources = [];
   let geoJsonRoles = {};
-
+  let projection = undefined;
   for (const [idx, ast] of Object.keys(assets).entries()) {
     // register projection if exists
     const assetProjection =
@@ -49,6 +53,7 @@ export async function createLayersFromAssets(
         assets[ast]?.["proj:epsg"] || assets[ast]?.["eodash:proj4_def"]
       );
     await registerProjection(assetProjection);
+    projection = getProjectionCode(assetProjection) || "EPSG:4326";
     if (assets[ast]?.type === "application/geo+json") {
       geoJsonSources.push(assets[ast].href);
       geoJsonIdx = idx;
@@ -64,7 +69,7 @@ export async function createLayersFromAssets(
         source: {
           type: "FlatGeoBuf",
           url: assets[ast].href,
-          format: "GeoJSON",
+          projection,
           attributions: assets[ast].attribution,
         },
         properties: {
@@ -131,13 +136,13 @@ export async function createLayersFromAssets(
   if (geoJsonSources.length) {
     const assetId = createAssetID(collectionId, item.id, geoJsonIdx);
     log.debug(`Creating Vector layer from GeoJsons`, assetId);
-
+    // assumption that each GeoJSON asset is in same projection due to their merging
     const layer = {
       type: "Vector",
       source: {
         type: "Vector",
         url: await mergeGeojsons(geoJsonSources),
-        format: "GeoJSON",
+        format: {"type": "GeoJSON", "dataProjection": projection},
         attributions: geoJsonAttributions,
       },
       properties: {
@@ -193,6 +198,7 @@ export async function createLayersFromAssets(
  * @param {string} collectionId
  * @param {import('stac-ts').StacItem} item
  * @param {string} title
+ * @param {string} itemUrl
  * @param {Record<string,any>} [layerDatetime]
  * @param {object | null} [extraProperties]
  */
@@ -200,6 +206,7 @@ export const createLayersFromLinks = async (
   collectionId,
   title,
   item,
+  itemUrl,
   layerDatetime,
   extraProperties,
 ) => {
@@ -209,6 +216,7 @@ export const createLayersFromLinks = async (
   const wmsArray = item.links.filter((l) => l.rel === "wms");
   const wmtsArray = item.links.filter((l) => l.rel === "wmts");
   const xyzArray = item.links.filter((l) => l.rel === "xyz") ?? [];
+  const vectorTileArray = item.links.filter((l) => l.rel === "vector-tile") ?? [];
 
   // Taking projection code from main map view, as main view defines
   // projection for comparison map
@@ -398,5 +406,197 @@ export const createLayersFromLinks = async (
     }
     jsonArray.push(json);
   }
+
+  for (const vectorTileLink of vectorTileArray ?? []) {
+    const vectorTileLinkProjection =
+      /** @type {number | string | {name: string, def: string} | undefined} */
+      (vectorTileLink?.["proj:epsg"] || vectorTileLink?.["eodash:proj4_def"]);
+
+    await registerProjection(vectorTileLinkProjection);
+    const projectionCode = getProjectionCode(vectorTileLinkProjection || "EPSG:3857");
+    const linkId = createLayerID(
+      collectionId,
+      item.id,
+      vectorTileLink,
+      viewProjectionCode,
+    );
+    log.debug("Vector Tile Layer added", linkId);
+    const key = /** @type {string | undefined} */ (vectorTileLink["key"]) || undefined;
+    // fetch styles and separate them by their mapping between links and assets
+    const styles = await fetchStyle(item, itemUrl, key);
+    // get the correct style which is not attached to a link
+    let { layerConfig, style } = extractLayerConfig(
+      linkId ?? "",
+      styles,
+    );
+   
+    let href = vectorTileLink.href;
+    if ("auth:schemes" in item && "auth:refs" in vectorTileLink) {
+      href = handleAuthenticationOfLink(/** @type { import("@/types").StacAuthItem} */ (item), /** @type { import("@/types").StacAuthLink} */ (vectorTileLink));
+    }
+    const json = {
+      type: "VectorTile",
+      declutter: true,
+      properties: {
+        id: linkId,
+        title: vectorTileLink.title || title || item.id,
+        roles: vectorTileLink.roles,
+        layerDatetime,
+        ...(layerConfig && {
+            layerConfig: {
+              ...layerConfig,
+              style,
+            },
+          }),
+      },
+      source: {
+        type: "VectorTile",
+        format: {
+          type: "MVT",
+          idProperty: vectorTileLink.idProperty,
+        },
+        url: href,
+        projection: projectionCode,
+        attributions: vectorTileLink.attribution,
+      },
+      interactions: [],
+      ...(!style?.variables && { style }),
+    };
+    addTooltipInteraction(json, style);
+    extractRoles(json.properties, vectorTileLink);
+    if (extraProperties !== null) {
+      json.properties = { ...json.properties, ...extraProperties };
+    }
+    jsonArray.push(json);
+  }
   return jsonArray;
 };
+/**
+ * Implementation of a function that creates a layer from the render extention
+ * @param {import("stac-ts").StacCollection | undefined | null} collection
+ * @param {import("stac-ts").StacItem | undefined | null} item
+ * @param {string} rasterURL
+ * @param {Record<string, any>} [extraProperties]
+ * @returns {import("@eox/map/src/layers").EOxLayerType<"Tile","XYZ">[]}
+ */
+export function createLayerFromRender(
+  rasterURL,
+  collection,
+  item,
+  extraProperties,
+) {
+  if (!collection || !collection.renders || !item) {
+    return [];
+  }
+
+  const renders = /** @type {Record<string,import("@/types").Render>} */ (
+    collection.renders ?? item?.renders
+  );
+  const layers = [];
+  // special case for rescale
+  for (const key in renders) {
+    const title = renders[key].title;
+
+    const assetsCollection =
+      renders[key].assets[0] in item["assets"] ? item : collection;
+
+    const paramsObject = {
+      assets: renders[key].assets,
+      expression:
+        renders[key].expression ??
+        assetsCollection["assets"]?.[renders[key].assets[0]]?.expression,
+      nodata:
+        renders[key].nodata ??
+        assetsCollection["assets"]?.[renders[key].assets[0]]?.nodata,
+      resampling:
+        renders[key].resampling ??
+        assetsCollection["assets"]?.[renders[key].assets[0]]?.resampling,
+      color_formula:
+        renders[key].color_formula ??
+        assetsCollection["assets"]?.[renders[key].assets[0]]?.color_formula,
+      colormap:
+        renders[key].colormap ??
+        assetsCollection["assets"]?.[renders[key].assets[0]]?.colormap,
+      colormap_name:
+        renders[key].colormap_name ??
+        assetsCollection["assets"]?.[renders[key].assets[0]]?.colormap_name,
+      rescale:
+        renders[key].rescale ??
+        assetsCollection["assets"]?.[renders[key].assets[0]]?.rescale,
+    };
+    const paramsStr = encodeURLObject(paramsObject);
+    const url = `${rasterURL}/collections/${collection.id}/items/${item.id}/tiles/WebMercatorQuad/{z}/{x}/{y}?${paramsStr}`;
+    layers.push({
+      /** @type {"Tile"} */
+      type: "Tile",
+      properties: {
+        id: createLayerID(
+          collection.id,
+          item.id,
+          { id: item.id, href: "", title, rel: "" },
+          "EPSG:3857",
+        ),
+        title,
+        roles: item.roles,
+        ...extraProperties,
+      },
+      source: {
+        /** @type {"XYZ"} */
+        type: "XYZ",
+        url,
+        projection: "EPSG:3857",
+      },
+    });
+  }
+
+  return layers;
+}
+/**
+ *
+ * @param {Record<string,any>} obj
+ * @returns {string}
+ */
+function encodeURLObject(obj) {
+  let str = "";
+  for (const key in obj) {
+    const value = obj[key];
+    if (value === null || value === undefined || value === "") {
+      continue;
+    }
+
+    const valueType = Array.isArray(value) ? "array" : typeof value;
+
+    switch (valueType) {
+      case "array": {
+        // Check if any element in the array is itself an array (multi-dimensional)
+        const hasNestedArrays = value.some((/** @type {any} */ item) =>
+          Array.isArray(item),
+        );
+
+        if (hasNestedArrays) {
+          // For multi-dimensional arrays, repeat the key with different values
+          for (const val of value) {
+            if (Array.isArray(val)) {
+              str += `${key}=${val.join(",")}&`;
+            } else {
+              str += `${key}=${val}&`;
+            }
+          }
+        } else {
+          // For simple arrays, join with commas
+          str += `${key}=${value.join(",")}&`;
+        }
+        break;
+      }
+      case "object": {
+        str += `${key}=${encodeURI(JSON.stringify(value))}&`;
+        break;
+      }
+      default: {
+        str += `${key}=${encodeURIComponent(value)}&`;
+        break;
+      }
+    }
+  }
+  return str;
+}