@eodash/eodash 5.7.0 → 5.8.0

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,10 @@ 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) => {
+        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,
     };
@@ -261,28 +285,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 +303,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 +315,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 +343,8 @@ onMounted(() => {
       eoxMapCompareLayers,
       eoxMap,
       false,
+      selectedCompareItem,
+      props.baseLayers,
     );
 
     useUpdateTooltipProperties(
@@ -337,6 +363,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 +371,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 +413,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 +427,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 +443,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,61 +33,81 @@ 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 = "";
+  }
 }
 /**
  *
- * @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/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) {