@eodash/eodash 5.3.2 → 5.4.0

package/core/client/eodashSTAC/createLayers.js

@@ -1,5 +1,6 @@
 import { registerProjection } from "@/store/actions";
 import { mapEl } from "@/store/states";
+import axios from "@/plugins/axios";
 
 import {
   extractRoles,
@@ -8,6 +9,7 @@ import {
   createAssetID,
   mergeGeojsons,
   extractLayerConfig,
+  extractEoxLegendLink,
   addTooltipInteraction,
   fetchStyle,
 } from "./helpers";
@@ -18,9 +20,7 @@ import log from "loglevel";
  * @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]
  **/
@@ -28,80 +28,40 @@ export 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) ||
@@ -117,29 +77,37 @@ export async function createLayersFromAssets(
       const features = [];
       responseData.forEach((ftr, i) => {
         const { geometry, ...properties } = ftr;
-        if (geometry.type === 'MultiPoint' || geometry.type === 'MultiPolygon') {
-          geometry.coordinates.forEach((/** @type {Record<string,any>[]} */ coordPair, /** @type {number} */j) => {
-            const singleGeometry = {
-              type: geometry.type === 'MultiPoint' ? 'Point' : 'Polygon',
-              coordinates: coordPair,
-            };
-            features.push({
-              type: 'Feature',
-              id: `${i}_${j}`,
-              properties,
-              geometry: singleGeometry,
-            });
-          });
+        if (
+          geometry.type === "MultiPoint" ||
+          geometry.type === "MultiPolygon"
+        ) {
+          geometry.coordinates.forEach(
+            (
+              /** @type {Record<string,any>[]} */ coordPair,
+              /** @type {number} */ j,
+            ) => {
+              const singleGeometry = {
+                type: geometry.type === "MultiPoint" ? "Point" : "Polygon",
+                coordinates: coordPair,
+              };
+              features.push({
+                type: "Feature",
+                id: `${i}_${j}`,
+                properties,
+                geometry: singleGeometry,
+              });
+            },
+          );
         } else {
           features.push({
-            type: 'Feature',
+            type: "Feature",
             properties,
             id: `${i}`,
             geometry: geometry,
           });
         }
       });
-      
+
       const geojson = {
         type: "FeatureCollection",
         features: features,
@@ -153,61 +121,179 @@ 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: {"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;
+      }
+
+      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);
 
-    layer.properties = { ...layer.properties, ...(extraProperties ?? {}) };
-    addTooltipInteraction(layer, style);
-    jsonArray.push(layer);
+      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 (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 };
+  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;
@@ -217,17 +303,17 @@ 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]
+ * @param {import('stac-ts').StacCollection} [collection]
  */
 export const createLayersFromLinks = async (
   collectionId,
   title,
   item,
-  itemUrl,
   layerDatetime,
   extraProperties,
+  collection,
 ) => {
   log.debug("Creating layers from links");
   /** @type {Record<string,any>[]} */
@@ -235,7 +321,8 @@ 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") ?? [];
+  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
@@ -243,7 +330,6 @@ export 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"]);
@@ -296,8 +382,12 @@ export 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);
   }
@@ -310,6 +400,12 @@ export 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
@@ -327,6 +423,17 @@ export 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",
@@ -338,6 +445,7 @@ export const createLayersFromLinks = async (
           id: linkId,
           title: title || item.id,
           layerDatetime,
+          layerConfig: returnedLayerConfig.layerConfig,
         },
         source: {
           type: "WMTS",
@@ -384,7 +492,7 @@ export 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);
   }
@@ -393,7 +501,18 @@ export 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(
@@ -402,6 +521,22 @@ export 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",
@@ -410,10 +545,11 @@ export 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,
       },
@@ -421,7 +557,7 @@ export 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);
   }
@@ -432,7 +568,9 @@ export const createLayersFromLinks = async (
       (vectorTileLink?.["proj:epsg"] || vectorTileLink?.["eodash:proj4_def"]);
 
     await registerProjection(vectorTileLinkProjection);
-    const projectionCode = getProjectionCode(vectorTileLinkProjection || "EPSG:3857");
+    const projectionCode = getProjectionCode(
+      vectorTileLinkProjection || "EPSG:3857",
+    );
     const linkId = createLayerID(
       collectionId,
       item.id,
@@ -440,18 +578,19 @@ export const createLayersFromLinks = async (
       viewProjectionCode,
     );
     log.debug("Vector Tile Layer added", linkId);
-    const key = /** @type {string | undefined} */ (vectorTileLink["key"]) || undefined;
+    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) {
-      href = handleAuthenticationOfLink(/** @type { import("@/types").StacAuthItem} */ (item), /** @type { import("@/types").StacAuthLink} */ (vectorTileLink));
+      href = handleAuthenticationOfLink(
+        /** @type { import("@/types").StacAuthItem} */ (item),
+        /** @type { import("@/types").StacAuthLink} */ (vectorTileLink),
+      );
     }
     const json = {
       type: "VectorTile",
@@ -462,11 +601,11 @@ export const createLayersFromLinks = async (
         roles: vectorTileLink.roles,
         layerDatetime,
         ...(layerConfig && {
-            layerConfig: {
-              ...layerConfig,
-              style,
-            },
-          }),
+          layerConfig: {
+            ...layerConfig,
+            style,
+          },
+        }),
       },
       source: {
         type: "VectorTile",
@@ -485,7 +624,7 @@ export 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);
   }
@@ -497,18 +636,31 @@ export 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">[]>}
  */
-export function createLayerFromRender(
+export 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
   );
@@ -559,6 +711,9 @@ export function createLayerFromRender(
         title,
         roles: item.roles,
         ...extraProperties,
+        layerConfig: {
+          ...layerConfig,
+        },
       },
       source: {
         /** @type {"XYZ"} */