@eodash/eodash 5.0.0-rc.1.5 → 5.0.0-rc.2

package/dist/client/{EodashMap-D2bnMLAC.js → EodashMap-C-I6puhb.js}

@@ -1,54 +1,15 @@
-import { onMounted, onUnmounted, watch, nextTick, toRaw, ref, computed, openBlock, createElementBlock, createElementVNode, unref } from 'vue';
+import { onMounted, onUnmounted, watch, nextTick, ref, toRaw, computed, openBlock, createElementBlock, createElementVNode, unref, normalizeStyle } from 'vue';
 import '@eox/map';
 import '@eox/map/src/plugins/advancedLayersAndSources';
-import { a6 as registerProjection, a7 as getProjectionCode, a8 as availableMapProjection, a9 as changeMapProjection, aa as eoxLayersKey, $ as useSTAcStore, ab as posIsSetFromUrl, ac as EodashCollection, ad as mapPosition, a3 as mapEl, a2 as mapCompareEl, Z as datetime, a4 as eodashCompareCollections, a0 as eodashCollections } from './asWebComponent-BnFMd0T6.js';
+import { a8 as eoxLayersKey, $ as useSTAcStore, a9 as setMapProjFromCol, aa as posIsSetFromUrl, ab as useOnLayersUpdate, ac as EodashCollection, ad as mapPosition, a4 as mapEl, a3 as mapCompareEl, Z as datetime, a0 as eodashCollections, a5 as eodashCompareCollections, a6 as layerControlFormValue } from './asWebComponent-CLUhauLl.js';
 import { storeToRefs } from 'pinia';
 import log from 'loglevel';
 import { useEventBus } from '@vueuse/core';
-
-/*
- * eodashSTAC helpers that utilizes the app states or actions
- */
-
-/**
- * checks if there's a projection on the Collection and
- * updates {@link availableMapProjection}
- * @param {import('stac-ts').StacCollection} [STAcCollection]
- */
-const setMapProjFromCol = async (STAcCollection) => {
-  // if a projection exists on the collection level
-  log.debug("Checking for available map projection in indicator");
-  const projection =
-    /** @type {number | string | {name: string, def: string} | undefined} */
-    (
-      STAcCollection?.["eodash:mapProjection"] ||
-        STAcCollection?.["proj:epsg"] ||
-        STAcCollection?.["eodash:proj4_def"]
-    );
-  if (projection) {
-    log.debug("Projection found", projection);
-    await registerProjection(projection);
-    const projectionCode = getProjectionCode(projection);
-    if (availableMapProjection.value !== projectionCode) {
-      log.debug(
-        "Changing map projection",
-        availableMapProjection.value,
-        projectionCode,
-      );
-      await changeMapProjection(projection);
-    }
-    // set it for `EodashMapBtns`
-    availableMapProjection.value = /** @type {string} */ (projectionCode);
-  } else {
-    // reset to default projection
-    log.debug("Resetting projection to default EPSG:3857");
-    await changeMapProjection((availableMapProjection.value = ""));
-  }
-};
+import mustache from 'mustache';
 
 /**
  * Holder for previous compare map view as it is overwritten by sync
- * @type { {map:import("ol").View } | null} mapElement
+ * @type { import("ol").View | null} mapElement
  */
 let viewHolder = null;
 
@@ -242,12 +203,13 @@ const createLayersConfig = async (
 /**
  * Initializes the map and updates it based on changes in the selected indicator and datetime,
  *
- * @param {import("vue").Ref<HTMLElement & Record<string,any> | null>} mapElement
+ * @param {import("vue").Ref<import("@eox/map").EOxMap| null>} mapElement
  * @param {import("vue").Ref<import("stac-ts").StacCollection | null>} selectedIndicator
  * @param {EodashCollection[]} eodashCols
  * @param {import("vue").Ref<string>} datetime
  * @param {import("vue").Ref<Record<string,any>[]>} mapLayers
- * @param {import("vue").Ref<HTMLElement & Record<string,any> | null>} partnerMap
+ * @param {import("vue").Ref<import("@eox/map").EOxMap| null>} partnerMap
+ * @param {boolean} zoomToExtent
  */
 const useInitMap = (
   mapElement,
@@ -256,6 +218,7 @@ const useInitMap = (
   datetime,
   mapLayers,
   partnerMap,
+  zoomToExtent,
 ) => {
   log.debug(
     "InitMap",
@@ -299,7 +262,7 @@ const useInitMap = (
           // Compare map being initialized
           if (selectedCompareStac.value !== null) {
             // save view of compare map
-            viewHolder = mapElement?.value?.map.getView();
+            viewHolder = mapElement?.value?.map.getView() ?? null;
             /** @type {any} */
             (mapElement.value).sync = partnerMap.value;
           }
@@ -348,29 +311,31 @@ const useInitMap = (
           datetime.value = endInterval.toISOString();
         }
 
-        // Try to move map view to extent only when main
-        // indicator and map changes
-        if (
-          mapElement?.value?.id === "main" &&
-          updatedStac.extent?.spatial.bbox &&
-          !posIsSetFromUrl.value
-        ) {
-          // Sanitize extent,
-          const b = updatedStac.extent?.spatial.bbox[0];
-          const sanitizedExtent = [
-            b?.[0] > -180 ? b?.[0] : -180,
-            b?.[1] > -90 ? b?.[1] : -90,
-            b?.[2] < 180 ? b?.[2] : 180,
-            b?.[3] < 90 ? b?.[3] : 90,
-          ];
-
-          const reprojExtent = mapElement.value?.transformExtent(
-            sanitizedExtent,
-            "EPSG:4326",
-            mapElement.value?.map?.getView().getProjection(),
-          );
-          /** @type {import("@eox/map").EOxMap} */
-          (mapElement.value).zoomExtent = reprojExtent;
+        if (zoomToExtent) {
+          // Try to move map view to extent only when main
+          // indicator and map changes
+          if (
+            mapElement?.value?.id === "main" &&
+            updatedStac.extent?.spatial.bbox &&
+            !posIsSetFromUrl.value
+          ) {
+            // Sanitize extent,
+            const b = updatedStac.extent?.spatial.bbox[0];
+            const sanitizedExtent = [
+              b?.[0] > -180 ? b?.[0] : -180,
+              b?.[1] > -90 ? b?.[1] : -90,
+              b?.[2] < 180 ? b?.[2] : 180,
+              b?.[3] < 90 ? b?.[3] : 90,
+            ];
+
+            const reprojExtent = mapElement.value?.transformExtent(
+              sanitizedExtent,
+              "EPSG:4326",
+              mapElement.value?.map?.getView().getProjection(),
+            );
+            /** @type {import("@eox/map").EOxMap} */
+            (mapElement.value).zoomExtent = reprojExtent;
+          }
         }
         if (posIsSetFromUrl.value) {
           posIsSetFromUrl.value = false;
@@ -380,7 +345,6 @@ const useInitMap = (
           "Assigned layers",
           JSON.parse(JSON.stringify(layersCollection)),
         );
-
         mapLayers.value = layersCollection;
         // Emit event to update layers
         await nextTick(() => {
@@ -397,6 +361,21 @@ const useInitMap = (
     stopIndicatorWatcher();
   });
 };
+/**
+ *
+ * @param {EodashCollection[]} eodashCols
+ * @param {import("vue").Ref<Exclude<import("@/types").EodashStyleJson["tooltip"],undefined>>} tooltipProperties
+ */
+const useUpdateTooltipProperties = (eodashCols, tooltipProperties) => {
+  useOnLayersUpdate(async () => {
+    const tooltips = [];
+    for (const ec of eodashCols) {
+      tooltips.push(...(await ec.getToolTipProperties()));
+    }
+    tooltipProperties.value = tooltips;
+    log.debug("Updated tooltip properties", tooltipProperties.value);
+  });
+};
 
 /**
  * @module ol/easing
@@ -417,6 +396,7 @@ const _hoisted_1 = [".enabled"];
 const _hoisted_2 = [".center", ".zoom", ".layers"];
 const _hoisted_3 = [".layers"];
 
+
 const _sfc_main = {
   __name: 'EodashMap',
   props: {
@@ -434,11 +414,18 @@ const _sfc_main = {
     type: Number,
     default: 4,
   },
+  zoomToExtent: {
+    type: Boolean,
+    default: true,
+  },
 },
   setup(__props) {
 
 const props = __props;
 
+/** @type {import("vue").Ref<Exclude<import("@/types").EodashStyleJson["tooltip"], undefined>>} */
+const tooltipProperties = ref([]);
+
 const initialCenter = toRaw([
   mapPosition.value?.[0] ?? props.center?.[0],
   mapPosition.value?.[1] ?? props.center?.[1],
@@ -473,9 +460,9 @@ const animationOptions = {
   easing: inAndOut,
 };
 
-/** @type {import("vue").Ref<(HTMLElement & Record<string,any> & { map:import("ol").Map }) | null>} */
+/** @type {import("vue").Ref<import("@eox/map").EOxMap | null>} */
 const eoxMap = ref(null);
-/** @type {import("vue").Ref<(HTMLElement & Record<string,any> & { map:import("ol").Map }) | null>} */
+/** @type {import("vue").Ref<import("@eox/map").EOxMap | null>} */
 const compareMap = ref(null);
 const { selectedCompareStac } = storeToRefs(useSTAcStore());
 const showCompare = computed(() =>
@@ -502,6 +489,7 @@ onMounted(() => {
       datetime,
       eoxMapCompareLayers,
       eoxMap,
+      false,
     );
   }
 
@@ -513,9 +501,44 @@ onMounted(() => {
     datetime,
     eoxMapLayers,
     compareMap,
+    props.zoomToExtent,
   );
 });
 
+useUpdateTooltipProperties(eodashCollections, tooltipProperties);
+
+const tooltipStyles = computed(() => ({
+  visibility: tooltipProperties.value.length ? "visible" : "hidden",
+}));
+/**
+ * @param {{key:string; value:string}} param
+ * @returns {{key:string; value?:string} | undefined}
+ */
+const tooltipPropertyTransform = (param) => {
+  /** @type {typeof tooltipProperties.value} */
+  const updatedProperties = JSON.parse(
+    mustache.render(JSON.stringify(tooltipProperties.value), {
+      ...(layerControlFormValue.value ?? {}),
+    }),
+  );
+
+  const tooltipProp = updatedProperties?.find((prop) => prop.id === param.key);
+  if (!tooltipProp) {
+    return undefined;
+  }
+  if (typeof param.value === "object") {
+    param.value = JSON.stringify(param.value);
+  }
+  if (!isNaN(Number(param.value))) {
+    param.value = Number(param.value).toFixed(4).toString();
+  }
+
+  return {
+    key: tooltipProp.title || tooltipProp.id,
+    value: param.value + " " + (tooltipProp.appendix || ""),
+  };
+};
+
 return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("eox-map-compare", {
     class: "fill-height fill-width overflow-none",
@@ -531,7 +554,12 @@ return (_ctx, _cache) => {
       ".center": unref(initialCenter),
       ".zoom": unref(initialZoom),
       ".layers": eoxMapLayers.value
-    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2),
+    }, [
+      createElementVNode("eox-map-tooltip", {
+        style: normalizeStyle(tooltipStyles.value),
+        ".propertyTransform": tooltipPropertyTransform
+      }, null, 36 /* STYLE, NEED_HYDRATION */)
+    ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_2),
     createElementVNode("eox-map", {
       class: "fill-height fill-width overflow-none",
       id: "compare",

package/dist/client/{EodashMapBtns-l9B977id.js → EodashMapBtns-CWgtJiG4.js}

@@ -1,9 +1,9 @@
 import { computed, ref, openBlock, createElementBlock, createBlock, unref, createCommentVNode, createVNode, withCtx } from 'vue';
-import { _ as _export_sfc, t as useDisplay, a1 as makePanelTransparent, V as VBtn, a8 as availableMapProjection, a9 as changeMapProjection, ae as setActiveTemplate } from './asWebComponent-BnFMd0T6.js';
+import { _ as _export_sfc, t as useDisplay, a2 as makePanelTransparent, V as VBtn, ae as availableMapProjection, af as changeMapProjection, ag as setActiveTemplate } from './asWebComponent-CLUhauLl.js';
 import { mdiMapPlus, mdiEarthBox, mdiCompare } from '@mdi/js';
-import ExportState from './ExportState-BvD5A0XG.js';
-import _sfc_main$1 from './PopUp-CREaSybs.js';
-import _sfc_main$2 from './EodashItemFilter-DBQwJQPh.js';
+import ExportState from './ExportState-S4lcehm3.js';
+import _sfc_main$1 from './PopUp-CzqV8BFZ.js';
+import _sfc_main$2 from './EodashItemFilter-Cx0t-qeW.js';
 
 const _sfc_main = {
   __name: 'EodashMapBtns',