@eodash/eodash 5.7.1 → 5.8.0

package/dist/types/core/client/store/stac.d.ts

@@ -19,7 +19,9 @@ export const useSTAcStore: import("pinia").StoreDefinition<"stac", Pick<{
         url: string;
         titilerVersion?: 1 | 2;
     })[]>;
-}, "stac" | "stacEndpoint" | "rasterEndpoint" | "isApi" | "selectedStac" | "selectedCompareStac" | "selectedItem" | "selectedCompareItem" | "supportedUpscalingEndpoints">, Pick<{
+    colormapRegistry: import("vue").Ref<Record<string, string[]> | null, Record<string, string[]> | null>;
+    loadColormapRegistry: (registry: string | Record<string, string[]>) => Promise<void>;
+}, "stac" | "stacEndpoint" | "rasterEndpoint" | "isApi" | "selectedStac" | "selectedCompareStac" | "selectedItem" | "selectedCompareItem" | "supportedUpscalingEndpoints" | "colormapRegistry">, Pick<{
     stacEndpoint: import("vue").Ref<string | null, string | null>;
     rasterEndpoint: import("vue").Ref<string | null, string | null>;
     isApi: import("vue").Ref<boolean, boolean>;
@@ -40,6 +42,8 @@ export const useSTAcStore: import("pinia").StoreDefinition<"stac", Pick<{
         url: string;
         titilerVersion?: 1 | 2;
     })[]>;
+    colormapRegistry: import("vue").Ref<Record<string, string[]> | null, Record<string, string[]> | null>;
+    loadColormapRegistry: (registry: string | Record<string, string[]>) => Promise<void>;
 }, never>, Pick<{
     stacEndpoint: import("vue").Ref<string | null, string | null>;
     rasterEndpoint: import("vue").Ref<string | null, string | null>;
@@ -61,4 +65,6 @@ export const useSTAcStore: import("pinia").StoreDefinition<"stac", Pick<{
         url: string;
         titilerVersion?: 1 | 2;
     })[]>;
-}, "init" | "loadSTAC" | "loadSelectedSTAC" | "loadSelectedCompareSTAC" | "resetSelectedCompareSTAC">>;
+    colormapRegistry: import("vue").Ref<Record<string, string[]> | null, Record<string, string[]> | null>;
+    loadColormapRegistry: (registry: string | Record<string, string[]>) => Promise<void>;
+}, "init" | "loadSTAC" | "loadSelectedSTAC" | "loadSelectedCompareSTAC" | "resetSelectedCompareSTAC" | "loadColormapRegistry">>;

package/dist/types/core/client/types.d.ts

@@ -259,6 +259,7 @@ export type StacEndpoint = string | {
         url: string;
         titilerVersion?: 1 | 2;
     }>;
+    colormapRegistry?: string | Record<string, string[]>;
 };
 /** @group Eodash */
 export interface EodashFont {
@@ -518,6 +519,10 @@ export interface Render {
     expression?: string;
     /** Zoom levels range applicable for the visualization */
     minmax_zoom?: number[];
+    /** Band indexes to apply the rendering to. */
+    bidx?: number[];
+    /** Tile size to request from the tile server. */
+    tilesize?: number;
 }
 /** @ignore */
 export interface TitilerSTACParameters {

package/dist/types/templates/explore.d.ts

@@ -26,6 +26,7 @@ declare const _default: {
                     enableZoom: true;
                     enableExportMap: true;
                     enableChangeProjection: true;
+                    enableMosaic: false;
                     enableCompareIndicators: {
                         fallbackTemplate: string;
                         compareTemplate: string;

package/dist/types/widgets/EodashProcess/methods/custom-endpoints/layers/eoxhub-workspaces-endpoint.d.ts

@@ -2,4 +2,4 @@
  *
  * @param {import("../../../../EodashProcess/types").CustomEnpointInput} param0
  */
-export function handleEOxHubEndpoint({ links, jsonformValue, isPolling, selectedStac, jobs, enableCompare, }: import("../../../../EodashProcess/types").CustomEnpointInput): Promise<(import("@eox/map/src/layers").EOxLayerType<"Vector", "Vector"> | import("@eox/map/src/layers").EOxLayerType<"Vector", "FlatGeoBuf"> | import("@eox/map/src/layers").EOxLayerType<"Vector", "Cluster"> | import("@eox/map/src/layers").EOxLayerType<"VectorTile", "VectorTile"> | import("@eox/map/src/layers").EOxLayerType<"WebGLTile", "GeoTIFF"> | import("@eox/map/src/layers").EOxLayerType<"WebGLTile", "GeoZarr"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "OSM"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "WMTSCapabilities"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "StadiaMaps"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "WMTS"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "XYZ"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "TileJSON"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "TileArcGISRest"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "TileDebug"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "TileImage"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "TileWMS"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "UrlTile"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "BingMaps"> | import("@eox/map/src/layers").EOxLayerType<"Image", "Image"> | import("@eox/map/src/layers").EOxLayerType<"Image", "ImageCanvas"> | import("@eox/map/src/layers").EOxLayerType<"Image", "ImageStatic"> | import("@eox/map/src/layers").EOxLayerType<"Image", "ImageWMS"> | import("@eox/map/src/layers").EOxLayerType<"Image", "Raster"> | import("@eox/map/src/layers").EOxLayerType<"Image", "IIIF"> | import("@eox/map/src/layers").EOxLayerTypeMapboxStyle | import("@eox/map/src/layers").EOxLayerTypeGroup)[] | undefined>;
+export function handleEOxHubEndpoint({ links, jsonformValue, isPolling, selectedStac, jobs, enableCompare, }: import("../../../../EodashProcess/types").CustomEnpointInput): Promise<(import("@eox/map/src/layers").EOxLayerType<"Vector", "Vector"> | import("@eox/map/src/layers").EOxLayerType<"Vector", "FlatGeoBuf"> | import("@eox/map/src/layers").EOxLayerType<"Vector", "Cluster"> | import("@eox/map/src/layers").EOxLayerType<"VectorImage", "Vector"> | import("@eox/map/src/layers").EOxLayerType<"Heatmap", "Vector"> | import("@eox/map/src/layers").EOxLayerType<"WebGLVector", "Vector"> | import("@eox/map/src/layers").EOxLayerType<"WebGLPoints", "Vector"> | import("@eox/map/src/layers").EOxLayerType<"Graticule", never> | import("@eox/map/src/layers").EOxLayerType<"VectorTile", "VectorTile"> | import("@eox/map/src/layers").EOxLayerType<"WebGLTile", "GeoTIFF"> | import("@eox/map/src/layers").EOxLayerType<"WebGLTile", "GeoZarr"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "OSM"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "WMTSCapabilities"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "StadiaMaps"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "WMTS"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "XYZ"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "TileJSON"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "TileArcGISRest"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "TileDebug"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "TileImage"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "TileWMS"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "UrlTile"> | import("@eox/map/src/layers").EOxLayerType<"Tile", "BingMaps"> | import("@eox/map/src/layers").EOxLayerType<"Image", "Image"> | import("@eox/map/src/layers").EOxLayerType<"Image", "ImageCanvas"> | import("@eox/map/src/layers").EOxLayerType<"Image", "ImageStatic"> | import("@eox/map/src/layers").EOxLayerType<"Image", "ImageWMS"> | import("@eox/map/src/layers").EOxLayerType<"Image", "Raster"> | import("@eox/map/src/layers").EOxLayerType<"Image", "IIIF"> | import("@eox/map/src/layers").EOxLayerType<"STAC", never> | import("@eox/map/src/layers").EOxLayerTypeMapboxStyle | import("@eox/map/src/layers").EOxLayerTypeGroup)[] | undefined>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.7.1",
+  "version": "5.8.0",
   "type": "module",
   "types": "./dist/types/core/client/types.d.ts",
   "files": [
@@ -76,11 +76,11 @@
     "@eox/geosearch": "^1.2.0",
     "@eox/itemfilter": "^1.17.3",
     "@eox/jsonform": "^1.12.1",
-    "@eox/layercontrol": "^1.7.0",
+    "@eox/layercontrol": "^1.8.0",
     "@eox/layout": "^1.0.0",
-    "@eox/map": "^2.6.1",
+    "@eox/map": "^2.7.0",
     "@eox/stacinfo": "^1.2.0",
-    "@eox/timecontrol": "https://pkg.pr.new/EOX-A/EOxElements/@eox/timecontrol@476eb30",
+    "@eox/timecontrol": "^2.6.0",
     "@eox/ui": "^1.1.0",
     "@mdi/js": "^7.4.47",
     "@vitejs/plugin-vue": "^6.0.7",
@@ -112,7 +112,7 @@
   "devDependencies": {
     "@babel/types": "^7.29.7",
     "@eox/eslint-config": "^2.1.0",
-    "@eox/pages-theme-eox": "^1.7.0",
+    "@eox/pages-theme-eox": "^1.9.0",
     "@pinia/testing": "^1.0.3",
     "@types/json-schema": "^7.0.15",
     "@types/mustache": "^4.2.6",

package/templates/baseConfig.js

@@ -20,7 +20,8 @@ const baseConfig = {
       { url: "openveda.cloud", titilerVersion: 1 },
       { url: "api.explorer.eopf.copernicus.eu", titilerVersion: 2 },
     ],
-    rasterEndpoint: "https://api.explorer.eopf.copernicus.eu/rstaging",
+    colormapRegistry:
+      "https://raw.githubusercontent.com/eurodatacube/eodash-assets/refs/heads/main/defaults/colormaps.json",
   },
   brand: {
     noLayout: true,

package/templates/compare.js

@@ -41,7 +41,6 @@ export default {
                 },
                 source: {
                   type: "XYZ",
-                  //@ts-expect-error todo
                   url: "https://s2maps-tiles.eu/wmts/1.0.0/terrain-light_3857/default/g/{z}/{y}/{x}.jpeg",
                 },
               },

package/templates/expert.js

@@ -40,7 +40,6 @@ export default {
                 },
                 source: {
                   type: "XYZ",
-                  //@ts-expect-error todo
                   url: "https://s2maps-tiles.eu/wmts/1.0.0/terrain-light_3857/default/g/{z}/{y}/{x}.jpeg",
                 },
               },
@@ -96,7 +95,7 @@ export default {
       id: "Layercontrol",
       type: "internal",
       title: "Layers",
-      layout: { x: 0, y: 1, w: "3/3/2", h: 11 },
+      layout: { x: 0, y: 1, w: "3/3/2", h: 10 },
       widget: {
         name: "EodashLayerControl",
         properties: {
@@ -147,7 +146,7 @@ export default {
           id: "Processes",
           type: "internal",
           title: "Processes",
-          layout: { x: "9/9/10", y: 6, w: "3/3/2", h: 5 },
+          layout: { x: "9/9/10", y: 6, w: "3/3/2", h: 6 },
           widget: {
             name: "EodashProcess",
           },

package/templates/explore.js

@@ -28,6 +28,7 @@ export default {
           enableZoom: true,
           enableExportMap: true,
           enableChangeProjection: true,
+          enableMosaic: false,
           enableCompareIndicators: {
             fallbackTemplate: "explore",
             compareTemplate: "compare",

package/templates/lite.js

@@ -33,7 +33,6 @@ export default {
             },
             source: {
               type: "XYZ",
-              //@ts-expect-error todo
               url: "https://s2maps-tiles.eu/wmts/1.0.0/terrain-light_3857/default/g/{z}/{y}/{x}.jpeg",
             },
           },

package/widgets/EodashChart.vue

@@ -1,6 +1,9 @@
 <template>
-  <div ref="container">
-    <div class="chart-frame">
+  <div ref="container" class="eodash-chart-wrapper">
+    <div
+      class="chart-frame"
+      :style="{ paddingBottom: hasBindings ? '25px' : '0px' }"
+    >
       <button
         v-if="usedChartData && usedChartSpec"
         class="chart-toggle"
@@ -12,9 +15,8 @@
         </svg>
       </button>
       <eox-chart
-        class="pa-2"
-        v-if="usedChartData && usedChartSpec"
-        .spec="toRaw(usedChartSpec)"
+        v-if="usedChartData && renderedChartSpec"
+        .spec="toRaw(renderedChartSpec)"
         :key="chartRenderKey"
         .dataValues="toRaw(usedChartData)"
         @click:item="onChartClick"
@@ -33,6 +35,8 @@ import {
   ref,
   onMounted,
   onBeforeUnmount,
+  watch,
+  nextTick,
 } from "vue";
 import { onChartClick } from "./EodashProcess/methods/handling";
 import {
@@ -67,27 +71,136 @@ const usedChartSpec = computed(() => {
   return enableCompare ? compareChartSpec.value : chartSpec.value;
 });
 
+const hasBindings = computed(() => {
+  const spec = usedChartSpec.value;
+  if (!spec) return false;
+
+  // Recursively search for any object with a 'bind' key that represents a physical UI input
+  let found = false;
+  /** @param {any} obj */
+  const searchBindings = (obj) => {
+    if (found || !obj || typeof obj !== "object") return;
+
+    // UI bindings that take up physical DOM space are objects with an 'input' property.
+    if (
+      "bind" in obj &&
+      typeof obj.bind === "object" &&
+      obj.bind !== null &&
+      "input" in obj.bind
+    ) {
+      found = true;
+      return;
+    }
+    Object.values(obj).forEach(searchBindings);
+  };
+  searchBindings(spec);
+  return found;
+});
+
+const renderedChartSpec = ref(null);
+
+watch(
+  usedChartSpec,
+  (newSpec) => {
+    if (!newSpec) {
+      renderedChartSpec.value = null;
+      return;
+    }
+
+    // Create a deep copy so we can safely mutate it
+    const adjustedSpec = JSON.parse(JSON.stringify(newSpec));
+
+    // Force the chart to be fully responsive to its CSS container
+    adjustedSpec.height = "container";
+    adjustedSpec.width = "container";
+
+    // Delay passing the spec to eox-chart until the next DOM update cycle.
+    // This ensures the dynamic chartStyles are physically applied
+    // to the container BEFORE Vega calculates its canvas size.
+    nextTick(() => {
+      renderedChartSpec.value = adjustedSpec;
+      chartRenderKey.value = Math.random(); // Force eox-chart to completely remount
+
+      // Force a browser-level resize event after the chart mounts.
+      // This tells Vega to re-read the container dimensions once the CSS has finished painting.
+      setTimeout(() => {
+        window.dispatchEvent(new Event("resize"));
+      }, 150);
+    });
+  },
+  { immediate: true },
+);
+
 const chartRenderKey = ref(0);
-const frameHeight = ref(225);
 const containerEl = useTemplateRef("container");
 
-/**
-@type { MutationObserver | null}
-*/
+/** @type {MutationObserver | null} */
 let observer = null;
+/** @type {number | null} */
+let styleInterval = null;
 
 onMounted(() => {
   const el = containerEl.value;
   if (!el) return;
 
-  const parent = el.parentElement?.parentElement;
-  if (parent) {
-    const parentHeight = parent.getBoundingClientRect().height;
-    frameHeight.value = Math.max(225, Math.floor(parentHeight));
-  }
+  // Continuously inject basic styling for the bindings form to make it look decent
+  styleInterval = window.setInterval(() => {
+    if (el) {
+      const eoxChart = el.querySelector("eox-chart");
+      if (eoxChart && eoxChart.shadowRoot) {
+        if (!eoxChart.shadowRoot.querySelector("#eodash-chart-styles")) {
+          const style = document.createElement("style");
+          style.id = "eodash-chart-styles";
+          style.innerHTML = `
+            * {
+              box-sizing: border-box !important;
+            }
+            #vis {
+              min-height: 100px !important;
+              flex: 1 1 auto !important;
+            }
+            :host, .vega-embed {
+              display: flex !important;
+              flex-direction: column !important;
+              height: 100% !important;
+              padding: 0 !important;
+              margin: 0 !important;
+            }
+            .vega-bindings {
+              flex: 0 0 auto !important;
+              display: flex !important;
+              flex-wrap: wrap;
+              gap: 2px !important;
+              background: rgba(255, 255, 255, 0.85);
+              padding: 6px 12px !important;
+              border-radius: 6px;
+              box-shadow: 0 2px 5px rgba(0,0,0,0.15);
+              margin: 0 !important;
+              margin-top: -10px !important;
+              z-index: 10;
+            }
+            .vega-bindings:empty {
+              display: none !important;
+            }
+            .vega-embed > canvas, .vega-embed > svg {
+              height: 100% !important;
+              max-width: 100% !important;
+              object-fit: contain;
+            }
+            .vega-bind {
+              display: flex;
+              align-items: center;
+              gap: 6px;
+              margin-bottom: 0 !important;
+            }
+          `;
+          eoxChart.shadowRoot.appendChild(style);
+        }
+      }
+    }
+  }, 200);
 
-  // for mobile view, the overlay panel containing chart is initially hidden
-  // we create an observer when display of overlay is not none anymore
+  // For mobile view, handle overlay display changes
   const overlay = getOverlayParent(el);
   if (!overlay) return;
 
@@ -95,7 +208,6 @@ onMounted(() => {
     const style = getComputedStyle(overlay);
     const visible = style.display !== "none";
     if (visible) {
-      // forcibly rerender chart, otherwise size of canvas is 0
       chartRenderKey.value = Math.random();
     }
   });
@@ -108,13 +220,14 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   observer?.disconnect();
+  if (styleInterval) window.clearInterval(styleInterval);
 });
 
 const chartStyles = computed(() => {
-  const styles = {
-    height: `${frameHeight.value}px`,
+  return {
+    height: "100%",
+    width: "100%",
   };
-  return styles;
 });
 
 const toggleIcon = computed(() =>
@@ -125,14 +238,41 @@ function toggleLayout() {
   areChartsSeparateLayout.value = !areChartsSeparateLayout.value;
 }
 </script>
+
+<style>
+/* Force the outer dashboard panel wrapping this component to utilize 100% height in fullscreen mode */
+.bg-surface:has(.eodash-chart-wrapper) {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>
+
 <style scoped>
+.eodash-chart-wrapper {
+  height: 100%; /* Force full height in fullscreen layout */
+  flex-grow: 1;
+  min-height: 180px; /* Prevent chart from becoming unusably small */
+  display: flex;
+  flex-direction: column;
+}
+
 .chart-frame {
   position: relative;
+  flex-grow: 1;
+  min-height: 180px; /* Prevent chart from becoming unusably small */
+  display: flex;
+  flex-direction: column;
+}
+
+eox-chart {
+  flex-grow: 1;
+  min-height: 0;
 }
 
 .chart-toggle {
   position: absolute;
-  top: 18px;
+  top: 8px;
   right: 46px;
   z-index: 2;
   cursor: pointer;

package/widgets/EodashItemCatalog/methods/map.js

@@ -46,7 +46,6 @@ export function renderItemsFeatures(
     },
     source: {
       type: "Vector",
-      //@ts-expect-error todo
       url:
         "data:application/geo+json," +
         encodeURIComponent(

package/widgets/EodashLayerControl.vue

@@ -5,6 +5,7 @@
       :key="mapElement"
       v-bind="config"
       :for="mapElement"
+      .colormapRegistry="colormapRegistry"
       .showLayerZoomState="true"
       .customEditorInterfaces="bandsEditorInterface"
       @datetime:updated="debouncedHandleDateTime"
@@ -29,16 +30,19 @@
 <script setup>
 import "color-legend-element";
 import "@eox/timecontrol";
-import { computed, ref, watch } from "vue";
+import { computed, ref } from "vue";
 import { mapEl, mapCompareEl } from "@/store/states";
-import { getColFromLayer } from "@/eodashSTAC/helpers";
 import {
   eodashCollections,
   eodashCompareCollections,
   layerControlFormValue,
   layerControlFormValueCompare,
 } from "@/utils/states";
-import { updateGeoZarrBands } from "@/eodashSTAC/helpers";
+import {
+  getColFromLayer,
+  updateGeoZarrBands,
+  updateLayerUrl,
+} from "@/eodashSTAC/helpers";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
 import { bandsEditorInterface } from "@/utils/bands-editor";
@@ -99,7 +103,8 @@ const enableLayoutSwitcher = computed(
   () => !!props.layoutTarget && !!props.layoutIcon,
 );
 
-const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
+const { selectedCompareStac, selectedStac, colormapRegistry } =
+  storeToRefs(useSTAcStore());
 
 const showControls = computed(() => {
   if (props.map === "second") {
@@ -115,20 +120,9 @@ const mapElement = props.map === "second" ? mapCompareEl : mapEl;
 /** @type { import("vue").Ref<import("@eox/layercontrol").EOxLayerControl | null>} */
 const eoxLayercontrol = ref(null);
 
-// eox-timecontrol re-fires datetime:updated after layer reassignment;
-// dedupe by (collectionId, datetime)
-const processedDatetimes = new Map();
-watch([selectedStac, selectedCompareStac], () => processedDatetimes.clear());
-
 /** @param {CustomEvent<{layer:import('ol/layer').Layer; datetime:string;}>} evt */
 const handleDatetimeUpdate = async (evt) => {
   const { layer, datetime } = evt.detail;
-  const collectionId = layer.get("id")?.split(";:;")[0] ?? layer.get("id");
-  if (processedDatetimes.get(collectionId) === datetime) return;
-  // First event per collection is eox-timecontrol's mount echo.
-  const isFirstEvent = !processedDatetimes.has(collectionId);
-  processedDatetimes.set(collectionId, datetime);
-  if (isFirstEvent) return;
 
   const ec = await getColFromLayer(eodashCols, layer);
 
@@ -185,6 +179,7 @@ const debouncedHandleDateTime = (evt) => {
  */
 const onLayerConfigChange = (evt) => {
   updateGeoZarrBands(evt.detail.layer, evt.detail.jsonformValue);
+  updateLayerUrl(evt.detail.layer, evt.detail.jsonformValue);
 
   if (props.map === "second") {
     layerControlFormValueCompare.value = evt.detail.jsonformValue;

package/widgets/EodashMap/index.vue

@@ -271,7 +271,9 @@ const controls = computed(() => {
     controlsObj.MousePosition = {
       projection: "EPSG:4326",
       coordinateFormat: (c) => {
-        return `${c?.[1].toFixed(3)} °N, ${c?.[0].toFixed(3)} °E`;
+        if (!c) return "";
+        const [lon, lat] = c;
+        return `${Math.abs(lat).toFixed(3)} °${lat >= 0 ? "N" : "S"}, ${Math.abs(lon).toFixed(3)} °${lon >= 0 ? "E" : "W"}`;
       },
       target: cursorCoordsRef.value,
     };

package/widgets/EodashMap/methods/btns.js

@@ -76,37 +76,38 @@ function showAllPanels() {
 }
 /**
  *
- * @param {import("@eox/map").EoxLayer[]} layers
- * @return {import("@eox/map").EoxLayer[]}
+ * @param {import("@eox/map").EoxLayer[]} layers - eox map layers
+ * @returns {import("@eox/map").EoxLayer[]} anonymized Cors
  */
 function addCorsAnonym(layers) {
-  //@ts-expect-error todo
-  return layers.map((layer) => {
-    if (layer.type === "Group") {
-      layer.layers = addCorsAnonym([...(layer.layers ?? [])]);
-      return layer;
-    }
-    // check if not mapbox style as a fix for ts error
-    if (layer.type === "MapboxStyle") {
-      return layer;
-    }
+  return /** @type {import("@eox/map").EoxLayer[]} */ (
+    layers.map((layer) => {
+      if (layer.type === "Group") {
+        layer.layers = addCorsAnonym([...(layer.layers ?? [])]);
+        return layer;
+      }
+      // check if not mapbox style as a fix for ts error
+      if (layer.type === "MapboxStyle") {
+        return layer;
+      }
 
-    return {
-      ...layer,
-      ...(layer.source && {
-        source: {
-          ...layer.source,
-          crossOrigin: "anonymous",
-        },
-        ...(layer.sources && {
-          sources: layer.sources.map((source) => ({
-            ...source,
+      return {
+        ...layer,
+        ...("source" in layer && {
+          source: {
+            ...layer.source,
             crossOrigin: "anonymous",
-          })),
+          },
+          ...(layer.sources && {
+            sources: layer.sources.map((source) => ({
+              ...source,
+              crossOrigin: "anonymous",
+            })),
+          }),
         }),
-      }),
-    };
-  });
+      };
+    })
+  );
 }
 
 export const onMapZoomOut = () => {

package/widgets/EodashMap/methods/use-map-loading.js

@@ -10,11 +10,15 @@ import { loading } from "@/store/states";
  * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} compareMapElement
  */
 export const useMapLoading = (mapElement, compareMapElement) => {
+  // This instance's outstanding loads, so unmount subtracts only its share.
+  let localLoads = 0;
   const startHandler = () => {
+    localLoads++;
     loading.activeLoads++;
   };
   const endHandler = () => {
-    loading.activeLoads--;
+    localLoads = Math.max(0, localLoads - 1);
+    loading.activeLoads = Math.max(0, loading.activeLoads - 1);
   };
 
   /** @param {import("@eox/map").EOxMap | null} newMapEl */
@@ -45,8 +49,10 @@ export const useMapLoading = (mapElement, compareMapElement) => {
   onUnmounted(() => {
     mapElement.value?.map.removeEventListener("loadstart", startHandler);
     mapElement.value?.map.removeEventListener("loadend", endHandler);
+    compareMapElement.value?.map.removeEventListener("loadstart", startHandler);
+    compareMapElement.value?.map.removeEventListener("loadend", endHandler);
     stopMainWatcher();
     stopCompareWatcher();
-    loading.activeLoads = 0;
+    loading.activeLoads = Math.max(0, loading.activeLoads - localLoads);
   });
 };