@eodash/eodash 5.0.0-alpha.2.10 → 5.0.0-alpha.2.12

package/core/client/composables/index.js

@@ -1,7 +1,7 @@
 // functions of this folder can only be consumed inside setup stores,
 // setup functions or vue composition api components
 
-import { currentUrl, indicator, mapPosition } from "@/store/States";
+import { currentUrl, datetime, indicator, mapPosition } from "@/store/States";
 import eodash from "@/eodash";
 import { useTheme } from "vuetify/lib/framework.mjs";
 import { onMounted, watch } from "vue";
@@ -71,7 +71,7 @@ export const useUpdateTheme = (themeName, themeDefinition = {}) => {
 export const useURLSearchParametersSync = () => {
   onMounted(async () => {
     // Analyze currently set url params when first loaded and set them in the store
-    if ("URLSearchParams" in window) {
+    if (window.location.search) {
       const searchParams = new URLSearchParams(window.location.search);
       /** @type {number | undefined} */
       let x,
@@ -80,40 +80,59 @@ export const useURLSearchParametersSync = () => {
         /** @type {number | undefined} */
         z;
       searchParams.forEach(async (value, key) => {
-        if (key === "indicator") {
-          const { loadSelectedSTAC, stac } = useSTAcStore();
-          const match = stac?.find((link) => link.id == value);
-          if (match) {
-            await loadSelectedSTAC(match.href);
+        switch (key) {
+          case "indicator": {
+            const { loadSelectedSTAC, stac } = useSTAcStore();
+            const match = stac?.find((link) => link.id == value);
+            if (match) {
+              await loadSelectedSTAC(match.href);
+            }
+            break;
           }
-        }
-        if (key === "x") {
-          x = Number(value);
-        }
-        if (key === "y") {
-          y = Number(value);
-        }
-        if (key === "z") {
-          z = Number(value);
+          case "x":
+            x = Number(value);
+            break;
+          case "y":
+            y = Number(value);
+            break;
+          case "z":
+            z = Number(value);
+            break;
+          case "datetime":
+            try {
+              datetime.value = new Date(value).toISOString();
+            } catch {
+              datetime.value = new Date().toISOString();
+            }
+            break;
+          default:
+            break;
         }
       });
+
       if (x && y && z) {
         mapPosition.value = [x, y, z];
       }
     }
+
     watch(
-      [indicator, mapPosition],
-      ([updatedIndicator, updatedMapPosition]) => {
+      [indicator, mapPosition, datetime],
+      ([updatedIndicator, updatedMapPosition, updatedDatetime]) => {
         if ("URLSearchParams" in window) {
           const searchParams = new URLSearchParams(window.location.search);
           if (updatedIndicator !== "") {
             searchParams.set("indicator", updatedIndicator);
           }
+
           if (updatedMapPosition && updatedMapPosition.length === 3) {
             searchParams.set("x", updatedMapPosition[0]?.toFixed(4) ?? "");
             searchParams.set("y", updatedMapPosition[1]?.toFixed(4) ?? "");
             searchParams.set("z", updatedMapPosition[2]?.toFixed(4) ?? "");
           }
+
+          if (updatedDatetime) {
+            searchParams.set("datetime", updatedDatetime.split("T")?.[0] ?? "");
+          }
           const newRelativePathQuery =
             window.location.pathname + "?" + searchParams.toString();
           history.pushState(null, "", newRelativePathQuery);

package/core/client/eodash.js

@@ -1,5 +1,6 @@
 import { reactive } from "vue";
 import { currentUrl } from "./store/States";
+
 /**
  * Reactive Edoash Instance Object. provided globally in the app, and used as an
  * intermediate object to make user defined instances config reactive.
@@ -57,19 +58,11 @@ export const eodash = reactive({
       },
       {
         id: Symbol(),
-        type: "web-component",
+        type: "internal",
         title: "Layer Control",
         layout: { x: 0, y: 8, w: 3, h: 4 },
         widget: {
-          link: async () => {
-            await import("@eox/layercontrol");
-            await import("@eox/jsonform");
-          },
-          tagName: "eox-layercontrol",
-          properties: {
-            for: "eox-map",
-            class: "pa-4",
-          },
+          name: "EodashLayerControl",
         },
       },
       {

package/core/client/store/Actions.js

@@ -1,19 +1,10 @@
-import { registeredProjections } from "@/store/States";
+import { mapEl, registeredProjections } from "@/store/States";
 
 /**
- * Returns the current layers of the `eox-map`
- * @param {string} [el="eox-map"] - `eox-map` element selector
- * @returns {object[]}
+ * Returns the current layers of {@link mapEl}
+ * @returns {Record<string,any>[]}
  */
-export const getLayers = (el = "eox-map") =>
-  customElements.get("eo-dash")
-    ? document
-        .querySelector("eo-dash")
-        ?.shadowRoot?.querySelector(el)
-        //@ts-expect-error `layers` doesn't exist on type element
-        ?.layers.toReversed()
-    : //@ts-expect-error `layers` doesn't exist on type element
-      document.querySelector(el)?.layers.toReversed();
+export const getLayers = () => mapEl.value?.layers.toReversed();
 
 /**
  * Register EPSG projection in `eox-map`
@@ -23,33 +14,18 @@ export const registerProjection = async (code) => {
   if (!code || registeredProjections.includes(code)) {
     return;
   }
-  const eoxMap =
-    /** @type {HTMLElement & Record<string,any> | null | undefined} */ (
-      customElements.get("eo-dash")
-        ? document
-            .querySelector("eo-dash")
-            ?.shadowRoot?.querySelector("eox-map")
-        : document.querySelector("eox-map")
-    );
 
   registeredProjections.push(code);
-  await eoxMap?.registerProjectionFromCode(code);
+  await mapEl.value?.registerProjectionFromCode(code);
 };
 /**
  * Change `eox-map` projection from an `EPSG` code
  *  @param {string|number} [code]*/
 export const changeMapProjection = async (code) => {
   code = typeof code === "number" ? `EPSG:${code}` : code;
-  const eoxMap =
-    /** @type {HTMLElement & Record<string,any> | null | undefined} */ (
-      customElements.get("eo-dash")
-        ? document
-            .querySelector("eo-dash")
-            ?.shadowRoot?.querySelector("eox-map")
-        : document.querySelector("eox-map")
-    );
+
   if (!code) {
-    eoxMap?.setAttribute("projection", "EPSG:3857");
+    mapEl.value?.setAttribute("projection", "EPSG:3857");
     return;
   }
 
@@ -57,6 +33,6 @@ export const changeMapProjection = async (code) => {
     await registerProjection(code);
   }
 
-  code = eoxMap?.getAttribute("projection") === code ? "EPSG:3857" : code;
-  eoxMap?.setAttribute("projection", code);
+  code = mapEl.value?.getAttribute("projection") === code ? "EPSG:3857" : code;
+  mapEl.value?.setAttribute("projection", code);
 };

package/core/client/store/States.js

@@ -19,3 +19,6 @@ export const registeredProjections = ["EPSG:4326", "EPSG:3857"];
 
 /** available projection to be rendered by `EodashMap` */
 export const availableMapProjection = ref("");
+
+/** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
+export const mapEl = ref(null);

package/core/client/utils/createLayers.js

@@ -0,0 +1,131 @@
+import { registerProjection } from "@/store/Actions";
+import { extractRoles } from "./helpers";
+
+/**
+ * @param {string} id
+ * @param {string} title
+ * @param {Record<string,import("stac-ts").StacAsset>} assets
+ * @param {import("ol/layer/WebGLTile").Style} [style]
+ * @param {Record<string, unknown>} [layerConfig]
+ **/
+export async function createLayersFromDataAssets(
+  id,
+  title,
+  assets,
+  style,
+  layerConfig,
+) {
+  let jsonArray = [];
+  let geoTIFFSources = [];
+  for (const ast in assets) {
+    // register projection if exists
+    await registerProjection(
+      /** @type {number | undefined} */ (assets[ast]?.["proj:epsg"]),
+    );
+
+    if (assets[ast]?.type === "application/geo+json") {
+      const layer = {
+        type: "Vector",
+        source: {
+          type: "Vector",
+          url: assets[ast].href,
+          format: "GeoJSON",
+        },
+        properties: {
+          id,
+          title,
+          ...(layerConfig && {
+            layerConfig: {
+              ...layerConfig,
+              style,
+            },
+          }),
+        },
+      };
+      extractRoles(layer.properties, assets[ast]?.roles ?? []);
+      jsonArray.push(layer);
+    } else if (assets[ast]?.type === "image/tiff") {
+      geoTIFFSources.push({ url: assets[ast].href });
+    }
+  }
+
+  if (geoTIFFSources.length) {
+    jsonArray.push({
+      type: "WebGLTile",
+      source: {
+        type: "GeoTIFF",
+        normalize: !style?.variables,
+        sources: geoTIFFSources,
+      },
+      properties: {
+        id,
+        title,
+        layerConfig,
+      },
+      style,
+    });
+  }
+
+  return jsonArray;
+}
+
+/**
+ * @param {import('stac-ts').StacItem} item
+ * @param {string} id
+ * @param {string} title
+ */
+export const createLayersFromLinks = (id, title, item) => {
+  /** @type {Record<string,any>[]} */
+  const jsonArray = [];
+  const wmsArray = item.links.filter((l) => l.rel === "wms");
+  const xyzArray = item.links.filter((l) => l.rel === "xyz");
+
+  if (wmsArray.length) {
+    wmsArray.forEach((link) => {
+      let json = {
+        type: "Tile",
+        properties: {
+          id: id || link.id,
+          title: title || link.title || item.id,
+        },
+        source: {
+          type: "TileWMS",
+          url: link.href,
+          params: {
+            LAYERS: link["wms:layers"],
+            TILED: true,
+          },
+        },
+      };
+
+      extractRoles(json.properties, /** @type {string[]} */ (link.roles));
+
+      if ("wms:dimensions" in link) {
+        // Expand all dimensions into the params attribute
+        Object.assign(json.source.params, link["wms:dimensions"]);
+      }
+      jsonArray.push(json);
+    });
+  }
+
+  if (xyzArray.length) {
+    xyzArray.forEach((link) => {
+      let json = {
+        type: "Tile",
+        properties: {
+          id: link.id || item.id,
+          title: title || link.title || item.id,
+          roles: link.roles,
+        },
+        source: {
+          type: "XYZ",
+          url: link.href,
+        },
+      };
+
+      extractRoles(json.properties, /** @type {string[]} */ (link.roles));
+      jsonArray.push(json);
+    });
+  }
+  return jsonArray;
+};