@eodash/eodash 5.7.0 → 5.8.0

package/core/client/eodashSTAC/createLayers.js

@@ -1,6 +1,6 @@
 import { registerProjection } from "@/store/actions";
 import { mapEl } from "@/store/states";
-import axios from "@/plugins/axios";
+import { useEodash } from "@/composables";
 
 import {
   extractRoles,
@@ -11,10 +11,18 @@ import {
   extractLayerConfig,
   extractEoxLegendLink,
   addTooltipInteraction,
-  fetchStyle,
+  fetchRasterForm,
+  resolveStyle,
+  getBandsProperty,
+  applyTitilerUpscaling,
+  encodeURLObject,
+  normalizeRescale,
+  normalizeNodata,
+  resolveRenders,
 } from "./helpers";
 import { handleAuthenticationOfLink } from "./auth";
 import log from "loglevel";
+import axios from "@/plugins/axios";
 import { useSTAcStore } from "@/store/stac";
 
 /**
@@ -41,6 +49,7 @@ function buildCapabilitiesUrl(href) {
  * @param {import("stac-ts").StacItem | import("stac-ts").StacCollection } stacObject
  * @param {Record<string, unknown>} [layerDatetime]
  * @param {object | null} [extraProperties]
+ * @param {import("stac-ts").StacCollection | null} [collection] - Used to fall back to a collection-level style link.
  **/
 export async function createLayersFromAssets(
   collectionId,
@@ -49,6 +58,7 @@ export async function createLayersFromAssets(
   stacObject,
   layerDatetime,
   extraProperties,
+  collection,
 ) {
   log.debug("Creating layers from assets");
   const jsonArray = [];
@@ -60,18 +70,35 @@ export async function createLayersFromAssets(
 
   const fgbIdx = [];
   const fgbSources = [];
+  const zarrAssetIds = [];
+  const zarrIdx = [];
   const assetIds = [];
 
   for (const [idx, assetId] of Object.keys(assets).entries()) {
     assetIds.push(assetId);
 
-    if (assets[assetId]?.type === "application/geo+json") {
+    if (
+      assets[assetId]?.type?.includes("application/geo+json") &&
+      assets[assetId]?.href?.includes("http")
+    ) {
       geoJsonSources.push(assets[assetId].href);
       geoJsonIdx.push(idx);
-    } else if (assets[assetId]?.type === "application/vnd.flatgeobuf") {
+    } else if (
+      assets[assetId]?.type?.includes("application/vnd.flatgeobuf") &&
+      assets[assetId]?.href?.includes("http")
+    ) {
       fgbSources.push(assets[assetId].href);
       fgbIdx.push(idx);
-    } else if (assets[assetId]?.type === "image/tiff") {
+    } else if (
+      assets[assetId]?.type ==
+      "application/vnd.zarr; version=3; profile=multiscales"
+    ) {
+      zarrAssetIds.push(assetId);
+      zarrIdx.push(idx);
+    } else if (
+      assets[assetId]?.type?.includes("image/tiff") &&
+      assets[assetId]?.href?.includes("http")
+    ) {
       geoTIFFIdx.push(idx);
       geoTIFFSources.push({
         url: assets[assetId].href,
@@ -79,7 +106,7 @@ export async function createLayersFromAssets(
           ? { attributions: assets[assetId].attribution }
           : {}),
       });
-    } else if (assets[assetId]?.type === "application/geodb+json") {
+    } else if (assets[assetId]?.type?.includes("application/geodb+json")) {
       const responseData = await (await fetch(assets[assetId].href)).json();
       geoJsonIdx.push(idx);
       if (
@@ -140,11 +167,122 @@ export async function createLayersFromAssets(
     }
   }
 
+  if (geoTIFFSources.length) {
+    for (const [i, geotiffSource] of geoTIFFSources.entries()) {
+      const assetName = assetIds[geoTIFFIdx[i]];
+      const styles = await resolveStyle(
+        stacObject,
+        collection,
+        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: assets[assetName]?.title || 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;
+    }
+  }
+
+  if (zarrAssetIds.length) {
+    for (const [i, assetName] of zarrAssetIds.entries()) {
+      const fetchedStyle = await resolveStyle(
+        stacObject,
+        collection,
+        undefined,
+        assetName,
+      );
+      const { layerConfig, style } = extractLayerConfig(
+        collectionId,
+        fetchedStyle,
+      );
+      const bandsPath = getBandsProperty(layerConfig?.schema);
+      const defaultBands = bandsPath?.reduce(
+        (node, key) => node?.[key],
+        layerConfig?.schema,
+      )?.default ?? ["b04", "b03", "b02"];
+
+      let assetLayerId = createAssetID(collectionId, stacObject.id, zarrIdx[i]);
+      if (
+        assets[assetName]?.roles?.includes("overlay") ||
+        assets[assetName]?.roles?.includes("baselayer")
+      ) {
+        assetLayerId = assetName;
+      }
+
+      log.debug("Creating WebGLTile layer from GeoZarr", assetLayerId);
+
+      const layer = {
+        type: "WebGLTile",
+        properties: {
+          id: assetLayerId,
+          title: assets[assetName]?.title || title,
+          layerConfig,
+          layerDatetime,
+        },
+        source: {
+          type: "GeoZarr",
+          url: assets[assetName].href,
+          bands: defaultBands,
+        },
+        ...(style ? { style } : {}),
+      };
+      if (extraProperties) {
+        layer.properties = { ...layer.properties, ...extraProperties };
+      }
+      extractRoles(layer.properties, assets[assetName]);
+      jsonArray.push(layer);
+    }
+  }
+
   if (geoJsonSources.length) {
     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);
+      const styles = await resolveStyle(
+        stacObject,
+        collection,
+        undefined,
+        assetName,
+      );
       // get the correct style which is not attached to a link
       let { layerConfig, style } = extractLayerConfig(collectionId, styles);
       let assetLayerId = createAssetID(
@@ -210,7 +348,12 @@ export async function createLayersFromAssets(
     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);
+      const styles = await resolveStyle(
+        stacObject,
+        collection,
+        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]);
@@ -270,56 +413,6 @@ export async function createLayersFromAssets(
     }
   }
 
-  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: assets[assetName]?.title || 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;
-    }
-  }
-
   return jsonArray;
 }
 
@@ -349,6 +442,10 @@ export const createLayersFromLinks = async (
     item.links.filter((l) => l.rel === "vector-tile") ?? [];
   const mapboxStyleDocumentArray =
     item.links.filter((l) => l.rel === "mapbox-style-document") ?? [];
+  // An xyz link takes precedence over a tilejson link;
+  const tilejsonArray = xyzArray.length
+    ? []
+    : (item.links.filter((l) => l.rel === "tilejson") ?? []);
   // Taking projection code from main map view, as main view defines
   // projection for comparison map
   const viewProjectionCode = mapEl?.value?.projection || "EPSG:3857";
@@ -371,6 +468,20 @@ export const createLayersFromLinks = async (
       wmsLink,
       viewProjectionCode,
     );
+    const rasterForm = await fetchRasterForm(
+      /** @type {string|object|undefined} */ (
+        wmsLink?.["eodash:rasterform"] ||
+          item?.["eodash:rasterform"] ||
+          collection?.["eodash:rasterform"]
+      ),
+    );
+    let { layerConfig } = extractLayerConfig(
+      collectionId,
+      {},
+      rasterForm,
+      "tileUrl",
+    );
+
     log.debug("WMS Layer added", linkId);
     const tileSize = /** @type {number[]} */ (
       "wms:tilesize" in wmsLink
@@ -383,6 +494,7 @@ export const createLayersFromLinks = async (
         id: linkId,
         title: wmsLink.title || title || item.id,
         layerDatetime,
+        layerConfig,
       },
       source: {
         type: "TileWMS",
@@ -438,15 +550,18 @@ 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 rasterForm = await fetchRasterForm(
+      /** @type {string|object|undefined} */ (
+        wmtsLink?.["eodash:rasterform"] ||
+          item?.["eodash:rasterform"] ||
+          collection?.["eodash:rasterform"]
+      ),
+    );
     const returnedLayerConfig = extractLayerConfig(
       collectionId,
-      styles,
-      undefined,
+      {},
+      rasterForm,
       "tileUrl",
     );
     const projectionCode = getProjectionCode(wmtsLinkProjection || "EPSG:3857");
@@ -469,14 +584,6 @@ export const createLayersFromLinks = async (
     // 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.href.includes("marine.copernicus")) {
       log.debug(
         "Warning: WMTS Layer from capabilities added, function needs to be updated",
@@ -517,6 +624,7 @@ export const createLayersFromLinks = async (
           id: linkId,
           title: wmtsLink.title || title || item.id,
           layerDatetime,
+          layerConfig: returnedLayerConfig.layerConfig,
         },
         source: {
           type: "WMTSCapabilities",
@@ -546,19 +654,16 @@ 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"]
+    const rasterForm = await fetchRasterForm(
+      /** @type {string|object|undefined} */ (
+        xyzLink?.["eodash:rasterform"] ||
+          item?.["eodash:rasterform"] ||
+          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(
+    let { layerConfig } = extractLayerConfig(
       collectionId,
-      styles,
+      {},
       rasterForm,
       "tileUrl",
     );
@@ -571,25 +676,14 @@ export const createLayersFromLinks = async (
       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()}`;
-    }
-
     const { supportedUpscalingEndpoints } = useSTAcStore();
-    const isUpscalingSupported = supportedUpscalingEndpoints.some(
-      (/** @type {string} */ endpoint) => xyzUrl.includes(endpoint),
+    const upscaling = applyTitilerUpscaling(
+      xyzUrl,
+      supportedUpscalingEndpoints,
     );
+    if (upscaling) {
+      xyzUrl = upscaling.url;
+    }
 
     // Add sharding for s2maps automatically
     if (xyzUrl.includes("s2maps-tiles.eu")) {
@@ -608,15 +702,15 @@ export const createLayersFromLinks = async (
       },
       source: {
         type: "XYZ",
-        url: isUpscalingSupported ? xyzUrl.replace("{y}", "{y}@2x") : xyzUrl,
+        url: xyzUrl,
         projection: projectionCode,
         ...(xyzLink.attribution ? { attributions: xyzLink.attribution } : {}),
       },
     };
-    if (isUpscalingSupported) {
+    if (upscaling) {
       // @ts-expect-error tileGrid is added here and supported in eox-map layer definition
       json.source.tileGrid = {
-        tileSize: [512, 512],
+        tileSize: upscaling.tileSize,
       };
     }
     if (
@@ -640,6 +734,96 @@ export const createLayersFromLinks = async (
     jsonArray.push(json);
   }
 
+  for (const tilejsonLink of tilejsonArray) {
+    // The tilejson href is a complete URL with the render params baked in by the
+    // STAC producer; fetch it and use its `tiles[0]` template as an XYZ source.
+    const tileJSON = await axios
+      .get(tilejsonLink.href)
+      .then((res) => res.data)
+      .catch((err) => {
+        console.error("[eodash] Failed to fetch item TileJSON", err);
+        return null;
+      });
+    if (!tileJSON?.tiles?.[0]) {
+      console.warn(
+        "[eodash] No tile URL in item TileJSON response",
+        tilejsonLink.href,
+      );
+      continue;
+    }
+    // Only raster XYZ tiles are supported; skip vector & TMS scheme TileJSON
+    if (tileJSON.vector_layers || tileJSON.scheme === "tms") {
+      console.warn(
+        "[eodash] Unsupported TileJSON (only raster XYZ is supported)",
+        tilejsonLink.href,
+      );
+      continue;
+    }
+
+    const tilejsonProjection =
+      /** @type {number | string | {name: string, def: string} | undefined} */
+      (tilejsonLink?.["proj:epsg"] || tilejsonLink?.["eodash:proj4_def"]);
+    await registerProjection(tilejsonProjection);
+    const projectionCode = getProjectionCode(tilejsonProjection || "EPSG:3857");
+    const rasterForm = await fetchRasterForm(
+      /** @type {string|object|undefined} */ (
+        tilejsonLink?.["eodash:rasterform"] ||
+          item?.["eodash:rasterform"] ||
+          collection?.["eodash:rasterform"]
+      ),
+    );
+    const { layerConfig } = extractLayerConfig(
+      collectionId,
+      {},
+      rasterForm,
+      "tileUrl",
+    );
+    const linkId = createLayerID(
+      collectionId,
+      item.id,
+      tilejsonLink,
+      viewProjectionCode,
+    );
+
+    log.debug("TileJSON layer added", linkId);
+    /** @type {Record<string, any>} */
+    const json = {
+      type: "Tile",
+      properties: {
+        id: linkId,
+        title: tilejsonLink.title || title || item.id,
+        roles: tilejsonLink.roles,
+        layerDatetime,
+        layerConfig,
+      },
+      source: {
+        type: "XYZ",
+        ...(tileJSON.tiles.length > 1
+          ? { urls: tileJSON.tiles }
+          : { url: tileJSON.tiles[0] }),
+        projection: projectionCode,
+        // Link attribution wins; the TileJSON document's own is the fallback.
+        ...(tilejsonLink.attribution || tileJSON.attribution
+          ? {
+              attributions: tilejsonLink.attribution || tileJSON.attribution,
+            }
+          : {}),
+      },
+    };
+    if (Number.isFinite(tileJSON.minzoom)) json.minZoom = tileJSON.minzoom;
+    if (Number.isFinite(tileJSON.maxzoom)) json.maxZoom = tileJSON.maxzoom;
+
+    extractRoles(json.properties, tilejsonLink);
+    if (extraProperties !== null) {
+      json.properties = {
+        ...json.properties,
+        ...extraProperties,
+        ...extractEoxLegendLink(tilejsonLink),
+      };
+    }
+    jsonArray.push(json);
+  }
+
   for (const vectorTileLink of vectorTileArray ?? []) {
     const vectorTileLinkProjection =
       /** @type {number | string | {name: string, def: string} | undefined} */
@@ -659,7 +843,7 @@ export 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, key);
+    const styles = await resolveStyle(item, collection, key);
     // get the correct style which is not attached to a link
     let { layerConfig, style } = extractLayerConfig(collectionId, styles);
 
@@ -745,7 +929,7 @@ export const createLayersFromLinks = async (
         ),
         applyOptions,
       );
-      applyOptions = /** @type { object } */ (optionsObject);
+      applyOptions = /** @type {object} */ (optionsObject);
       href = url;
     }
     const json = {
@@ -791,61 +975,85 @@ export const createLayerFromRender = async (
   item,
   extraProperties,
 ) => {
-  if (!collection || !collection.renders || !item) {
+  // config renders > collection STAC renders > item renders
+  const renders = /** @type {Record<string,import("@/types").Render>} */ (
+    resolveRenders(collection, useEodash()?.options?.renders) ?? item?.renders
+  );
+  if (!collection || !item || !renders) {
     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,
+  // Yield to a raster xyz/tilejson link — createLayersFromLinks renders it.
+  const hasMatchingTileLink = item.links?.some(
+    (link) =>
+      (link.rel === "xyz" || link.rel === "tilejson") &&
+      link.href?.includes(rasterURL),
   );
+  if (hasMatchingTileLink) {
+    return [];
+  }
 
-  const renders = /** @type {Record<string,import("@/types").Render>} */ (
-    collection.renders ?? item?.renders
+  const rasterForm = await fetchRasterForm(
+    /** @type {string|object|undefined} */ (
+      item?.["eodash:rasterform"] || collection?.["eodash:rasterform"]
+    ),
   );
+  let { layerConfig } = extractLayerConfig(collection.id, {}, rasterForm);
+
+  /**
+   * Resolves the first defined value of a property across a render's assets,
+   * checking item assets before falling back to collection assets.
+   * @param {import("@/types").Render} render
+   * @param {string} propertyName
+   * @returns {any}
+   */
+  const getRenderAssetProperty = (render, propertyName) => {
+    for (const assetKey of render.assets ?? []) {
+      const asset = item?.assets?.[assetKey] ?? collection?.assets?.[assetKey];
+      const value = asset?.[propertyName];
+      if (value !== undefined) {
+        return value;
+      }
+    }
+    return undefined;
+  };
+
   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 expression =
+      renders[key].expression ??
+      getRenderAssetProperty(renders[key], "expression");
 
     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,
+      // TiTiler treats assets and expression as mutually exclusive band selection
+      assets: expression ? undefined : renders[key].assets,
+      expression,
+      nodata: normalizeNodata(
+        renders[key].nodata ?? getRenderAssetProperty(renders[key], "nodata"),
+      ),
       resampling:
         renders[key].resampling ??
-        assetsCollection["assets"]?.[renders[key].assets[0]]?.resampling,
+        getRenderAssetProperty(renders[key], "resampling"),
       color_formula:
         renders[key].color_formula ??
-        assetsCollection["assets"]?.[renders[key].assets[0]]?.color_formula,
+        getRenderAssetProperty(renders[key], "color_formula"),
       colormap:
         renders[key].colormap ??
-        assetsCollection["assets"]?.[renders[key].assets[0]]?.colormap,
+        getRenderAssetProperty(renders[key], "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,
+        getRenderAssetProperty(renders[key], "colormap_name"),
+      rescale: normalizeRescale(
+        renders[key].rescale ?? getRenderAssetProperty(renders[key], "rescale"),
+      ),
+      bidx: renders[key].bidx,
+      tilesize: renders[key].tilesize,
     };
     const paramsStr = encodeURLObject(paramsObject);
     const url = `${rasterURL}/collections/${collection.id}/items/${item.id}/tiles/WebMercatorQuad/{z}/{x}/{y}?${paramsStr}`;
-    layers.push({
+    const json = {
       /** @type {"Tile"} */
       type: "Tile",
       properties: {
@@ -868,57 +1076,15 @@ export const createLayerFromRender = async (
         url,
         projection: "EPSG:3857",
       },
-    });
+    };
+    if (renders[key].tilesize) {
+      // @ts-expect-error tileGrid is added here and supported in eox-map layer definition
+      json.source.tileGrid = {
+        tileSize: [renders[key].tilesize, renders[key].tilesize],
+      };
+    }
+    layers.push(json);
   }
 
   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;
-}