@eodash/eodash 5.6.1 → 5.7.1

package/dist/client/{index-4TrjfJ32.js → index-DhKU6KqM.js}

@@ -1,188 +1,63 @@
-import { onMounted, onUnmounted, watch, computed, withAsyncContext, useTemplateRef, ref, toRaw, openBlock, createElementBlock, createElementVNode, unref, normalizeStyle, createCommentVNode, createVNode } from 'vue';
+import { watch, onUnmounted, onMounted, computed, withAsyncContext, useTemplateRef, ref, toRaw, nextTick, openBlock, createElementBlock, createElementVNode, unref, normalizeStyle, createCommentVNode, createVNode } from 'vue';
 import { transformExtent } from '@eox/map';
 import '@eox/map/src/plugins/advancedLayersAndSources';
-import { U as setMapProjFromCol, E as mapPosition, R as sanitizeBbox, i as mapEl, S as mapCompareEl, F as indicator, I as compareIndicator, C as poi, V as isGlobe, B as datetime } from './helpers-DAVGYl_f.js';
+import { Y as loading, a6 as isGlobe, a7 as setMapProjFromCol, L as isFirstLoad, K as mapPosition, $ as sanitizeBbox, n as mapEl, a1 as mapCompareEl, a0 as tooltipAdapter, M as indicator, Q as compareIndicator, I as poi, a4 as layerControlFormValue, a3 as layerControlFormValueCompare, H as datetime, P as eodashCompareCollections, S as eodashCollections } from './helpers-CBqIUSXJ.js';
 import { storeToRefs } from 'pinia';
-import { R as EodashCollection, H as useSTAcStore, S as useEmitLayersUpdate, T as isFirstLoad, N as useOnLayersUpdate, _ as _export_sfc, G as useDisplay, a as useLayout, Q as layerControlFormValue, P as layerControlFormValueCompare, M as eodashCompareCollections, L as eodashCollections } from './asWebComponent-DfULAbpq.js';
+import { H as useSTAcStore, aa as useEmitLayersUpdate, L as useOnLayersUpdate, _ as _export_sfc, G as useDisplay, a as useLayout } from './asWebComponent-BlFN2lkB.js';
+import { c as createLayersConfig } from './create-layers-config-u_vn5hPk.js';
 import log from 'loglevel';
 import { i as inAndOut } from './easing-CH0-9wR8.js';
 import mustache from 'mustache';
-import EodashMapBtns from './EodashMapBtns-BHrSDNoC.js';
+import EodashMapBtns from './EodashMapBtns-C7Cr7q5Y.js';
 
 /**
- * Creates full layer configuration from indicator and time information
- * @param {import("stac-ts").StacCatalog
- *   | import("stac-ts").StacCollection
- *   | import("stac-ts").StacItem
- *   | null
- * } selectedIndicator
- * @param {EodashCollection[]} eodashCols
- * @param {string | import("stac-ts").StacItem | null} [timeOrItem] - time as a string, or a stac item
+ * Tracks map loading state at the source level via `loading.activeLoads`,
+ * the same counter used by the axios plugin. Re-attaches source listeners
+ * whenever eox-map fires `layerschanged`, using `getFlatLayersArray`.
+ *
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} mapElement
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} compareMapElement
  */
-
-const createLayersConfig = async (
-  selectedIndicator,
-  eodashCols,
-  timeOrItem,
-) => {
-  log.debug(
-    "Creating layers config",
-    selectedIndicator,
-    eodashCols,
-    timeOrItem,
-  );
-  const layersCollection = [];
-  const dataLayers = {
-    type: "Group",
-    properties: {
-      id: "AnalysisGroup",
-      title: "Data Layers",
-      layerControlExpand: true,
-    },
-    layers: /** @type {Record<string,any>[]}*/ ([]),
+const useMapLoading = (mapElement, compareMapElement) => {
+  const startHandler = () => {
+    loading.activeLoads++;
   };
-
-  for (const ec of eodashCols) {
-    /** @type {Record<string,any>[]} */
-    let layers;
-    if (timeOrItem) {
-      const dateOrItem =
-        typeof timeOrItem === "string" ? new Date(timeOrItem) : timeOrItem;
-      layers = await ec.createLayersJson(dateOrItem);
-    } else {
-      layers = await ec.createLayersJson(undefined);
-    }
-    // Add expand to all analysis layers
-    layers.forEach((dl) => {
-      dl.properties.layerControlExpand = true;
-      dl.properties.layerControlToolsExpand = true;
-    });
-    dataLayers.layers.push(...layers);
-  }
-
-  /* check for roles in indicator links to assign visibility property for the data layers */
-  if (selectedIndicator?.links) {
-    const visibilityLinks = selectedIndicator.links.filter(
-      (link) =>
-        Array.isArray(link.roles) &&
-        (link.roles.includes("disable") || link.roles.includes("hidden")),
-    );
-    if (visibilityLinks.length > 0) {
-      visibilityLinks.forEach((vl) => {
-        const targetLayerId = vl.id;
-        const targetLayer = dataLayers.layers.find(
-          (dl) => dl.properties.id.split(";:;")[0] === targetLayerId,
-        );
-        if (targetLayer) {
-          if (Array.isArray(vl.roles) && vl.roles.includes("disable")) {
-            targetLayer.properties.visible = false;
-          } else if (Array.isArray(vl.roles) && vl.roles.includes("hidden")) {
-            targetLayer.properties.layerControlHide = true;
-          }
-        }
-      });
-    }
-  }
-  layersCollection.push(dataLayers);
-  const indicatorLayers =
-    //@ts-expect-error indicator is collection
-    await EodashCollection.getIndicatorLayers(selectedIndicator);
-  const observationPointsLayer =
-    EodashCollection.getObservationPointsLayer(eodashCols);
-  if (observationPointsLayer) {
-    dataLayers.layers.push(observationPointsLayer);
-  }
-  const baseLayers = {
-    type: "Group",
-    properties: {
-      id: "BaseLayersGroup",
-      title: "Base Layers",
-    },
-    layers: /** @type {Record<string,any>[]}*/ ([]),
+  const endHandler = () => {
+    loading.activeLoads--;
   };
 
-  const indicatorBaseLayers = indicatorLayers.filter(
-    (l) => l.properties.group === "baselayer",
-  );
+  /** @param {import("@eox/map").EOxMap | null} newMapEl */
+  const watcherHandler = (newMapEl) => {
+    if (!newMapEl) return;
 
-  if (indicatorBaseLayers.length) {
-    // Only one baselayer can be set to visible, let's first set all to
-    // false that have not a dedicated property visible, then check
-    // if there are more then one visible and only allow one
-    let counter = 0;
-    let lastPos = 0;
-    for (let indx = 0; indx < indicatorBaseLayers.length; indx++) {
-      const bl = indicatorBaseLayers[indx];
-      if (!("visible" in bl.properties)) {
-        bl.properties.visible = false;
-      }
+    const hasStartListener = newMapEl.map
+      .getListeners("loadstart")
+      ?.some((listner) => listner === startHandler);
+    const hasEndListener = newMapEl.map
+      .getListeners("loadend")
+      ?.some((listner) => listner === endHandler);
 
-      if (bl.properties.visible) {
-        counter++;
-        lastPos = indx;
-      }
+    if (!hasStartListener) {
+      newMapEl.map.addEventListener("loadstart", startHandler);
     }
-
-    // if none visible set the last one as visible
-    if (counter === 0) {
-      indicatorBaseLayers[0].properties.visible = true;
-    }
-
-    // disable all apart from last
-    if (counter > 0) {
-      indicatorBaseLayers.forEach((bl, indx) => {
-        if (indx !== lastPos) {
-          bl.properties.visible = false;
-        } else {
-          bl.properties.visible = true;
-        }
-      });
+    if (!hasEndListener) {
+      newMapEl.map.addEventListener("loadend", endHandler);
     }
-
-    baseLayers.layers.push(...indicatorBaseLayers);
-
-    // Add exclusive to baselayers and make sure only one is selected
-    baseLayers.layers.forEach((bl) => {
-      bl.properties.layerControlExclusive = true;
-    });
-  } else {
-    // Default to some baselayer
-    baseLayers.layers.push({
-      type: "Tile",
-      properties: {
-        id: "osm",
-        title: "Background",
-        layerControlExclusive: true,
-      },
-      source: {
-        type: "OSM",
-      },
-    });
-  }
-
-  if (baseLayers.layers.length) {
-    layersCollection.unshift(baseLayers);
-  }
-
-  const overlayLayers = {
-    type: "Group",
-    properties: {
-      id: "OverlayGroup",
-      title: "Overlay Layers",
-    },
-    layers: /** @type {Record<string,any>[]}*/ ([]),
   };
+  const stopMainWatcher = watch(mapElement, watcherHandler, {
+    immediate: true,
+  });
+  const stopCompareWatcher = watch(compareMapElement, watcherHandler, {
+    immediate: true,
+  });
 
-  const indicatorOverlays = indicatorLayers.filter(
-    (l) => l.properties.group === "overlay",
-  );
-
-  if (indicatorOverlays.length) {
-    overlayLayers.layers.push(...indicatorOverlays);
-    layersCollection.push(overlayLayers);
-  }
-
-  return layersCollection;
+  onUnmounted(() => {
+    mapElement.value?.map.removeEventListener("loadstart", startHandler);
+    mapElement.value?.map.removeEventListener("loadend", endHandler);
+    stopMainWatcher();
+    stopCompareWatcher();
+    loading.activeLoads = 0;
+  });
 };
 
 /**
@@ -215,14 +90,52 @@ const useHandleMapMoveEnd = (mapElement, mapPosition) => {
     }
   };
 
+  const handleGlobeMoveEnd = () => {
+    const camera = mapElement.value?.globe?.planet?.camera;
+    const lonLat = camera?.getLonLat();
+    if (!lonLat) return;
+    const { lon, lat, height } = lonLat;
+    if (![lon, lat, height].some(Number.isNaN)) {
+      mapPosition.value = [lon, lat, height];
+    }
+  };
+
+  /** @type {{ events: { off: Function } } | null} */
+  let subscribedCamera = null;
+
+  const subscribeGlobe = (retries = 3) => {
+    if (!isGlobe.value) return; // toggled back out during retry
+    const camera = mapElement.value?.globe?.planet?.camera;
+    if (camera) {
+      if (subscribedCamera === camera) return;
+      camera.events.on("moveend", handleGlobeMoveEnd);
+      subscribedCamera = camera;
+      handleGlobeMoveEnd();
+      return;
+    }
+    if (retries > 0) setTimeout(() => subscribeGlobe(retries - 1), 50);
+  };
+  const unsubscribeGlobe = () => {
+    subscribedCamera?.events.off("moveend", handleGlobeMoveEnd);
+    subscribedCamera = null;
+  };
+
+  const stopGlobeWatch = watch(isGlobe, (globe) =>
+    globe ? subscribeGlobe() : unsubscribeGlobe(),
+  );
+
   onMounted(() => {
-    /** @type {import('ol/Map').default} */
-    (mapElement.value?.map)?.on("moveend", handleMoveEnd);
+    const map = mapElement.value?.map;
+    map?.on("moveend", handleMoveEnd);
+    // Seed mapPosition from the initial view
+    handleMoveEnd(/** @type {any} */ ({ map }));
   });
 
   onUnmounted(() => {
     /** @type {import('ol/Map').default} */
     (mapElement.value?.map)?.un("moveend", handleMoveEnd);
+    unsubscribeGlobe();
+    stopGlobeWatch();
   });
 };
 
@@ -237,6 +150,7 @@ const useHandleMapMoveEnd = (mapElement, mapPosition) => {
  * @param {import("vue").Ref<import("@eox/map").EOxMap| null>} partnerMap
  * @param {boolean} zoomToExtent
  * @param {import("vue").Ref<import("stac-ts").StacItem | import("stac-ts").StacLink | null>} [selectedItem]
+ * @param {Record<string, any>[]} [defaultBaseLayers]
  */
 const useInitMap = (
   mapElement,
@@ -247,6 +161,7 @@ const useInitMap = (
   partnerMap,
   zoomToExtent,
   selectedItem,
+  defaultBaseLayers,
 ) => {
   log.debug(
     "InitMap",
@@ -259,6 +174,10 @@ const useInitMap = (
   const watching = selectedItem
     ? [selectedIndicator, datetime, selectedItem]
     : [selectedIndicator, datetime];
+  // Tags datetime values we set ourselves so the watcher skips its own echo.
+  /** @type {string | null} */
+  let internalDatetime = null;
+
   const stopIndicatorWatcher = watch(
     watching,
     async (updated, previous) => {
@@ -272,6 +191,28 @@ const useInitMap = (
         );
 
       if (updatedStac) {
+        const isSameStac = updatedStac?.id === previousStac?.id;
+        const isSameItem = updatedItem?.id === previousItem?.id;
+
+        // Item deselect: overview render is owned by the item catalog widget.
+        const isItemDeselect =
+          previousItem &&
+          !updatedItem &&
+          isSameStac &&
+          updatedTime === previousTime;
+        if (isItemDeselect) return;
+
+        // Re-fire from our own datetime.value write, skip and clear
+        const isOwnDatetimeUpdate =
+          internalDatetime !== null &&
+          updatedTime === internalDatetime &&
+          isSameStac &&
+          isSameItem;
+        if (isOwnDatetimeUpdate) {
+          internalDatetime = null;
+          return;
+        }
+
         log.debug(
           "Selected Indicator watch triggered",
           updatedStac,
@@ -315,13 +256,14 @@ const useInitMap = (
             updatedStac,
             eodashCols,
             updatedItem ?? updatedTime,
+            defaultBaseLayers,
           );
+
           log.debug(
             "Assigned layers after changing time only",
             JSON.parse(JSON.stringify(layersCollection)),
           );
           mapLayers.value = layersCollection;
-
           useEmitLayersUpdate(
             mapElement.value?.id === "compare"
               ? "compareTime:updated"
@@ -338,27 +280,38 @@ const useInitMap = (
         if (interval && interval.length > 0 && interval[0].length > 1) {
           // @ts-expect-error this is the defined STAC structure
           endInterval = new Date(interval[0][1]);
+          // If end interval is in the future, set to now,
+          // for item fetching based on search endpoint
+          if (endInterval.getTime() > Date.now()) {
+            endInterval = new Date();
+          }
           log.debug(
             "Indicator load: found stac extent, setting time to latest value",
             endInterval,
           );
         }
+        let resolvedTime = updatedItem ?? updatedTime;
         if (
           !updatedItem &&
           endInterval !== null &&
           endInterval.toISOString() !== datetime.value &&
           !isFirstLoad.value
         ) {
-          datetime.value = endInterval.toISOString();
+          resolvedTime = endInterval.toISOString();
+          internalDatetime = resolvedTime;
+          datetime.value = resolvedTime;
         } else if (isFirstLoad.value && !datetime.value && endInterval) {
-          datetime.value = endInterval.toISOString();
+          resolvedTime = endInterval.toISOString();
+          internalDatetime = resolvedTime;
+          datetime.value = resolvedTime;
         }
 
         /** @type {Record<string,any>[]} */
         layersCollection = await createLayersConfig(
           updatedStac,
           eodashCols,
-          updatedItem ?? updatedTime,
+          updatedItem ?? resolvedTime,
+          defaultBaseLayers,
         );
 
         if (zoomToExtent) {
@@ -427,7 +380,7 @@ const useUpdateTooltipProperties = (
    * @param {string} evt */
   const listenTo = (evt) =>
     enableCompare ? evt.includes("compare") : !evt.includes("compare");
-  useOnLayersUpdate(async (evt, _payload) => {
+  useOnLayersUpdate(async (evt) => {
     if (!listenTo(evt)) {
       return;
     }
@@ -441,10 +394,10 @@ const useUpdateTooltipProperties = (
   });
 };
 
-const _style_0 = "#cursor-coordinates[data-v-df7611e7]{position:fixed;left:24px;bottom:54px;color:#000000e6;font-size:10px;font-family:var(--eox-body-font-family);background:#fffe;border-radius:4px;border:none;padding:0 3px;max-height:24px}@media(max-width:959px){#cursor-coordinates[data-v-df7611e7]{display:none}}#scale-line[data-v-df7611e7]{position:fixed;left:24px;bottom:28px;color:#fff}@media(max-width:959px){#scale-line[data-v-df7611e7]{bottom:102px}}[data-v-df7611e7] .ol-scale-line{background:#fffe!important;border-radius:4px!important;border:none!important;padding:0 3px 3px!important;font-size:10px!important;font-family:var(--eox-body-font-family);max-height:20px}[data-v-df7611e7] .ol-scale-line-inner{display:flex;justify-content:center;border:1px solid rgba(0,0,0,.5)!important;border-top:none!important;color:#333!important;font-weight:500!important;transform:translateY(1px)}.map-buttons-container[data-v-df7611e7]{position:fixed;left:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr);pointer-events:none;z-index:1}.map-buttons-container[data-v-df7611e7]>*{pointer-events:auto}";
+const _style_0 = ".map-buttons-container[data-v-6d08ac44]{position:fixed;left:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr);pointer-events:none;z-index:1}.map-buttons-container[data-v-6d08ac44]>*{pointer-events:auto}";
 
 const _hoisted_1 = [".enabled"];
-const _hoisted_2 = [".center", ".zoom", ".layers", ".controls"];
+const _hoisted_2 = [".animationOptions", ".center", ".zoom", ".layers", ".controls"];
 const _hoisted_3 = [".propertyTransform"];
 const _hoisted_4 = [".layers"];
 const _hoisted_5 = [".propertyTransform"];
@@ -463,42 +416,73 @@ const _hoisted_7 = {
 const _sfc_main = {
   __name: 'index',
   props: {
+  baseLayers: {
+    /** @type {import("vue").PropType<import("@eox/map").EoxLayer[]>} */
+    type: Array,
+    default: () => [
+      {
+        type: "Tile",
+        source: { type: "OSM" },
+        properties: {
+          id: "osm",
+          title: "Background",
+          layerControlExclusive: true,
+        },
+      },
+    ],
+  },
   enableCompare: {
     type: Boolean,
     default: false,
   },
-  /** @type {import("vue").PropType<[number,number]>} */
+  /**
+   * Initial map center as [lon, lat]; falls back to the last stored map position.
+   * @default [15, 48]
+   */
   center: {
-    //@ts-expect-error todo
-    type: Array,
+    type: /** @type {import("vue").PropType<[number, number]>} */ (
+      /** @type {unknown} */ (Array)
+    ),
     default: () => [mapPosition.value?.[0] ?? 15, mapPosition.value?.[1] ?? 48],
   },
+  /**
+   * Initial zoom level; falls back to the last stored map position.
+   * @default 4
+   */
   zoom: {
     type: Number,
     default: mapPosition.value?.[2] ?? 4,
   },
+  /** Fly to the selected collection's spatial extent on selection. */
   zoomToExtent: {
     type: Boolean,
     default: true,
   },
+  /** Show live cursor coordinates as a fixed overlay at the bottom-left of the map. */
   enableCursorCoordinates: {
     type: Boolean,
     default: true,
   },
+  /** Show an OpenLayers scale-line control at the bottom-left of the map. */
   enableScaleLine: {
     type: Boolean,
     default: true,
   },
+  /** Grid position of the floating button toolbar. `x` accepts responsive `"mobile/tablet/desktop"` column notation. */
   btnsPosition: {
-    type: Object,
+    type: /** @type {import("vue").PropType<{ x: string | number; y: number; gap: number }>} */ (
+      Object
+    ),
     default: () => ({
       x: "12/9/10",
       y: 1,
       gap: 16,
     }),
   },
+  /** Toolbar feature flags; set any flag to `false` to hide the corresponding button. */
   btns: {
-    /** @type {import("vue").PropType<{
+    type: /**
+     * @type {import("vue").PropType<{
      * enableExportMap?: boolean;
      * enableChangeProjection?: boolean;
      * enableBackToPOIs?: boolean;
@@ -506,13 +490,14 @@ const _sfc_main = {
      * searchParams?: object;
      * enableZoom?: boolean;
      * enableGlobe?: boolean;
+     * enableMosaic?: boolean;
+     * enableFeedback?: boolean;
      * enableCompareIndicators?: boolean | {
      *   compareTemplate?:string;
      *   fallbackTemplate?:string;
      *   itemFilterConfig?:InstanceType<import("../EodashItemFilter.vue").default>["$props"]
      * };
-     * }> }*/
-    type: Object,
+     * }> } */ (Object),
     default: () => ({
       enableExportMap: true,
       enableChangeProjection: true,
@@ -521,6 +506,8 @@ const _sfc_main = {
       enableSearch: true,
       enableZoom: true,
       enableGlobe: true,
+      enableMosaic: true,
+      enableFeedback: true,
       searchParams: {},
     }),
   },
@@ -569,6 +556,8 @@ const btnsProps = computed(() => ({
   enableSearch: props.btns.enableSearch ?? true,
   enableZoom: props.btns.enableZoom ?? true,
   enableGlobe: props.btns.enableGlobe ?? true,
+  enableMosaic: props.btns.enableMosaic ?? true,
+  enableFeedback: props.btns.enableFeedback ?? true,
   searchParams: props.btns.searchParams,
 }));
 
@@ -587,22 +576,13 @@ const cursorCoordsRef = useTemplateRef("cursor-coords");
 const tooltipProperties = ref([]);
 /** @type {import("vue").Ref<Exclude<import("@/types").EodashStyleJson["tooltip"], undefined>>} */
 const compareTooltipProperties = ref([]);
-/** @type {import("vue").ComputedRef<{
-  Attribution: { collapsible: boolean };
-  ScaleLine?: { target: HTMLElement };
-  MousePosition?: { projection: string; coordinateFormat: (c: [number, number]) => string; target: HTMLElement };
-}>} */
+
 const controls = computed(() => {
-  /** @type {{
-    Attribution: { collapsible: boolean };
-    ScaleLine?: { target: HTMLElement };
-    MousePosition?: { projection: string; coordinateFormat: (c: [number, number]) => string; target: HTMLElement };
-  }} */
-  const controlsObj = {
+  const controlsObj = /** @type {import("@eox/map").ControlDictionary} */ ({
     Attribution: {
       collapsible: true,
     },
-  };
+  });
 
   if (props.enableScaleLine && scaleLineRef.value) {
     controlsObj.ScaleLine = {
@@ -613,8 +593,8 @@ const controls = computed(() => {
   if (props.enableCursorCoordinates && cursorCoordsRef.value) {
     controlsObj.MousePosition = {
       projection: "EPSG:4326",
-      coordinateFormat: (/** @type {[number, number]} */ c) => {
-        return `${c[1].toFixed(3)} °N, ${c[0].toFixed(3)} °E`;
+      coordinateFormat: (c) => {
+        return `${c?.[1].toFixed(3)} °N, ${c?.[0].toFixed(3)} °E`;
       },
       target: cursorCoordsRef.value,
     };
@@ -626,38 +606,28 @@ const controls = computed(() => {
 const initialCenter = toRaw(props.center);
 const initialZoom = toRaw(mapPosition.value?.[2] ?? props.zoom);
 /** @type {import("vue").Ref<Record<string,any>[]>} */
-const eoxMapLayers = ref([
-  {
-    type: "Tile",
-    source: { type: "OSM" },
-    properties: {
-      id: "osm",
-      title: "Background",
-    },
-  },
-]);
+const eoxMapLayers = ref(
+  /** @type {Record<string,any>[]} */ (
+    structuredClone(toRaw(props.baseLayers))
+  ),
+);
 
-/** @type {import("vue").Ref<Record<string,any>[]>} */
-const eoxMapCompareLayers = ref([
-  {
-    type: "Tile",
-    source: { type: "OSM" },
-    properties: {
-      id: "osm",
-      title: "Background",
-    },
-  },
-]);
+const eoxMapCompareLayers = ref(
+  /** @type {Record<string,any>[]} */ (
+    structuredClone(toRaw(props.baseLayers))
+  ),
+);
 
-const animationOptions = {
-  duration: 1200,
+const animationOptions = ref({
+  duration: 0, // Initially set to 0 for an instant "jump"
   easing: inAndOut,
-};
+});
 
 /** @type {import("vue").Ref<import("@eox/map").EOxMap | null>} */
-const eoxMap = ref(null);
+const eoxMap = useTemplateRef("eoxMap");
 /** @type {import("vue").Ref<import("@eox/map").EOxMap | null>} */
-const compareMap = ref(null);
+const compareMap = useTemplateRef("compareMap");
+
 const { selectedCompareStac } = storeToRefs(useSTAcStore());
 const showCompare = computed(() =>
   props.enableCompare && !!selectedCompareStac.value ? "" : "first",
@@ -666,10 +636,20 @@ const showCompare = computed(() =>
 useHandleMapMoveEnd(eoxMap, mapPosition);
 
 onMounted(() => {
-  const { selectedCompareStac, selectedStac, selectedItem } =
-    storeToRefs(useSTAcStore());
+  const {
+    selectedCompareStac,
+    selectedStac,
+    selectedItem,
+    selectedCompareItem,
+  } = storeToRefs(useSTAcStore());
+  if (!eoxMap.value) {
+    console.error("EOxMap reference is not available on mounted.");
+    return;
+  }
   // assign map Element state to eox map
   mapEl.value = eoxMap.value;
+  // enable terrain
+  mapEl.value.globeConfig.terrain = true;
 
   if (props.enableCompare) {
     mapCompareEl.value = compareMap.value;
@@ -684,6 +664,8 @@ onMounted(() => {
       eoxMapCompareLayers,
       eoxMap,
       false,
+      selectedCompareItem,
+      props.baseLayers,
     );
 
     useUpdateTooltipProperties(
@@ -702,17 +684,31 @@ onMounted(() => {
     compareMap,
     props.zoomToExtent,
     selectedItem,
+    props.baseLayers,
   );
+  // After the initial mount and "jump", set the animation duration for subsequent flyTo calls
+  nextTick(() => {
+    animationOptions.value.duration = 1200;
+  });
 });
 
+// sync map loading with the global loading state
+useMapLoading(eoxMap, compareMap);
+
 useUpdateTooltipProperties(eodashCollections, tooltipProperties);
 
 const mainTooltipStyles = computed(() => ({
-  visibility: tooltipProperties.value.length ? "visible" : "hidden",
+  visibility:
+    tooltipProperties.value.length || !!tooltipAdapter.value
+      ? "visible"
+      : "hidden",
 }));
 
 const compareTooltipStyles = computed(() => ({
-  visibility: compareTooltipProperties.value.length ? "visible" : "hidden",
+  visibility:
+    compareTooltipProperties.value.length || !!tooltipAdapter.value
+      ? "visible"
+      : "hidden",
 }));
 /**
  * @param {"main" | "compare"} map
@@ -738,6 +734,9 @@ const tooltipPropertyTransform = (map) => {
       (prop) => prop.id === param.key,
     );
     if (!tooltipProp) {
+      if (tooltipAdapter.value) {
+        return tooltipAdapter.value(param, map);
+      }
       return undefined;
     }
     if (typeof param.value === "object") {
@@ -749,7 +748,6 @@ const tooltipPropertyTransform = (map) => {
         : 4;
       param.value = Number(param.value).toFixed(decimals).toString();
     }
-
     return {
       key: tooltipProp.title || tooltipProp.id,
       value: param.value + " " + (tooltipProp.appendix || ""),
@@ -776,7 +774,7 @@ return (_ctx, _cache) => {
         ref_key: "eoxMap",
         ref: eoxMap,
         id: "main",
-        ".animationOptions": animationOptions,
+        ".animationOptions": animationOptions.value,
         ".center": unref(initialCenter),
         ".zoom": unref(initialZoom),
         ".layers": eoxMapLayers.value,
@@ -829,14 +827,15 @@ return (_ctx, _cache) => {
         enableZoom: (unref(indicator) || unref(compareIndicator) || unref(poi)) ? btnsProps.value.enableZoom : false
         ,
         enableGlobe: (unref(indicator) || unref(compareIndicator) || unref(poi)) ? btnsProps.value.enableGlobe : false,
+        enableFeedback: (unref(indicator) || unref(compareIndicator) || unref(poi)) ? btnsProps.value.enableFeedback : false,
         searchParams: btnsProps.value.searchParams
-      }, null, 8 /* PROPS */, ["style", "exportMap", "changeProjection", "compareIndicators", "backToPOIs", "enableSearch", "enableZoom", "enableGlobe", "searchParams"])
+      }, null, 8 /* PROPS */, ["style", "exportMap", "changeProjection", "compareIndicators", "backToPOIs", "enableSearch", "enableZoom", "enableGlobe", "enableFeedback", "searchParams"])
     ], 4 /* STYLE */)
   ]))
 }
 }
 
 };
-const index = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-df7611e7"]]);
+const index = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-6d08ac44"]]);
 
 export { index as default };