@eodash/eodash 5.7.0 → 5.7.1

package/widgets/EodashMap/index.vue

@@ -80,6 +80,7 @@ import {
   compareIndicator,
   poi,
   isGlobe,
+  tooltipAdapter,
 } from "@/store/states";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
@@ -93,6 +94,7 @@ import {
 import {
   useHandleMapMoveEnd,
   useInitMap,
+  useMapLoading,
   useUpdateTooltipProperties,
 } from "^/EodashMap/methods";
 import { inAndOut } from "ol/easing.js";
@@ -100,42 +102,73 @@ import mustache from "mustache";
 import EodashMapBtns from "^/EodashMap/EodashMapBtns.vue";
 
 const props = defineProps({
+  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;
@@ -143,14 +176,14 @@ const props = defineProps({
      * 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,
@@ -159,6 +192,7 @@ const props = defineProps({
       enableSearch: true,
       enableZoom: true,
       enableGlobe: true,
+      enableMosaic: true,
       enableFeedback: true,
       searchParams: {},
     }),
@@ -203,6 +237,7 @@ 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,
 }));
@@ -218,22 +253,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 = {
@@ -244,12 +270,8 @@ const controls = computed(() => {
   if (props.enableCursorCoordinates && cursorCoordsRef.value) {
     controlsObj.MousePosition = {
       projection: "EPSG:4326",
-      coordinateFormat: (/** @type {[number, number]} */ c) => {
-        const lat = c[1];
-        const lng = c[0];
-        const latStr = `${Math.abs(lat).toFixed(3)}°${lat >= 0 ? "N" : "S"}`;
-        const lngStr = `${Math.abs(lng).toFixed(3)}°${lng >= 0 ? "E" : "W"}`;
-        return `${latStr}, ${lngStr}`;
+      coordinateFormat: (c) => {
+        return `${c?.[1].toFixed(3)} °N, ${c?.[0].toFixed(3)} °E`;
       },
       target: cursorCoordsRef.value,
     };
@@ -261,28 +283,17 @@ 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 = ref({
   duration: 0, // Initially set to 0 for an instant "jump"
@@ -290,9 +301,10 @@ const animationOptions = ref({
 });
 
 /** @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",
@@ -301,10 +313,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;
@@ -319,6 +341,8 @@ onMounted(() => {
       eoxMapCompareLayers,
       eoxMap,
       false,
+      selectedCompareItem,
+      props.baseLayers,
     );
 
     useUpdateTooltipProperties(
@@ -337,6 +361,7 @@ onMounted(() => {
     compareMap,
     props.zoomToExtent,
     selectedItem,
+    props.baseLayers,
   );
   // After the initial mount and "jump", set the animation duration for subsequent flyTo calls
   nextTick(() => {
@@ -344,14 +369,23 @@ onMounted(() => {
   });
 });
 
+// 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
@@ -377,6 +411,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") {
@@ -388,7 +425,6 @@ const tooltipPropertyTransform = (map) => {
         : 4;
       param.value = Number(param.value).toFixed(decimals).toString();
     }
-
     return {
       key: tooltipProp.title || tooltipProp.id,
       value: param.value + " " + (tooltipProp.appendix || ""),
@@ -405,58 +441,6 @@ onMounted(() => {
 </script>
 
 <style scoped>
-#cursor-coordinates {
-  position: fixed;
-  left: 24px;
-  bottom: 54px; /* Tighter spacing: watermark at 6px + ~48px */
-  color: rgba(0, 0, 0, 0.9);
-  font-size: 10px;
-  font-family: var(--eox-body-font-family);
-  background: #fffe;
-  border-radius: 4px;
-  border: none;
-  padding: 0px 3px;
-  max-height: 24px;
-}
-
-@media (max-width: 959px) {
-  #cursor-coordinates {
-    display: none; /* Hidden in mobile mode */
-  }
-}
-
-#scale-line {
-  position: fixed;
-  left: 24px;
-  bottom: 28px; /* Tighter spacing: watermark at 6px + ~22px */
-  color: #fff;
-}
-
-@media (max-width: 959px) {
-  #scale-line {
-    bottom: 102px; /* Adjusted for mobile bottom nav - closer to coordinates */
-  }
-}
-
-:deep(.ol-scale-line) {
-  background: #fffe !important;
-  border-radius: 4px !important;
-  border: none !important;
-  padding: 0px 3px 3px 3px !important;
-  font-size: 10px !important;
-  font-family: var(--eox-body-font-family);
-  max-height: 20px;
-}
-:deep(.ol-scale-line-inner) {
-  display: flex;
-  justify-content: center;
-  border: 1px solid rgba(0, 0, 0, 0.5) !important;
-  border-top: none !important;
-  color: #333 !important;
-  font-weight: 500 !important;
-  transform: translateY(1px);
-}
-
 .map-buttons-container {
   position: fixed;
   left: 0;

package/widgets/EodashMap/methods/btns.js

@@ -11,7 +11,20 @@ export const switchGlobe = () => {
     return;
   }
   if (!isGlobe.value) {
-    mapEl.value.layers = addCorsAnonym([...getLayers()]);
+    // tmp: we remove the vector layers from the globe until
+    // we have better support for them
+    const layers = addCorsAnonym([...getLayers()])
+      .filter((layer) => layer.type !== "Vector")
+      .map((layer) => {
+        if (layer.type === "Group") {
+          return {
+            ...layer,
+            layers: layer.layers.filter((l) => l.type !== "Vector"),
+          };
+        }
+        return layer;
+      });
+    mapEl.value.layers = layers;
   }
   mapEl.value.projection = isGlobe.value ? "EPSG:3857" : "globe";
   if (isGlobe.value) {
@@ -20,27 +33,46 @@ export const switchGlobe = () => {
   isGlobe.value = !isGlobe.value;
 };
 
+function getRoot() {
+  const eodashComponent = document.querySelector("eo-dash");
+  return eodashComponent ? eodashComponent.shadowRoot : document;
+}
+
 function hideAllPanels() {
-  const allPanels = document.querySelectorAll(
+  const root = getRoot();
+  const allPanels = root?.querySelectorAll(
     "eox-layout-item:not([class='bg-panel'])",
   );
-  allPanels.forEach((panel) => {
+
+  allPanels?.forEach((panel) => {
     if (!panel || !(panel instanceof HTMLElement)) {
       return;
     }
     panel.style.display = "none";
   });
+
+  const mapButtons = root?.querySelector(".map-buttons");
+  if (mapButtons instanceof HTMLElement) {
+    mapButtons.style.padding = "1rem";
+  }
 }
+
 function showAllPanels() {
-  const allPanels = document.querySelectorAll(
+  const root = getRoot();
+  const allPanels = root?.querySelectorAll(
     "eox-layout-item:not([class='bg-panel'])",
   );
-  allPanels.forEach((panel) => {
+  allPanels?.forEach((panel) => {
     if (!panel || !(panel instanceof HTMLElement)) {
       return;
     }
     panel.style.display = "";
   });
+
+  const mapButtons = root?.querySelector(".map-buttons");
+  if (mapButtons instanceof HTMLElement) {
+    mapButtons.style.padding = "";
+  }
 }
 /**
  *

package/widgets/EodashMap/methods/create-layers-config.js

@@ -10,6 +10,7 @@ import log from "loglevel";
  * } selectedIndicator
  * @param {EodashCollection[]} eodashCols
  * @param {string | import("stac-ts").StacItem | null} [timeOrItem] - time as a string, or a stac item
+ * @param {Record<string, any>[]} [defaultBaseLayers] - Optional default baselayers to use if the indicator does not provide any
  * @returns {Promise<Record<string, any>[]>}
  */
 
@@ -17,6 +18,7 @@ export const createLayersConfig = async (
   selectedIndicator,
   eodashCols,
   timeOrItem,
+  defaultBaseLayers = [],
 ) => {
   log.debug(
     "Creating layers config",
@@ -38,17 +40,25 @@ export const createLayersConfig = async (
   for (const ec of eodashCols) {
     /** @type {Record<string,any>[]} */
     let layers;
+    let dateOrItem;
     if (timeOrItem) {
-      const dateOrItem =
-        typeof timeOrItem === "string" ? new Date(timeOrItem) : timeOrItem;
-      layers = await ec.createLayersJson(dateOrItem);
+      if (typeof timeOrItem === "string" && timeOrItem.includes("/")) {
+        dateOrItem = timeOrItem;
+      } else {
+        dateOrItem =
+          typeof timeOrItem === "string" ? new Date(timeOrItem) : timeOrItem;
+      }
+      layers = await ec.createLayersJson(/** @type {any} */ (dateOrItem));
     } else {
       layers = await ec.createLayersJson(undefined);
     }
+
     // Add expand to all analysis layers
     layers.forEach((dl) => {
-      dl.properties.layerControlExpand = true;
-      dl.properties.layerControlToolsExpand = true;
+      if (!dl.properties?.layerControlExclusive) {
+        dl.properties.layerControlExpand = true;
+        dl.properties.layerControlToolsExpand = true;
+      }
     });
     dataLayers.layers.push(...layers);
   }
@@ -141,17 +151,7 @@ export const createLayersConfig = async (
     });
   } else {
     // Default to some baselayer
-    baseLayers.layers.push({
-      type: "Tile",
-      properties: {
-        id: "osm",
-        title: "Background",
-        layerControlExclusive: true,
-      },
-      source: {
-        type: "OSM",
-      },
-    });
+    baseLayers.layers.push(...defaultBaseLayers);
   }
 
   if (baseLayers.layers.length) {

package/widgets/EodashMap/methods/index.js

@@ -6,9 +6,12 @@ import { useSTAcStore } from "@/store/stac";
 import { storeToRefs } from "pinia";
 import { isFirstLoad } from "@/utils/states";
 import { useEmitLayersUpdate, useOnLayersUpdate } from "@/composables";
-import { mapPosition } from "@/store/states";
+export { useEmitLayersUpdate, useOnLayersUpdate };
+import { isGlobe, mapPosition } from "@/store/states";
 import { sanitizeBbox } from "@/eodashSTAC/helpers";
 import { transformExtent } from "@eox/map";
+
+export { useMapLoading } from "./use-map-loading";
 /**
  * Holder for previous compare map view as it is overwritten by sync
  * @type { import("ol").View | null} mapElement
@@ -39,14 +42,52 @@ export 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();
   });
 };
 
@@ -61,6 +102,7 @@ export 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]
  */
 export const useInitMap = (
   mapElement,
@@ -71,6 +113,7 @@ export const useInitMap = (
   partnerMap,
   zoomToExtent,
   selectedItem,
+  defaultBaseLayers,
 ) => {
   log.debug(
     "InitMap",
@@ -100,12 +143,24 @@ export const useInitMap = (
         );
 
       if (updatedStac) {
-        if (
+        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 &&
-          updatedStac?.id === previousStac?.id &&
-          updatedItem?.id === previousItem?.id
-        ) {
+          isSameStac &&
+          isSameItem;
+        if (isOwnDatetimeUpdate) {
           internalDatetime = null;
           return;
         }
@@ -153,7 +208,9 @@ export const useInitMap = (
             updatedStac,
             eodashCols,
             updatedItem ?? updatedTime,
+            defaultBaseLayers,
           );
+
           log.debug(
             "Assigned layers after changing time only",
             JSON.parse(JSON.stringify(layersCollection)),
@@ -175,6 +232,11 @@ export 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,
@@ -200,7 +262,8 @@ export const useInitMap = (
         layersCollection = await createLayersConfig(
           updatedStac,
           eodashCols,
-          resolvedTime,
+          updatedItem ?? resolvedTime,
+          defaultBaseLayers,
         );
 
         if (zoomToExtent) {

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

@@ -0,0 +1,52 @@
+import { onUnmounted, watch } from "vue";
+import { loading } from "@/store/states";
+
+/**
+ * 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
+ */
+export const useMapLoading = (mapElement, compareMapElement) => {
+  const startHandler = () => {
+    loading.activeLoads++;
+  };
+  const endHandler = () => {
+    loading.activeLoads--;
+  };
+
+  /** @param {import("@eox/map").EOxMap | null} newMapEl */
+  const watcherHandler = (newMapEl) => {
+    if (!newMapEl) return;
+
+    const hasStartListener = newMapEl.map
+      .getListeners("loadstart")
+      ?.some((listner) => listner === startHandler);
+    const hasEndListener = newMapEl.map
+      .getListeners("loadend")
+      ?.some((listner) => listner === endHandler);
+
+    if (!hasStartListener) {
+      newMapEl.map.addEventListener("loadstart", startHandler);
+    }
+    if (!hasEndListener) {
+      newMapEl.map.addEventListener("loadend", endHandler);
+    }
+  };
+  const stopMainWatcher = watch(mapElement, watcherHandler, {
+    immediate: true,
+  });
+  const stopCompareWatcher = watch(compareMapElement, watcherHandler, {
+    immediate: true,
+  });
+
+  onUnmounted(() => {
+    mapElement.value?.map.removeEventListener("loadstart", startHandler);
+    mapElement.value?.map.removeEventListener("loadend", endHandler);
+    stopMainWatcher();
+    stopCompareWatcher();
+    loading.activeLoads = 0;
+  });
+};