@eodash/eodash 5.3.3 → 5.4.0

package/dist/client/{asWebComponent-DdguWGDI.js → asWebComponent-Bw03Jutr.js}

@@ -1,6 +1,6 @@
 import { watch, onScopeDispose, effectScope, capitalize, reactive, watchEffect, toRef, shallowRef, Fragment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, unref, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, toRaw, toRefs, toValue, createVNode, mergeProps, createElementVNode, normalizeClass, getCurrentScope, onBeforeUnmount, readonly, onMounted, useId, onDeactivated, onActivated, nextTick, shallowReactive, onUnmounted, isRef, normalizeStyle, onUpdated, Text, Transition, resolveDynamicComponent, withDirectives, toDisplayString, useModel, createBlock, createCommentVNode, openBlock, withCtx, createTextVNode, defineAsyncComponent, onErrorCaptured, Suspense, createElementBlock, normalizeProps, withAsyncContext, defineCustomElement } from 'vue';
 import { storeToRefs, defineStore, createPinia } from 'pinia';
-import { r as registerProjection, c as createLayerID, e as extractRoles, g as getProjectionCode, f as fetchStyle, a as extractLayerConfig, b as addTooltipInteraction, d as createAssetID, m as mergeGeojsons, h as mapEl, i as isSTACItem, j as axios, k as extractLayerTimeValues, l as fetchApiItems, n as getDatetimeProperty, o as fetchAllStyles, p as getLayers, q as getCompareLayers, s as findLayer, t as findLayersByLayerPrefix, u as replaceLayersInStructure, v as generateFeatures, w as extractLayerLegend, x as extractCollectionUrls, y as generateLinksFromItems, z as revokeCollectionBlobUrls, A as currentUrl, B as datetime, C as poi, D as activeTemplate, E as mapPosition, F as indicator, G as currentCompareUrl, H as compareIndicator, I as comparePoi, J as states, K as actions } from './helpers-CtUlAW0N.js';
+import { r as registerProjection, c as createLayerID, e as extractRoles, a as extractEoxLegendLink, g as getProjectionCode, f as fetchStyle, b as extractLayerConfig, d as axios, h as addTooltipInteraction, i as createAssetID, m as mergeGeojsons, j as mapEl, k as isSTACItem, l as extractLayerTimeValues, n as fetchApiItems, o as getDatetimeProperty, p as fetchAllStyles, q as getLayers, s as getCompareLayers, t as findLayer, u as findLayersByLayerPrefix, v as replaceLayersInStructure, w as generateFeatures, x as extractLayerLegend, y as extractCollectionUrls, z as generateLinksFromItems, A as revokeCollectionBlobUrls, B as currentUrl, C as datetime, D as poi, E as activeTemplate, F as mapPosition, G as indicator, H as currentCompareUrl, I as compareIndicator, J as comparePoi, K as states, L as actions } from './helpers-CsjKHAcK.js';
 import log from 'loglevel';
 import { useEventBus, useMutationObserver, createSharedComposable } from '@vueuse/core';
 import { mdiWrench, mdiSnowflake, mdiVolleyball, mdiHiking, mdiLightningBolt, mdiLeaf, mdiAccountMultiple, mdiCurrencyEur, mdiWeatherWindy, mdiSetCenter, mdiHospitalBoxOutline, mdiImageFilterHdr, mdiWater, mdiBarley, mdiClose, mdiAlertCircle, mdiPlus, mdiMenuDown, mdiChevronLeft, mdiChevronRight } from '@mdi/js';
@@ -3621,9 +3621,7 @@ function setQueryParam(url, key, value) {
  * @param {string} collectionId
  * @param {string} title
  * @param {Record<string,import("stac-ts").StacAsset>} assets
- * @param {import("stac-ts").StacItem } item
- * @param {import("@/types").EodashStyleJson} [style]
- * @param {Record<string, unknown>} [layerConfig]
+ * @param {import("stac-ts").StacItem | import("stac-ts").StacCollection } stacObject
  * @param {Record<string, unknown>} [layerDatetime]
  * @param {object | null} [extraProperties]
  **/
@@ -3631,80 +3629,40 @@ async function createLayersFromAssets(
   collectionId,
   title,
   assets,
-  item,
-  style,
-  layerConfig,
+  stacObject,
   layerDatetime,
   extraProperties,
 ) {
   log.debug("Creating layers from assets");
-  let jsonArray = [];
-  let geoTIFFSources = [];
-  /** @type {number|null} */
-  let geoTIFFIdx = null;
-
-  let geoJsonIdx = 0;
-  let geoJsonAttributions = [];
+  const jsonArray = [];
+  const geoTIFFSources = [];
+  const geoTIFFIdx = [];
 
   const geoJsonSources = [];
-  let geoJsonRoles = {};
-  let projection = undefined;
-  for (const [idx, ast] of Object.keys(assets).entries()) {
-    // register projection if exists
-    const assetProjection =
-      /** @type {string | number | {name: string, def: string, extent?:number[]} | undefined} */ (
-        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;
-      if (assets[ast].attribution)
-        geoJsonAttributions.push(assets[ast].attribution);
-      extractRoles(geoJsonRoles, assets[ast]);
-    } else if (assets[ast]?.type === "application/vnd.flatgeobuf") {
-      const assetId = createAssetID(collectionId, item.id, idx);
-      log.debug(`Creating Vector layer from FlatGeoBuf`, assetId);
-
-      const layer = {
-        type: "Vector",
-        source: {
-          type: "FlatGeoBuf",
-          url: assets[ast].href,
-          projection,
-          attributions: assets[ast].attribution,
-        },
-        properties: {
-          id: assetId,
-          title,
-          layerDatetime,
-          ...(layerConfig && {
-            layerConfig: {
-              ...layerConfig,
-              style,
-            },
-          }),
-        },
-        ...(!style?.variables && { style }),
-        interactions: [],
-      };
-      // add tooltip interaction if style has tooltip
-      addTooltipInteraction(layer, style);
-
-      extractRoles(layer.properties, assets[ast]);
-
-      layer.properties = { ...layer.properties, ...(extraProperties ?? {}) };
-
-      jsonArray.push(layer);
-    } else if (assets[ast]?.type === "image/tiff") {
-      geoTIFFIdx = idx;
+  const geoJsonIdx = [];
+
+  const fgbIdx = [];
+  const fgbSources = [];
+  const assetIds = [];
+
+  for (const [idx, assetId] of Object.keys(assets).entries()) {
+    assetIds.push(assetId);
+
+    if (assets[assetId]?.type === "application/geo+json") {
+      geoJsonSources.push(assets[assetId].href);
+      geoJsonIdx.push(idx);
+    } else if (assets[assetId]?.type === "application/vnd.flatgeobuf") {
+      fgbSources.push(assets[assetId].href);
+      fgbIdx.push(idx);
+    } else if (assets[assetId]?.type === "image/tiff") {
+      geoTIFFIdx.push(idx);
       geoTIFFSources.push({
-        url: assets[ast].href,
-        attributions: assets[ast].attribution,
+        url: assets[assetId].href,
+        attributions: assets[assetId].attribution,
       });
-    } else if (assets[ast]?.type === "application/geodb+json") {
-      const responseData = await (await fetch(assets[ast].href)).json();
+    } else if (assets[assetId]?.type === "application/geodb+json") {
+      const responseData = await (await fetch(assets[assetId].href)).json();
+      geoJsonIdx.push(idx);
       if (
         !responseData ||
         !Array.isArray(responseData) ||
@@ -3764,61 +3722,179 @@ 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: { type: "GeoJSON", dataProjection: projection },
-        attributions: geoJsonAttributions,
-      },
-      properties: {
-        ...geoJsonRoles,
-        id: assetId,
-        title,
-        layerDatetime,
-        ...(layerConfig && {
-          layerConfig: {
-            ...layerConfig,
-            style,
-          },
-        }),
-      },
-      ...(!style?.variables && { style }),
-      interactions: [],
-    };
+    for (const [i, geoJsonSource] of geoJsonSources.entries()) {
+      // fetch styles and separate them by their mapping between links and assets
+      const assetName = assetIds[geoJsonIdx[i]];
+      const styles = await fetchStyle(stacObject, undefined, assetName);
+      // get the correct style which is not attached to a link
+      let { layerConfig, style } = extractLayerConfig(collectionId, styles);
+      let assetLayerId = createAssetID(
+        collectionId,
+        stacObject.id,
+        geoJsonIdx[i],
+      );
+      if (
+        assets[assetName]?.roles?.includes("overlay") ||
+        assets[assetName]?.roles?.includes("baselayer")
+      ) {
+        // to prevent them being removed by date change on main dataset
+        assetLayerId = assetName;
+      }
 
-    layer.properties = { ...layer.properties, ...(extraProperties ?? {}) };
-    addTooltipInteraction(layer, style);
-    jsonArray.push(layer);
-  }
-  if (geoTIFFSources.length && typeof geoTIFFIdx === "number") {
-    const geotiffSourceID = collectionId + ";:;GeoTIFF";
-    log.debug("Creating WebGLTile layer from GeoTIFF", geotiffSourceID);
-    log.debug("Configured Sources", geoTIFFSources);
-    const layer = {
-      type: "WebGLTile",
-      source: {
-        type: "GeoTIFF",
-        normalize: !style,
-        interpolate: false,
-        sources: geoTIFFSources,
-      },
-      properties: {
-        id: createAssetID(collectionId, item.id, geoTIFFIdx),
-        title,
-        layerConfig,
-        layerDatetime,
-      },
-      style,
-    };
-    if (extraProperties) {
-      layer.properties = { ...layer.properties, ...extraProperties };
+      log.debug(`Creating Vector layer from GeoJsons`, assetLayerId);
+      // register projection if exists
+      const assetProjection =
+        /** @type {string | number | {name: string, def: string, extent?:number[]} | undefined} */ (
+          assets[assetName]?.["proj:epsg"] ||
+            assets[assetName]?.["eodash:proj4_def"]
+        );
+      await registerProjection(assetProjection);
+      const projection = getProjectionCode(assetProjection) || "EPSG:4326";
+      const geoJSONURL =
+        stacObject?.["eodash:merge_assets"] === false
+          ? geoJsonSource
+          : await mergeGeojsons(geoJsonSources);
+
+      const layer = {
+        type: "Vector",
+        source: {
+          type: "Vector",
+          url: geoJSONURL,
+          format: { type: "GeoJSON", dataProjection: projection },
+          attributions: assets[assetName].attribution,
+        },
+        properties: {
+          id: assetLayerId,
+          title: assets[assetName]?.title || title,
+          layerDatetime,
+          ...(layerConfig && {
+            layerConfig: {
+              ...layerConfig,
+              style,
+            },
+          }),
+        },
+        ...(!style?.variables && { style }),
+        interactions: [],
+      };
+      layer.properties = { ...layer.properties, ...(extraProperties ?? {}) };
+      extractRoles(layer.properties, assets[assetName]);
+      addTooltipInteraction(layer, style);
+      jsonArray.push(layer);
+      // if we merged assets (default yes), then we can break from this loop
+      if (stacObject?.["eodash:merge_assets"] !== false) break;
+    }
+  }
+  if (fgbSources.length) {
+    for (const [i, fgbSource] of fgbSources.entries()) {
+      // fetch styles and separate them by their mapping between links and assets
+      const assetName = assetIds[fgbIdx[i]];
+      const styles = await fetchStyle(stacObject, undefined, assetName);
+      // get the correct style which is not attached to a link
+      let { layerConfig, style } = extractLayerConfig(collectionId, styles);
+      let assetLayerId = createAssetID(collectionId, stacObject.id, fgbIdx[i]);
+      if (
+        assets[assetName]?.roles?.includes("overlay") ||
+        assets[assetName]?.roles?.includes("baselayer")
+      ) {
+        // to prevent them being removed by date change on main dataset
+        assetLayerId = assetName;
+      }
+      log.debug(`Creating Vector layer from FlatGeoBuf`, assetLayerId);
+      // register projection if exists
+      const assetProjection =
+        /** @type {string | number | {name: string, def: string, extent?:number[]} | undefined} */ (
+          assets[assetName]?.["proj:epsg"] ||
+            assets[assetName]?.["eodash:proj4_def"]
+        );
+      await registerProjection(assetProjection);
+      const projection = getProjectionCode(assetProjection) || "EPSG:4326";
+      // in case we merge them, we pass urls, else just single url
+      const urlsObject = {
+        url: fgbSource,
+        // TODO uncomment this once fgb merging supported on source
+        // url: stacObject?.["eodash:merge_assets"] === false ? fgbSource : undefined,
+        // urls: stacObject?.["eodash:merge_assets"] !== false ? fgbSources : undefined,
+      };
+      const layer = {
+        type: "Vector",
+        source: {
+          ...urlsObject,
+          type: "FlatGeoBuf",
+          projection,
+          attributions: assets[assetName].attribution,
+        },
+        properties: {
+          id: assetLayerId,
+          title: assets[assetName]?.title || title,
+          layerDatetime,
+          ...(layerConfig && {
+            layerConfig: {
+              ...layerConfig,
+              style,
+            },
+          }),
+        },
+        ...(!style?.variables && { style }),
+        interactions: [],
+      };
+      layer.properties = { ...layer.properties, ...(extraProperties ?? {}) };
+      extractRoles(layer.properties, assets[assetName]);
+      addTooltipInteraction(layer, style);
+      jsonArray.push(layer);
+      // if we merged assets (default yes), then we can break from this loop
+      // TODO uncomment this once fgb merging supported on source
+      // if (stacObject?.["eodash:merge_assets"] !== false)
+      //   break
+    }
+  }
+
+  if (geoTIFFSources.length) {
+    for (const [i, geotiffSource] of geoTIFFSources.entries()) {
+      const assetName = assetIds[geoTIFFIdx[i]];
+      const styles = await fetchStyle(stacObject, undefined, assetName);
+      // get the correct style which is not attached to a link
+      let { layerConfig, style } = extractLayerConfig(collectionId, styles);
+      let assetLayerId = createAssetID(
+        collectionId,
+        stacObject.id,
+        geoTIFFIdx[i],
+      );
+      if (
+        assets[assetName]?.roles?.includes("overlay") ||
+        assets[assetName]?.roles?.includes("baselayer")
+      ) {
+        // to prevent them being removed by date change on main dataset
+        assetLayerId = assetName;
+      }
+      log.debug("Creating WebGLTile layer from GeoTIFF", assetLayerId);
+      log.debug("Configured Sources", geoTIFFSources);
+      const sources =
+        stacObject?.["eodash:merge_assets"] !== false ? geoTIFFSources : geotiffSource;
+      const layer = {
+        type: "WebGLTile",
+        source: {
+          type: "GeoTIFF",
+          normalize: !style,
+          interpolate: false,
+          sources,
+        },
+        properties: {
+          id: assetLayerId,
+          title,
+          layerConfig,
+          layerDatetime,
+        },
+        style,
+      };
+      if (extraProperties) {
+        layer.properties = { ...layer.properties, ...extraProperties };
+      }
+      extractRoles(layer.properties, assets[assetName]);
+      addTooltipInteraction(layer, style);
+      jsonArray.push(layer);
+      if (stacObject?.["eodash:merge_assets"] !== false) break;
     }
-    jsonArray.push(layer);
   }
 
   return jsonArray;
@@ -3828,17 +3904,17 @@ 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]
+ * @param {import('stac-ts').StacCollection} [collection]
  */
 const createLayersFromLinks = async (
   collectionId,
   title,
   item,
-  itemUrl,
   layerDatetime,
   extraProperties,
+  collection,
 ) => {
   log.debug("Creating layers from links");
   /** @type {Record<string,any>[]} */
@@ -3855,7 +3931,6 @@ const createLayersFromLinks = async (
 
   for (const wmsLink of wmsArray ?? []) {
     // Registering setting sub wms link projection
-
     const wmsLinkProjection =
       /** @type {number | string | {name: string, def: string} | undefined} */
       (wmsLink?.["proj:epsg"] || wmsLink?.["eodash:proj4_def"]);
@@ -3908,8 +3983,12 @@ const createLayersFromLinks = async (
       // Expand all dimensions into the params attribute
       Object.assign(json.source.params, wmsLink["wms:dimensions"]);
     }
+    if ("wms:styles" in wmsLink) {
+      // @ts-expect-error no type for eox-map
+      json.source.params["STYLES"] = wmsLink["wms:styles"];
+    }
     if (extraProperties !== null) {
-      json.properties = { ...json.properties, ...extraProperties };
+      json.properties = { ...json.properties, ...extraProperties, ...extractEoxLegendLink(wmsLink) };
     }
     jsonArray.push(json);
   }
@@ -3922,6 +4001,12 @@ const createLayersFromLinks = async (
       (wmtsLink?.["proj:epsg"] || wmtsLink?.["eodash:proj4_def"]);
 
     await registerProjection(wmtsLinkProjection);
+    const key =
+    /** @type {string | undefined} */ (wmtsLink["key"]) || undefined;
+
+    const styles = await fetchStyle(item, key);
+    // get the correct style which is attached to a link
+    const returnedLayerConfig = extractLayerConfig(collectionId, styles, undefined, "tileUrl");
     const projectionCode = getProjectionCode(wmtsLinkProjection || "EPSG:3857");
     // TODO: WARNING! This is a temporary project specific implementation
     // that needs to be removed once catalog and wmts creation from capabilities
@@ -3939,6 +4024,17 @@ const createLayersFromLinks = async (
     let { style, ...dimensionsWithoutStyle } = { ...dimensions };
     let extractedStyle = /** @type { string } */ (style || "default");
 
+    // TODO, this does not yet work between layer time changes because we do not get
+    // updated variables from OL layer due to usage of tileurlfunction
+    
+    // update dimensions with current value of style variables if applicable
+    const variables = returnedLayerConfig?.style?.variables;
+    if (variables) {
+      for (const [kk, vv] of Object.entries(variables)) {
+        dimensionsWithoutStyle[kk] = vv;
+      }
+    }
+    
     if (wmtsLink.title === "wmts capabilities") {
       log.debug(
         "Warning: WMTS Layer from capabilities added, function needs to be updated",
@@ -3950,6 +4046,7 @@ const createLayersFromLinks = async (
           id: linkId,
           title: title || item.id,
           layerDatetime,
+          layerConfig: returnedLayerConfig.layerConfig,
         },
         source: {
           type: "WMTS",
@@ -3996,7 +4093,7 @@ const createLayersFromLinks = async (
     }
     extractRoles(json.properties, wmtsLink);
     if (extraProperties !== null) {
-      json.properties = { ...json.properties, ...extraProperties };
+      json.properties = { ...json.properties, ...extraProperties, ...extractEoxLegendLink(wmtsLink) };
     }
     jsonArray.push(json);
   }
@@ -4005,7 +4102,18 @@ const createLayersFromLinks = async (
     const xyzLinkProjection =
       /** @type {number | string | {name: string, def: string} | undefined} */
       (xyzLink?.["proj:epsg"] || xyzLink?.["eodash:proj4_def"]);
-
+    const key =
+      /** @type {string | undefined} */ (xyzLink["key"]) || undefined;
+    const rasterformURL = /** @type {string|undefined} */ (
+      collection?.["eodash:rasterform"]
+    );
+    /** @type {import("@/types").EodashRasterJSONForm|undefined} */
+    const rasterForm = rasterformURL
+    ? await axios.get(rasterformURL).then((resp) => resp.data)
+    : undefined;
+    const styles = await fetchStyle(item, key);
+    // get the correct style which is attached to a link
+    let { layerConfig, style } = extractLayerConfig(collectionId, styles, rasterForm, "tileUrl");
     await registerProjection(xyzLinkProjection);
     const projectionCode = getProjectionCode(xyzLinkProjection || "EPSG:3857");
     const linkId = createLayerID(
@@ -4014,6 +4122,22 @@ const createLayersFromLinks = async (
       xyzLink,
       viewProjectionCode,
     );
+    let xyzUrl = xyzLink.href;
+
+    // TODO, this does not yet work between layer time changes because we do not get
+    // updated variables from OL layer due to usage of tileurlfunction
+
+    // update url query params with current value of style variables if applicable
+    const variables = style?.variables;
+    if (variables) {
+      const [base, query] = xyzUrl.split("?");
+      const params = new URLSearchParams(query);
+      for (const [kk, vv] of Object.entries(variables)) {
+        params.set(kk, JSON.stringify(vv));
+      }
+      xyzUrl = `${base}?${params.toString()}`;
+    }
+
     log.debug("XYZ Layer added", linkId);
     let json = {
       type: "Tile",
@@ -4022,10 +4146,11 @@ const createLayersFromLinks = async (
         title: xyzLink.title || title || item.id,
         roles: xyzLink.roles,
         layerDatetime,
+        layerConfig,
       },
       source: {
         type: "XYZ",
-        url: xyzLink.href,
+        url: xyzUrl,
         projection: projectionCode,
         attributions: xyzLink.attribution,
       },
@@ -4033,7 +4158,7 @@ const createLayersFromLinks = async (
 
     extractRoles(json.properties, xyzLink);
     if (extraProperties !== null) {
-      json.properties = { ...json.properties, ...extraProperties };
+      json.properties = { ...json.properties, ...extraProperties, ...extractEoxLegendLink(xyzLink) };
     }
     jsonArray.push(json);
   }
@@ -4057,9 +4182,9 @@ const createLayersFromLinks = async (
     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);
+    const styles = await fetchStyle(item, key);
     // get the correct style which is not attached to a link
-    let { layerConfig, style } = extractLayerConfig(linkId ?? "", styles);
+    let { layerConfig, style } = extractLayerConfig(collectionId, styles);
 
     let href = vectorTileLink.href;
     if ("auth:schemes" in item && "auth:refs" in vectorTileLink) {
@@ -4100,7 +4225,7 @@ const createLayersFromLinks = async (
     addTooltipInteraction(json, style);
     extractRoles(json.properties, vectorTileLink);
     if (extraProperties !== null) {
-      json.properties = { ...json.properties, ...extraProperties };
+      json.properties = { ...json.properties, ...extraProperties, ...extractEoxLegendLink(vectorTileLink) };
     }
     jsonArray.push(json);
   }
@@ -4112,18 +4237,31 @@ const createLayersFromLinks = async (
  * @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">[]}
+ * @returns {Promise<import("@eox/map/src/layers").EOxLayerType<"Tile","XYZ">[]>}
  */
-function createLayerFromRender(
+const createLayerFromRender = async (
   rasterURL,
   collection,
   item,
   extraProperties,
-) {
+) => {
   if (!collection || !collection.renders || !item) {
     return [];
   }
 
+  const rasterformURL = /** @type {string|undefined} */ (
+      collection?.["eodash:rasterform"]
+    );
+  /** @type {import("@/types").EodashRasterJSONForm|undefined} */
+  const rasterForm = rasterformURL
+    ? await axios.get(rasterformURL).then((resp) => resp.data)
+    : undefined;
+  let { layerConfig } = extractLayerConfig(
+    collection.id,
+    await fetchStyle(item),
+    rasterForm,
+  );
+
   const renders = /** @type {Record<string,import("@/types").Render>} */ (
     collection.renders ?? item?.renders
   );
@@ -4174,6 +4312,9 @@ function createLayerFromRender(
         title,
         roles: item.roles,
         ...extraProperties,
+        layerConfig: {
+          ...layerConfig,
+        },
       },
       source: {
         /** @type {"XYZ"} */
@@ -4185,7 +4326,7 @@ function createLayerFromRender(
   }
 
   return layers;
-}
+};
 /**
  *
  * @param {Record<string,any>} obj
@@ -4337,25 +4478,19 @@ class EodashCollection {
     this.selectedItem = item;
     const title = this.#collectionStac?.title || this.#collectionStac?.id || "";
     layersJson.unshift(
-      ...(await this.buildJsonArray(
-        item,
-        stacItemUrl,
-        title,
-        isObservationPoint,
-      )),
+      ...(await this.buildJsonArray(item, title, isObservationPoint)),
     );
     return layersJson;
   };
 
   /**
    * @param {import("stac-ts").StacItem} item
-   * @param {string} itemUrl
    * @param {string} title
    * @param {boolean} isObservationPoint
    * @param {string} [itemDatetime]
    * @returns {Promise<Record<string,any>[]>} layers
    * */
-  async buildJsonArray(item, itemUrl, title, isObservationPoint, itemDatetime) {
+  async buildJsonArray(item, title, isObservationPoint, itemDatetime) {
     if (!item) {
       console.warn("[eodash] no item provided to buildJsonArray");
       return [];
@@ -4364,7 +4499,6 @@ class EodashCollection {
     log.debug(
       "Building JSON array",
       item,
-      itemUrl,
       title,
       isObservationPoint,
       itemDatetime,
@@ -4391,19 +4525,6 @@ class EodashCollection {
     // will try to extract anything it supports but for which we have
     // less control.
 
-    const rasterformURL = /** @type {string|undefined} */ (
-      this.#collectionStac?.["eodash:rasterform"]
-    );
-    /** @type {import("@/types").EodashRasterJSONForm|undefined} */
-    const rasterForm = rasterformURL
-      ? await axios.get(rasterformURL).then((resp) => resp.data)
-      : undefined;
-    let { layerConfig, style } = extractLayerConfig(
-      this.#collectionStac?.id ?? "",
-      await fetchStyle(item, itemUrl),
-      rasterForm,
-    );
-
     const { layerDatetime, timeControlValues } = extractLayerTimeValues(
       await this.getItems(),
       item.properties?.datetime ??
@@ -4417,6 +4538,7 @@ class EodashCollection {
       }
       return data;
     }, /** @type {Record<string,import('stac-ts').StacAsset>} */ ({}));
+
     const isSupported =
       item.links.some((link) =>
         ["wms", "xyz", "wmts", "vector-tile"].includes(link.rel),
@@ -4438,20 +4560,19 @@ class EodashCollection {
         this.#collectionStac?.id ?? "",
         title,
         item,
-        itemUrl,
         layerDatetime,
         extraProperties,
+        this.#collectionStac,
       );
 
       jsonArray.push(
         ...((this.rasterEndpoint &&
-          createLayerFromRender(
+          await createLayerFromRender(
             this.rasterEndpoint,
             this.#collectionStac,
             item,
             {
               ...extraProperties,
-              ...(layerConfig && { layerConfig }),
               ...(layerDatetime && { layerDatetime }),
             },
           )) ||
@@ -4461,8 +4582,6 @@ class EodashCollection {
           title || this.#collectionStac?.title || item.id,
           dataAssets,
           item,
-          style,
-          layerConfig,
           layerDatetime,
           extraProperties,
         )),
@@ -4470,6 +4589,10 @@ class EodashCollection {
         ...links,
       );
     } else {
+      // get the correct style which is not attached to a link
+      const id = this.#collectionStac?.id ?? "";
+      const styles = await fetchStyle(item);
+      let { layerConfig, style } = extractLayerConfig(id, styles);
       // fallback to STAC
       const json = {
         type: "STAC",
@@ -4477,7 +4600,7 @@ class EodashCollection {
         displayFootprint: false,
         data: item,
         properties: {
-          id: this.#collectionStac?.id ?? "",
+          id,
           title: title || item.id,
           layerConfig,
         },
@@ -4611,10 +4734,7 @@ class EodashCollection {
       return [];
     }
     // get all style links, which could contribute by tooltip config and aggregate them
-    const styles = await fetchAllStyles(
-      this.selectedItem,
-      `${this.#collectionUrl}/${this.selectedItem.id}`,
-    );
+    const styles = await fetchAllStyles(this.selectedItem);
     // get only unique ids to avoid duplicates
     const aggregatedTooltips = [
       ...new Map(
@@ -4658,7 +4778,6 @@ class EodashCollection {
       // if specifiedLink is an item, we create layers from it
       newLayers = await this.buildJsonArray(
         specifiedLink,
-        this.#collectionUrl + `/items/${specifiedLink.id}`,
         this.#collectionStac?.title || this.#collectionStac?.id || "",
         this.#collectionStac?.endpointtype === "GeoDB" ||
           !!this.#collectionStac?.locations,
@@ -4687,6 +4806,10 @@ class EodashCollection {
       newLayers,
     );
 
+    // Emit event to update potential widget dependencies such as process layer ids
+    const layersEvents = useEventBus(eoxLayersKey);
+    layersEvents.emit("layertime:updated", newLayers);
+
     return updatedLayers;
   }
 
@@ -4709,17 +4832,16 @@ class EodashCollection {
     );
 
     return [
-      //@ts-expect-error indicator instead of item
       ...(await createLayersFromLinks(
         indicator?.id ?? "",
         indicator?.title || indicator.id,
+        //@ts-expect-error indicator instead of item
         indicator,
       )),
       ...(await createLayersFromAssets(
         indicator?.id ?? "",
         indicator?.title || indicator.id,
         indicatorAssets,
-        //@ts-expect-error indicator instead of item
         indicator,
       )),
     ];
@@ -4920,6 +5042,7 @@ function moveItemProperties(item) {
     "id",
     "collection",
     "properties",
+    "auth:schemes"
   ];
   for (const key in item) {
     if (!stacProperties.includes(key)) {
@@ -5860,7 +5983,7 @@ const useSTAcStore = defineStore("stac", () => {
 
 const store = { stac: { useSTAcStore }, actions, states };
 
-const useEodashRuntime = async (runtimeConfig) => {
+const useEodashRuntime = async (runtimeConfig = import.meta.env.EODASH_RUNTIME_CONFIG) => {
   let eodashConfig;
   const eodash = (
     /** @type {import("@/types").Eodash} */
@@ -8045,7 +8168,7 @@ const ErrorAlert = /*#__PURE__*/_export_sfc(_sfc_main$4, [['styles',[_style_0$2]
 const internalWidgets = (() => {
   /** @type {Record<string, () => Promise<import("vue").Component>>} */
   const importMap = {
-    .../* #__PURE__ */ Object.assign({"/widgets/EodashDatePicker.vue": () => import('./EodashDatePicker-Dewym-cx.js'),"/widgets/EodashItemCatalog/index.vue": () => import('./index-BxDh5v-H.js'),"/widgets/EodashItemFilter.vue": () => import('./EodashItemFilter-CAsZpOoQ.js'),"/widgets/EodashLayerControl.vue": () => import('./EodashLayerControl-fn-rt8Ac.js'),"/widgets/EodashLayoutSwitcher.vue": () => import('./EodashLayoutSwitcher-B9XqQXCS.js'),"/widgets/EodashMap/EodashMapBtns.vue": () => import('./EodashMapBtns-nFY6MIAX.js'),"/widgets/EodashMap/index.vue": () => import('./index-BkW06-Lg.js'),"/widgets/EodashProcess/ProcessList.vue": () => import('./ProcessList-DxyCFQdz.js').then(n => n.a),"/widgets/EodashProcess/index.vue": () => import('./index-BJvLt3Xf.js'),"/widgets/EodashStacInfo.vue": () => import('./EodashStacInfo-lxBKoav9.js'),"/widgets/EodashTimeSlider.vue": () => import('./EodashTimeSlider-DI97QkNT.js'),"/widgets/EodashTools.vue": () => import('./EodashTools-D5ShUT1g.js'),"/widgets/ExportState.vue": () => import('./ExportState-ruNyRS2E.js'),"/widgets/PopUp.vue": () => import('./PopUp-DRgOmD7-.js'),"/widgets/WidgetsContainer.vue": () => import('./WidgetsContainer-DXD_8rqh.js')}),
+    .../* #__PURE__ */ Object.assign({"/widgets/EodashDatePicker.vue": () => import('./EodashDatePicker-BZeQ6bcu.js'),"/widgets/EodashItemCatalog/index.vue": () => import('./index-BoCcZ0l4.js'),"/widgets/EodashItemFilter.vue": () => import('./EodashItemFilter-CmZkk7GK.js'),"/widgets/EodashLayerControl.vue": () => import('./EodashLayerControl-D54fY-bX.js'),"/widgets/EodashLayoutSwitcher.vue": () => import('./EodashLayoutSwitcher-BCP3FvDb.js'),"/widgets/EodashMap/EodashMapBtns.vue": () => import('./EodashMapBtns-D-HulIl1.js'),"/widgets/EodashMap/index.vue": () => import('./index-BIcmbjr0.js'),"/widgets/EodashProcess/ProcessList.vue": () => import('./ProcessList-C9eAg2Sb.js').then(n => n.a),"/widgets/EodashProcess/index.vue": () => import('./index-BHilH1qx.js'),"/widgets/EodashStacInfo.vue": () => import('./EodashStacInfo-BZbmT8vT.js'),"/widgets/EodashTimeSlider.vue": () => import('./EodashTimeSlider-DIcAJr6D.js'),"/widgets/EodashTools.vue": () => import('./EodashTools-Cz6X6hsF.js'),"/widgets/ExportState.vue": () => import('./ExportState-DFVFAgKz.js'),"/widgets/PopUp.vue": () => import('./PopUp-DwI8V2gW.js'),"/widgets/WidgetsContainer.vue": () => import('./WidgetsContainer-D-VfMRxE.js')}),
     .../* #__PURE__ */ Object.assign({}),
   };
   for (const key in importMap) {
@@ -8171,7 +8294,7 @@ const getWidgetDefinition = (config) => {
 
     case "web-component":
       importedWidget.component = defineAsyncComponent({
-        loader: () => import('./DynamicWebComponent-CBsxC82P.js'),
+        loader: () => import('./DynamicWebComponent-CoLO8FEf.js'),
         suspensible: true,
       });
       importedWidget.props = reactive(config.widget);
@@ -8568,7 +8691,7 @@ return (_ctx, _cache) => {
 
 };
 
-const version = "5.3.3";
+const version = "5.4.0";
 const pkgJson = {
   version};
 
@@ -8678,15 +8801,15 @@ const { smAndDown } = useDisplay();
 
 const TemplateComponent = computed(() =>
   smAndDown.value
-    ? defineAsyncComponent(() => import('./MobileLayout-BfBeF-JF.js'))
-    : defineAsyncComponent(() => import('./DashboardLayout-Cp8Rv3Ef.js')),
+    ? defineAsyncComponent(() => import('./MobileLayout-3Ko9XSfO.js'))
+    : defineAsyncComponent(() => import('./DashboardLayout-CQOGHPW_.js')),
 );
 
 const HeaderComponent = defineAsyncComponent(
-  () => import('./Header-BBdi_-Lp.js'),
+  () => import('./Header-_D9Z-zFJ.js'),
 );
 const FooterComponent = defineAsyncComponent(
-  () => import('./Footer-IQNyfd78.js'),
+  () => import('./Footer-DLzQcjkI.js'),
 );
 
 const error = ref("");