@eodash/eodash 5.0.0-processing → 5.0.0-rc.1

package/dist/client/{asWebComponent-DUUoR7MZ.js → asWebComponent-D8bMMCEr.js}

@@ -1,59 +1,13 @@
-import { ref, reactive, watch, onScopeDispose, effectScope, Fragment, computed, watchEffect, toRefs, capitalize, shallowRef, warn, getCurrentInstance as getCurrentInstance$1, unref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, toRaw, createVNode, mergeProps, onBeforeUnmount, readonly, onMounted, onDeactivated, onActivated, nextTick, onUnmounted, shallowReactive, defineAsyncComponent, isRef, toRef, onUpdated, Text, Transition, resolveDynamicComponent, withDirectives, useModel, openBlock, createBlock, withCtx, createTextVNode, toDisplayString, createElementVNode, createCommentVNode, onErrorCaptured, Suspense, normalizeProps, createElementBlock, withAsyncContext, normalizeStyle, defineCustomElement } from 'vue';
+import { ref, reactive, watch, onScopeDispose, effectScope, Fragment, computed, watchEffect, toRefs, capitalize, shallowRef, warn, getCurrentInstance as getCurrentInstance$1, unref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, toRaw, createVNode, mergeProps, onBeforeUnmount, readonly, onMounted, onDeactivated, onActivated, nextTick, shallowReactive, onUnmounted, isRef, toRef, onUpdated, Text, Transition, resolveDynamicComponent, withDirectives, useModel, openBlock, createBlock, withCtx, createTextVNode, toDisplayString, createElementVNode, createCommentVNode, defineAsyncComponent, onErrorCaptured, Suspense, normalizeProps, createElementBlock, withAsyncContext, normalizeStyle, defineCustomElement } from 'vue';
+import { defineStore, storeToRefs, createPinia } from 'pinia';
+import { setupCache } from 'axios-cache-interceptor';
 import log from 'loglevel';
+import { mdiViewDashboardVariant, mdiViewDashboard, mdiAlertCircle, mdiClose, mdiChevronRight, mdiChevronLeft, mdiMenuDown, mdiPlus } from '@mdi/js';
+import { useEventBus, createSharedComposable } from '@vueuse/core';
 import { toAbsolute } from 'stac-js/src/http.js';
-import { setupCache } from 'axios-cache-interceptor';
-import { defineStore, storeToRefs, createPinia } from 'pinia';
-import { useEventBus } from '@vueuse/core';
 import { Collection, Item } from 'stac-js';
-import { mdiAlertCircle, mdiClose, mdiChevronRight, mdiChevronLeft, mdiMenuDown } from '@mdi/js';
 import VCalendar from 'v-calendar';
 
-/** setting default log level globally to warning */
-log.setLevel(log.levels.WARN, true);
-
-/** Currently selected STAC endpoint */
-const currentUrl = ref("");
-
-/** Currently selected compare STAC endpoint */
-const currentCompareUrl = ref("");
-
-/** Currently selected datetime */
-const datetime = ref(new Date().toISOString());
-
-/** Currently selected indicator */
-const indicator = ref("");
-
-/**
- * Current map position
- *
- * @type {import("vue").Ref<(number | undefined)[]>}
- */
-const mapPosition = ref([]);
-
-const registeredProjections = ["EPSG:4326", "EPSG:3857"];
-
-/** available projection to be rendered by `EodashMap` */
-const availableMapProjection = ref("EPSG:3857");
-
-/** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
-const mapEl = ref(null);
-
-/** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
-const mapCompareEl = ref(null);
-
-const __vite_glob_0_1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
-  __proto__: null,
-  availableMapProjection,
-  currentCompareUrl,
-  currentUrl,
-  datetime,
-  indicator,
-  mapCompareEl,
-  mapEl,
-  mapPosition,
-  registeredProjections
-}, Symbol.toStringTag, { value: 'Module' }));
-
 function bind(fn, thisArg) {
   return function wrap() {
     return fn.apply(thisArg, arguments);
@@ -1205,7 +1159,7 @@ function encode(val) {
  *
  * @param {string} url The base of the url (e.g., http://www.google.com)
  * @param {object} [params] The params to be appended
- * @param {?object} options
+ * @param {?(object|Function)} options
  *
  * @returns {string} The formatted url
  */
@@ -1217,6 +1171,12 @@ function buildURL(url, params, options) {
   
   const _encode = options && options.encode || encode;
 
+  if (utils$1.isFunction(options)) {
+    options = {
+      serialize: options
+    };
+  } 
+
   const serializeFn = options && options.serialize;
 
   let serializedParams;
@@ -2199,68 +2159,18 @@ const progressEventDecorator = (total, throttled) => {
 
 const asyncDecorator = (fn) => (...args) => utils$1.asap(() => fn(...args));
 
-const isURLSameOrigin = platform.hasStandardBrowserEnv ?
-
-// Standard browser envs have full support of the APIs needed to test
-// whether the request URL is of the same origin as current location.
-  (function standardBrowserEnv() {
-    const msie = platform.navigator && /(msie|trident)/i.test(platform.navigator.userAgent);
-    const urlParsingNode = document.createElement('a');
-    let originURL;
-
-    /**
-    * Parse a URL to discover its components
-    *
-    * @param {String} url The URL to be parsed
-    * @returns {Object}
-    */
-    function resolveURL(url) {
-      let href = url;
-
-      if (msie) {
-        // IE needs attribute set twice to normalize properties
-        urlParsingNode.setAttribute('href', href);
-        href = urlParsingNode.href;
-      }
-
-      urlParsingNode.setAttribute('href', href);
-
-      // urlParsingNode provides the UrlUtils interface - http://url.spec.whatwg.org/#urlutils
-      return {
-        href: urlParsingNode.href,
-        protocol: urlParsingNode.protocol ? urlParsingNode.protocol.replace(/:$/, '') : '',
-        host: urlParsingNode.host,
-        search: urlParsingNode.search ? urlParsingNode.search.replace(/^\?/, '') : '',
-        hash: urlParsingNode.hash ? urlParsingNode.hash.replace(/^#/, '') : '',
-        hostname: urlParsingNode.hostname,
-        port: urlParsingNode.port,
-        pathname: (urlParsingNode.pathname.charAt(0) === '/') ?
-          urlParsingNode.pathname :
-          '/' + urlParsingNode.pathname
-      };
-    }
-
-    originURL = resolveURL(window.location.href);
-
-    /**
-    * Determine if a URL shares the same origin as the current location
-    *
-    * @param {String} requestURL The URL to test
-    * @returns {boolean} True if URL shares the same origin, otherwise false
-    */
-    return function isURLSameOrigin(requestURL) {
-      const parsed = (utils$1.isString(requestURL)) ? resolveURL(requestURL) : requestURL;
-      return (parsed.protocol === originURL.protocol &&
-          parsed.host === originURL.host);
-    };
-  })() :
+const isURLSameOrigin = platform.hasStandardBrowserEnv ? ((origin, isMSIE) => (url) => {
+  url = new URL(url, platform.origin);
 
-  // Non standard browser envs (web workers, react-native) lack needed support.
-  (function nonStandardBrowserEnv() {
-    return function isURLSameOrigin() {
-      return true;
-    };
-  })();
+  return (
+    origin.protocol === url.protocol &&
+    origin.host === url.host &&
+    (isMSIE || origin.port === url.port)
+  );
+})(
+  new URL(platform.origin),
+  platform.navigator && /(msie|trident)/i.test(platform.navigator.userAgent)
+) : () => true;
 
 const cookies = platform.hasStandardBrowserEnv ?
 
@@ -2362,7 +2272,7 @@ function mergeConfig(config1, config2) {
   config2 = config2 || {};
   const config = {};
 
-  function getMergedValue(target, source, caseless) {
+  function getMergedValue(target, source, prop, caseless) {
     if (utils$1.isPlainObject(target) && utils$1.isPlainObject(source)) {
       return utils$1.merge.call({caseless}, target, source);
     } else if (utils$1.isPlainObject(source)) {
@@ -2374,11 +2284,11 @@ function mergeConfig(config1, config2) {
   }
 
   // eslint-disable-next-line consistent-return
-  function mergeDeepProperties(a, b, caseless) {
+  function mergeDeepProperties(a, b, prop , caseless) {
     if (!utils$1.isUndefined(b)) {
-      return getMergedValue(a, b, caseless);
+      return getMergedValue(a, b, prop , caseless);
     } else if (!utils$1.isUndefined(a)) {
-      return getMergedValue(undefined, a, caseless);
+      return getMergedValue(undefined, a, prop , caseless);
     }
   }
 
@@ -2436,7 +2346,7 @@ function mergeConfig(config1, config2) {
     socketPath: defaultToConfig2,
     responseEncoding: defaultToConfig2,
     validateStatus: mergeDirectKeys,
-    headers: (a, b) => mergeDeepProperties(headersToObject(a), headersToObject(b), true)
+    headers: (a, b , prop) => mergeDeepProperties(headersToObject(a), headersToObject(b),prop, true)
   };
 
   utils$1.forEach(Object.keys(Object.assign({}, config1, config2)), function computeConfigValue(prop) {
@@ -3178,7 +3088,7 @@ function dispatchRequest(config) {
   });
 }
 
-const VERSION = "1.7.7";
+const VERSION = "1.7.9";
 
 const validators$1 = {};
 
@@ -3229,6 +3139,14 @@ validators$1.transitional = function transitional(validator, version, message) {
   };
 };
 
+validators$1.spelling = function spelling(correctSpelling) {
+  return (value, opt) => {
+    // eslint-disable-next-line no-console
+    console.warn(`${opt} is likely a misspelling of ${correctSpelling}`);
+    return true;
+  }
+};
+
 /**
  * Assert object's properties type
  *
@@ -3298,9 +3216,9 @@ class Axios {
       return await this._request(configOrUrl, config);
     } catch (err) {
       if (err instanceof Error) {
-        let dummy;
+        let dummy = {};
 
-        Error.captureStackTrace ? Error.captureStackTrace(dummy = {}) : (dummy = new Error());
+        Error.captureStackTrace ? Error.captureStackTrace(dummy) : (dummy = new Error());
 
         // slice off the Error: ... line
         const stack = dummy.stack ? dummy.stack.replace(/^.+\n/, '') : '';
@@ -3355,6 +3273,11 @@ class Axios {
       }
     }
 
+    validator.assertOptions(config, {
+      baseUrl: validators.spelling('baseURL'),
+      withXsrfToken: validators.spelling('withXSRFToken')
+    }, true);
+
     // Set config.method
     config.method = (config.method || this.defaults.method || 'get').toLowerCase();
 
@@ -3792,440 +3715,54 @@ const instance = axios$1.create();
 
 const axios = setupCache(instance, { cacheTakeover: false });
 
-/** @param {import("stac-ts").StacLink[]} [links] */
-function generateFeatures(links) {
-  /**
-   * @type {import("geojson").Feature[]}
-   */
-  const features = [];
-  links?.forEach((element) => {
-    if (element.rel === "item" && "latlng" in element) {
-      const [lat, lon] = /** @type {string} */ (element.latlng)
-        .split(",")
-        .map((it) => Number(it));
-      features.push({
-        type: "Feature",
-        geometry: {
-          type: "Point",
-          coordinates: [lon, lat],
-        },
-        properties: { id: element.id },
-      });
-    }
-  });
-  const geojsonObject = {
-    type: "FeatureCollection",
-    crs: {
-      type: "name",
-      properties: {
-        name: "EPSG:4326",
-      },
-    },
-    features,
-  };
-  return geojsonObject;
-}
+/** setting default log level globally to warning */
+log.setLevel(log.levels.WARN, true);
 
-/** @param { import("ol/layer/WebGLTile").Style & { jsonform?: Record<string,any> } & { legend?: Record<string,any> } } [style] */
-function extractLayerConfig(style) {
-  /** @type {Record<string,unknown> | undefined} */
-  let layerConfig = undefined;
-  if (style?.jsonform) {
-    layerConfig = { schema: style.jsonform, type: "style" };
-    style = { ...style };
-    delete style.jsonform;
-    if (style?.legend) {
-      layerConfig.legend = style.legend;
-      delete style.legend;
-    }
-  }
-  log.debug(
-    "extracted layerConfig",
-    JSON.parse(JSON.stringify({ layerConfig, style })),
-  );
+/** Currently selected STAC endpoint */
+const currentUrl = ref("");
 
-  return { layerConfig, style };
-}
+/** Currently selected compare STAC endpoint */
+const currentCompareUrl = ref("");
 
-/**
- * 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 = ""));
-  }
-};
+/** Currently selected datetime */
+const datetime = ref(new Date().toISOString());
+
+/** Currently selected indicator */
+const indicator = ref("");
 
 /**
- * Function to extract collection urls from an indicator
- * @param {import("stac-ts").StacCatalog
- *   | import("stac-ts").StacCollection
- *   | import("stac-ts").StacItem
- *   | null
- * } stacObject
- * @param {string} basepath
- * @returns {string[]}
+ * Current map position
+ *
+ * @type {import("vue").Ref<(number | undefined)[]>}
  */
-function extractCollectionUrls(stacObject, basepath) {
-  const collectionUrls = [];
-  // Support for two structure types, flat and indicator, simplified here:
-  // Flat assumes Catalog-Collection-Item
-  // Indicator assumes Catalog-Collection-Collection-Item
-  // TODO: this is not the most stable test approach,
-  // we should discuss potential other approaches
-  if (stacObject?.links && stacObject?.links[1]?.rel === "item") {
-    collectionUrls.push(basepath);
-  } else if (stacObject?.links[1]?.rel === "child") {
-    // TODO: Iterate through all children to create collections
-    stacObject.links.forEach((link) => {
-      if (link.rel === "child") {
-        collectionUrls.push(toAbsolute(link.href, basepath));
-      }
-    });
-  }
-  return collectionUrls;
-}
+const mapPosition = ref([]);
 
-/**
- * Assign extracted roles to layer properties
- * @param {Record<string,any>} properties
- * @param {import("stac-ts").StacLink | import("stac-ts").StacAsset} linkOrAsset
- * */
-const extractRoles = (properties, linkOrAsset) => {
-  const roles = /** @type {string[]} */ (linkOrAsset.roles);
-  roles?.forEach((role) => {
-    if (role === "visible") {
-      properties.visible = true;
-    }
-    if (role === "overlay" || role === "baselayer") {
-      properties.group = role;
-      //remove all the properties and replace the random ID with baselayer
-      // provided ID
-      // const [_colId, _itemId, _isAsset, _random, proj] =
-      //   properties.id.split(";:;");
-      // properties.id = ["", "", "", "", linkOrAsset.id, proj].join(";:;");
-    }
+const registeredProjections = ["EPSG:4326", "EPSG:3857"];
 
-    return properties;
-  });
-};
+/** available projection to be rendered by `EodashMap` */
+const availableMapProjection = ref("EPSG:3857");
 
-/**
- * @param {import("stac-ts").StacItem} item
- * @param {string} itemUrl
- **/
-const fetchStyle = async (item, itemUrl) => {
-  const styleLink = item.links.find((link) => link.rel.includes("style"));
-  if (styleLink) {
-    let url = "";
-    if (styleLink.href.startsWith("http")) {
-      url = styleLink.href;
-    } else {
-      url = toAbsolute(styleLink.href, itemUrl);
-    }
+/** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
+const mapEl = ref(null);
 
-    /** @type {import("ol/layer/WebGLTile").Style & {jsonform?:Record<string,any>}} */
-    const styleJson = await axios.get(url).then((resp) => resp.data);
+/** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
+const mapCompareEl = ref(null);
 
-    log.debug("fetched styles JSON", JSON.parse(JSON.stringify(styleJson)));
-    return { ...styleJson };
-  }
-};
+const activeTemplate = ref("");
 
-/**
- * Return projection code which is to be registered in `eox-map`
- * @param {string|number|{name: string, def: string}} [projection]
- * @returns {string}
- */
-const getProjectionCode = (projection) => {
-  let code = projection;
-  switch (typeof projection) {
-    case "number":
-      code = `EPSG:${projection}`;
-      break;
-    case "string":
-      code = projection;
-      break;
-    case "object":
-      code = projection?.name;
-  }
-  return /** @type {string} */ (code);
-};
-
-/**
- * @param {import("stac-ts").StacLink[]} [links]
- * @param {string|null} [currentStep]
- **/
-const extractLayerDatetime = (links, currentStep) => {
-  if (!currentStep || !links?.length) {
-    return undefined;
-  }
-
-  // check if links has a datetime value
-  const hasDatetime = links.some((l) => typeof l.datetime === "string");
-  if (!hasDatetime) {
-    return undefined;
-  }
-
-  /** @type {string[]} */
-  const controlValues = [];
-  try {
-    currentStep = new Date(currentStep).toISOString();
-
-    links.reduce((vals, link) => {
-      if (link.datetime && link.rel === "item") {
-        vals.push(
-          new Date(/** @type {string} */ (link.datetime)).toISOString(),
-        );
-      }
-      return vals;
-    }, controlValues);
-  } catch (e) {
-    console.warn("[eodash] not supported datetime format was provided", e);
-    return undefined;
-  }
-  // not enough controlValues
-  if (controlValues.length <= 1) {
-    return undefined;
-  }
-
-  // item datetime is not included in the item links datetime
-  if (!controlValues.includes(currentStep)) {
-    return undefined;
-  }
-
-  return {
-    controlValues,
-    currentStep,
-    slider: true,
-    disablePlay: true,
-  };
-};
-
-/**
- * Find layer by ID
- *  @param {string} layer
- *  @param {Record<string, any>[]} layers
- *  @returns {Record<string,any> | undefined}
- **/
-const findLayer = (layers, layer) => {
-  for (const lyr of layers) {
-    if (lyr.type === "Group") {
-      const found = findLayer(lyr.layers, layer);
-      if (!found) {
-        continue;
-      }
-      return found;
-    }
-    if (lyr.properties.id === layer) {
-      return lyr;
-    }
-  }
-};
-
-/**
- * @param {Record<string,any>[]} currentLayers
- * @param {Record<string,any>} oldLayer
- * @param {Record<string,any>[]} newLayers
- * @returns {Record<string,any>[] | undefined}
- */
-const replaceLayer = (currentLayers, oldLayer, newLayers) => {
-  const oldLayerIdx = currentLayers.findIndex(
-    (l) => l.properties.id === oldLayer.properties.id,
-  );
-  if (oldLayerIdx !== -1) {
-    currentLayers.splice(oldLayerIdx, 1, ...newLayers);
-    return currentLayers;
-  }
-
-  for (const l of currentLayers) {
-    if (l.type === "Group") {
-      const updatedGroupLyrs = replaceLayer(l.layers, oldLayer, newLayers);
-      if (updatedGroupLyrs?.length) {
-        l.layers = updatedGroupLyrs;
-        return currentLayers;
-      }
-    }
-  }
-};
-/**
- * @param {import('./eodashSTAC.js').EodashCollection[]} indicators
- * @param {import('ol/layer').Layer} layer
- */
-const getColFromLayer = async (indicators, layer) => {
-  // init cols
-  const collections = await Promise.all(
-    indicators.map((ind) => ind.fetchCollection()),
-  );
-  const [collectionId, itemId, ..._other] = layer.get("id").split(";:;");
-
-  const chosen = collections.find((col) => {
-    const isInd =
-      col.id === collectionId &&
-      col.links?.some(
-        (link) => link.rel === "item" && link.href.includes(itemId),
-      );
-    return isInd ?? false;
-  });
-  return indicators.find((ind) => ind.collectionStac?.id === chosen?.id);
-};
-
-/**
- * generates layer specific ID, related functions are: {@link assignProjID} & {@link extractRoles}
- * @param {string} collectionId
- * @param {string} itemId
- * @param {import('stac-ts').StacLink} link
- * @param {string} projectionCode
- *
- */
-const createLayerID = (collectionId, itemId, link, projectionCode) => {
-  const linkId = link.id || link.title || link.href;
-  let lId = `${collectionId ?? ""};:;${itemId ?? ""};:;${linkId ?? ""};:;${projectionCode ?? ""}`;
-  // If we are looking at base layers and overlays we remove the collection and item part
-  // as we want to make sure tiles are not reloaded when switching layers
-  if (
-    link.roles &&
-    // @ts-expect-error it seems roles it not defined for links yet
-    link.roles.find((r) => ["baselayer", "overlay"].includes(r))
-  ) {
-    lId = `${linkId ?? ""};:;${projectionCode ?? ""}`;
-  }
-  log.debug("Generated Layer ID", lId);
-  return lId;
-};
-
-/**
- * generates layer specific ID, related functions are: {@link assignProjID} & {@link extractRoles}
- * @param {string} collectionId
- * @param {string} itemId
- * @param {number} index
- *
- */
-const createAssetID = (collectionId, itemId, index) => {
-  let lId = `${collectionId ?? ""};:;${itemId ?? ""};:;${index ?? ""}`;
-  log.debug("Generated Asset ID", lId);
-  return lId;
-};
-
-/**
- * creates a structured clone from the layers and
- * removes all properties from the clone
- * except the ID and title
- *
- * @param {Record<string,any>[]} layers
- */
-const removeUnneededProperties = (layers) => {
-  const cloned = structuredClone(layers);
-  cloned.forEach((layer) => {
-    const id = layer.properties.id;
-    const title = layer.properties.title;
-    layer.properties = { id, title };
-    if (layer["interactions"]) {
-      delete layer["interactions"];
-    }
-    if (layer.type === "Group") {
-      layer.layers = removeUnneededProperties(layer.layers);
-    }
-  });
-  return cloned;
-};
-
-/**
- * Returns the current layers of {@link mapEl}
- * @returns {Record<string,any>[]}
- */
-const getLayers = () => mapEl.value?.layers.toReversed();
-
-/**
- * Returns the current layers of {@link mapCompareEl}
- * @returns {Record<string,any>[]}
- */
-const getCompareLayers = () => mapCompareEl.value?.layers.toReversed();
-
-/**
- * Register EPSG projection in `eox-map`
- * @param {string|number|{name: string, def: string, extent?:number[]}} [projection]*/
-const registerProjection = async (projection) => {
-  let code = getProjectionCode(projection);
-  if (!code || registeredProjections.includes(code)) {
-    return;
-  }
-  log.debug("Unregistered projection found, registering it", code);
-  registeredProjections.push(code);
-  if (typeof projection === "object") {
-    // registering whole projection definition
-    await mapEl.value?.registerProjection(
-      code,
-      projection.def,
-      projection.extent,
-    );
-    // also registering for comparison map
-    await mapCompareEl.value?.registerProjection(
-      code,
-      projection.def,
-      projection.extent,
-    );
-  } else {
-    await mapEl.value?.registerProjectionFromCode(code);
-    // also registering for comparison map
-    await mapCompareEl.value?.registerProjectionFromCode(code);
-  }
-};
-/**
- * Change `eox-map` projection from an `EPSG` projection
- *  @param {string|number|{name: string, def: string}} [projection]*/
-const changeMapProjection = async (projection) => {
-  let code = getProjectionCode(projection);
-
-  if (!code) {
-    mapEl.value?.setAttribute("projection", "EPSG:3857");
-    mapCompareEl.value?.setAttribute("projection", "EPSG:3857");
-    return;
-  }
-
-  if (!registeredProjections.includes(code)) {
-    await registerProjection(projection);
-  }
-
-  code = mapEl.value?.getAttribute("projection") === code ? "EPSG:3857" : code;
-  mapEl.value?.setAttribute("projection", code);
-  mapCompareEl.value?.setAttribute("projection", code);
-};
-
-const __vite_glob_0_0 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
-  __proto__: null,
-  changeMapProjection,
-  getCompareLayers,
-  getLayers,
-  registerProjection
-}, Symbol.toStringTag, { value: 'Module' }));
+const states = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  activeTemplate,
+  availableMapProjection,
+  currentCompareUrl,
+  currentUrl,
+  datetime,
+  indicator,
+  mapCompareEl,
+  mapEl,
+  mapPosition,
+  registeredProjections
+}, Symbol.toStringTag, { value: 'Module' }));
 
 /**
  * Reactive Edoash Instance Object. provided globally in the app, and used as an
@@ -4236,181 +3773,423 @@ const __vite_glob_0_0 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.definePro
 const eodash = reactive({
   id: "demo",
   stacEndpoint:
-    // "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
+    // "https://eurodatacube.github.io/eodash-catalog/RACE/catalog.json",
     // "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
-    "https://santilland.github.io/process_example/catalog.json",
+    "https://eodashcatalog.eox.at/samplecatalog/samples/catalog.json",
+  // "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
+  // "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
   brand: {
     noLayout: true,
     name: "Demo",
     theme: {
       colors: {
-        primary: "#fff",
-        secondary: "#fff",
-        surface: "#fff",
+        primary: "#002742",
+        secondary: "#0071C2",
+        surface: "#ffff",
+      },
+      variables: {
+        "surface-opacity": 0.6,
+        "primary-opacity": 0.8,
       },
     },
     footerText: "Demo configuration of eodash client",
   },
-  template: {
-    loading: {
-      id: Symbol(),
-      type: "web-component",
-      widget: {
-        // https://uiball.com/ldrs/
-        link: "https://cdn.jsdelivr.net/npm/ldrs/dist/auto/mirage.js",
-        tagName: "l-mirage",
-        properties: {
-          class: "align-self-center justify-self-center",
-          size: "120",
-          speed: "2.5",
-          color: "#004170",
+  templates: {
+    light: {
+      gap: 16,
+      loading: {
+        id: Symbol(),
+        type: "web-component",
+        widget: {
+          // https://uiball.com/ldrs/
+          link: "https://cdn.jsdelivr.net/npm/ldrs/dist/auto/mirage.js",
+          tagName: "l-mirage",
+          properties: {
+            class: "align-self-center justify-self-center",
+            size: "120",
+            speed: "2.5",
+            color: "#004170",
+          },
         },
       },
-    },
-    background: {
-      id: Symbol(),
-      type: "internal",
-      widget: {
-        name: "EodashMap",
-        properties: {
-          enableCompare: true,
+      background: {
+        id: Symbol(),
+        type: "internal",
+        widget: {
+          name: "EodashMap",
+          properties: {
+            enableCompare: true,
+          },
         },
       },
+      widgets: [
+        {
+          id: Symbol(),
+          type: "internal",
+          title: "Tools",
+          layout: { x: 0, y: 0, w: 3, h: 1 },
+          widget: {
+            name: "EodashTools",
+            properties: {
+              layoutTarget: "expert",
+              layoutIcon: mdiViewDashboardVariant,
+              itemFilterConfig: {
+                resultType: "cards",
+                filtersTitle: "",
+                style: "--padding: 72px",
+                filterProperties: [],
+                resultsTitle: "Explore more indicators",
+                subTitleProperty: "subtitle",
+                imageProperty: "thumbnail",
+              },
+            },
+          },
+        },
+        {
+          defineWidget: (selectedSTAC) => {
+            return selectedSTAC
+              ? {
+                  id: "layercontrol-light",
+                  type: "internal",
+                  title: "Layers",
+                  layout: { x: 0, y: 1, w: 3, h: 3 },
+                  widget: {
+                    name: "EodashLayerControl",
+                    properties: {
+                      slider: false,
+                      tools: ["datetime", "info", "legend"],
+                      cssVars: {
+                        "--list-padding": "0",
+                        "--tools-button-visibility": "none",
+                        "--layer-input-visibility": "none",
+                        "--layer-type-visibility": "none",
+                        "--padding": "16px",
+                        "--padding-vertical": "16px",
+                        "--layer-tools-button-visibility": "none",
+                        "--layer-summary-visibility": "none",
+                      },
+                    },
+                  },
+                }
+              : null;
+          },
+        },
+        {
+          defineWidget: (selectedSTAC) => {
+            return selectedSTAC
+              ? {
+                  id: "stacinfo-light",
+                  type: "internal",
+                  title: "Information",
+                  layout: { x: 9, y: 0, w: 3, h: 6 },
+                  widget: {
+                    name: "EodashStacInfo",
+                    properties: {
+                      tags: [],
+                      header: [],
+                      footer: [],
+                      body: ["description"],
+                      styleOverride: "",
+                      featured: [],
+                    },
+                  },
+                }
+              : null;
+          },
+        },
+        {
+          defineWidget: (selectedSTAC) => {
+            return selectedSTAC
+              ? {
+                  id: "Datepicker",
+                  type: "internal",
+                  layout: { x: 5, y: 8, w: 2, h: 4 },
+                  title: "Date",
+                  widget: {
+                    name: "EodashDatePicker",
+                    properties: {
+                      hideArrows: true,
+                      hideInputField: true,
+                      hintText: `<b>Hint:</b> closest available date is displayed <br />
+                            on map (see Analysis Layers)`,
+                    },
+                  },
+                }
+              : null;
+          },
+        },
+      ],
     },
-    widgets: [
-      {
+    expert: {
+      loading: {
         id: Symbol(),
-        type: "internal",
-        title: "Indicators",
-        layout: { x: 0, y: 0, w: 3, h: 6 },
+        type: "web-component",
         widget: {
-          name: "EodashItemFilter",
+          // https://uiball.com/ldrs/
+          link: "https://cdn.jsdelivr.net/npm/ldrs/dist/auto/mirage.js",
+          tagName: "l-mirage",
           properties: {
-            enableCompare: true,
-            aggregateResults: "collection_group",
+            class: "align-self-center justify-self-center",
+            size: "120",
+            speed: "2.5",
+            color: "#004170",
           },
         },
       },
-      {
+      background: {
         id: Symbol(),
         type: "internal",
-        title: "Layer Control",
-        layout: { x: 0, y: 6, w: 3, h: 6 },
         widget: {
-          name: "EodashLayerControl",
+          name: "EodashMap",
+          properties: {
+            enableCompare: true,
+          },
         },
       },
-      /*
-      {
-        defineWidget: (selectedCompareStac) => {
-          return selectedCompareStac
-            ? {
-                id: Symbol(),
-                title: "Layer Control Comparison",
-                layout: { x: 9, y: 6, w: 3, h: 6 },
-                type: "internal",
-                widget: {
-                  name: "EodashLayerControl",
-                  properties: {
-                    map: "second",
-                  },
+      widgets: [
+        {
+          id: Symbol(),
+          type: "internal",
+          title: "Tools",
+          layout: { x: 0, y: 0, w: 3, h: 1 },
+          widget: {
+            name: "EodashTools",
+            properties: {
+              layoutTarget: "light",
+              layoutIcon: mdiViewDashboard,
+              itemFilterConfig: {
+                resultType: "cards",
+                subTitleProperty: "subtitle",
+                imageProperty: "thumbnail",
+                aggregateResults: "collection_group",
+                style: {
+                  "--form-flex-direction": "row",
                 },
-              }
-            : null;
+              },
+            },
+          },
         },
-      },
-      */
-      {
-        defineWidget: (selectedSTAC) => {
-          return selectedSTAC
-            ? {
-                id: "Information",
-                title: "Information",
-                layout: { x: 9, y: 0, w: 3, h: 6 },
-                type: "web-component",
-                widget: {
-                  link: async () => await import('@eox/stacinfo'),
-                  properties: {
-                    for: currentUrl,
-                    allowHtml: "true",
-                    styleOverride: `.single-property {columns: 1!important;}
-                      h1 {margin:0px!important;font-size:16px!important;}
-                      header h1:after {
-                        content:' ';
-                        display:block;
-                        border:1px solid #d0d0d0;
-                      }
-                      h2 {font-size:15px}
-                      h3 {font-size:14px}
-                      summary {cursor: pointer;}
-                      #properties li > .value { font-weight: normal !important;}
-                      main {padding-bottom: 10px;}
-                      .footer-container {line-height:1;}
-                      .footer-container button {margin-top: -10px;}
-                      .footer-container small {font-size:10px;line-height:1;}`,
-                    header: '["title"]',
-                    tags: '["themes"]',
-                    subheader: "[]",
-                    properties: '["satellite","sensor","agency","extent"]',
-                    featured: '["description","providers","assets","links"]',
-                    footer: '["sci:citation"]',
+        {
+          id: Symbol(),
+          type: "internal",
+          title: "Layers",
+          layout: { x: 0, y: 1, w: 3, h: 6 },
+          widget: {
+            name: "EodashLayerControl",
+          },
+        },
+        {
+          defineWidget: (selectedSTAC) => {
+            return selectedSTAC
+              ? {
+                  id: "Information",
+                  title: "Information",
+                  layout: { x: 9, y: 0, w: 3, h: 6 },
+                  type: "internal",
+                  widget: {
+                    name: "EodashStacInfo",
+                    properties: {
+                      showIndicatorsBtn: false,
+                      showLayoutSwitcher: false,
+                    },
                   },
-                  tagName: "eox-stacinfo",
-                },
-              }
-            : null;
+                }
+              : null;
+          },
         },
-      },
-      {
-        defineWidget: (selectedSTAC) => {
-          return selectedSTAC
-            ? {
-                id: "Datepicker",
-                type: "internal",
-                layout: { x: 5, y: 10, w: 1, h: 1 },
-                title: "Datepicker",
-                widget: {
-                  name: "EodashDatePicker",
-                  properties: {
-                    hintText: `<b>Hint:</b> closest available date is displayed <br />
-                      on map (see Analysis Layers)`,
+        {
+          defineWidget: (selectedSTAC) => {
+            return selectedSTAC
+              ? {
+                  id: "Datepicker",
+                  type: "internal",
+                  layout: { x: 5, y: 8, w: 2, h: 4 },
+                  title: "Date",
+                  widget: {
+                    name: "EodashDatePicker",
+                    properties: {
+                      hintText: `<b>Hint:</b> closest available date is displayed <br />
+                            on map (see Analysis Layers)`,
+                    },
                   },
-                },
-              }
-            : null;
+                }
+              : null;
+          },
+        },
+        {
+          defineWidget: (selected) => {
+            return selected
+              ? {
+                  id: "Buttons",
+                  layout: { x: 8, y: 0, w: 1, h: 2 },
+                  title: "Buttons",
+                  type: "internal",
+                  widget: {
+                    name: "EodashMapBtns",
+                  },
+                }
+              : null;
+          },
+        },
+        {
+          defineWidget: (selectedSTAC) =>
+            selectedSTAC?.links.some((l) => l.rel === "service")
+              ? {
+                  id: Symbol(),
+                  type: "internal",
+                  title: "Processes",
+                  layout: { x: 0, y: 7, w: 3, h: 5 },
+                  widget: {
+                    name: "EodashProcess",
+                  },
+                }
+              : null,
+        },
+      ],
+    },
+    compare: {
+      gap: 16,
+      loading: {
+        id: Symbol(),
+        type: "web-component",
+        widget: {
+          // https://uiball.com/ldrs/
+          link: "https://cdn.jsdelivr.net/npm/ldrs/dist/auto/mirage.js",
+          tagName: "l-mirage",
+          properties: {
+            class: "align-self-center justify-self-center",
+            size: "120",
+            speed: "2.5",
+            color: "#004170",
+          },
         },
       },
-      {
-        defineWidget: (selected) => {
-          return selected
-            ? {
-                id: "Buttons",
-                layout: { x: 8, y: 0, w: 1, h: 1 },
-                title: "Buttons",
-                type: "internal",
-                widget: {
-                  name: "EodashMapBtns",
-                },
-              }
-            : null;
+      background: {
+        id: Symbol(),
+        type: "internal",
+        widget: {
+          name: "EodashMap",
+          properties: {
+            enableCompare: true,
+          },
         },
       },
-      {
-        defineWidget: (indicator) => {
-          return indicator
-            ? {
-                id: "process",
-                layout: { x: 9, y: 6, w: 3, h: 6 },
-                title: "Process",
-                type: "internal",
-                widget: {
-                  name: "EodashProcess",
+      widgets: [
+        {
+          id: Symbol(),
+          type: "internal",
+          title: "Tools",
+          layout: { x: 0, y: 0, w: 3, h: 1 },
+          widget: {
+            name: "EodashTools",
+            properties: {
+              layoutTarget: "expert",
+              layoutIcon: mdiViewDashboardVariant,
+              itemFilterConfig: {
+                cssVars: {
+                  "--form-flex-direction": "row",
                 },
-              }
-            : null;
+              },
+            },
+          },
         },
-      },
-    ],
+        // compare indicators
+        {
+          id: Symbol(),
+          type: "internal",
+          title: "Tools",
+          layout: { x: 9, y: 0, w: 3, h: 1 },
+          widget: {
+            name: "EodashTools",
+            properties: {
+              showLayoutSwitcher: false,
+              indicatorBtnText: "Select an indicator to compare",
+              itemFilterConfig: {
+                enableCompare: true,
+                // resultsTitle:"Select an indicator to compare",
+                filtersTitle: "Select an indicator to compare",
+                // filterProperties: [],
+                cssVars: {
+                  "--form-flex-direction": "row",
+                },
+              },
+            },
+          },
+        },
+        {
+          id: Symbol(),
+          type: "internal",
+          title: "Layers",
+          layout: { x: 0, y: 1, w: 3, h: 6 },
+          widget: {
+            name: "EodashLayerControl",
+          },
+        },
+        {
+          id: Symbol(),
+          title: "Comparison Layers",
+          layout: { x: 9, y: 1, w: 3, h: 6 },
+          type: "internal",
+          widget: {
+            name: "EodashLayerControl",
+            properties: {
+              map: "second",
+            },
+          },
+        },
+        {
+          defineWidget: (selectedSTAC) =>
+            selectedSTAC?.links.some((l) => l.rel === "service")
+              ? {
+                  id: Symbol(),
+                  type: "internal",
+                  title: "Processes",
+                  layout: { x: 0, y: 7, w: 3, h: 5 },
+                  widget: {
+                    name: "EodashProcess",
+                  },
+                }
+              : null,
+        },
+        {
+          defineWidget: (selected) => {
+            return selected
+              ? {
+                  id: "Buttons",
+                  layout: { x: 8, y: 0, w: 1, h: 2 },
+                  title: "Buttons",
+                  type: "internal",
+                  widget: {
+                    name: "EodashMapBtns",
+                    properties: {
+                      compareIndicators: false,
+                    },
+                  },
+                }
+              : null;
+          },
+        },
+        {
+          defineWidget: (selectedSTAC) => {
+            return selectedSTAC
+              ? {
+                  id: "Datepicker",
+                  type: "internal",
+                  layout: { x: 5, y: 8, w: 2, h: 4 },
+                  title: "Date",
+                  widget: {
+                    name: "EodashDatePicker",
+                    properties: {
+                      hintText: `<b>Hint:</b> closest available date is displayed <br />
+                                on map (see Analysis Layers)`,
+                    },
+                  },
+                }
+              : null;
+          },
+        },
+      ],
+    },
   },
 });
 
@@ -5556,6 +5335,11 @@ const en = {
     counter: '{0} files',
     counterSize: '{0} files ({1} in total)'
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files'
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
@@ -6897,7 +6681,8 @@ const aliases = {
   calendar: 'mdi-calendar',
   treeviewCollapse: 'mdi-menu-down',
   treeviewExpand: 'mdi-menu-right',
-  eyeDropper: 'mdi-eyedropper'
+  eyeDropper: 'mdi-eyedropper',
+  upload: 'mdi-cloud-upload'
 };
 const mdi = {
   // Not using mergeProps here, functional components merge props by default (?)
@@ -7731,7 +7516,7 @@ function createVuetify() {
     goTo
   };
 }
-const version = "3.7.5";
+const version = "3.7.6";
 createVuetify.version = version;
 function inject(key) {
   const vm = this.$;
@@ -7742,16 +7527,37 @@ function inject(key) {
 }
 
 /**
- * `eodash` injection key.
+ * `eodash` injection key.
+ *
+ * @see {@link "@/plugins/index.js"}
+ */
+const eodashKey = Symbol("eodash");
+/** @type {import("@vueuse/core").EventBusKey<"layers:updated"|"time:updated">} */
+const eoxLayersKey = Symbol("eoxMapLayers");
+
+/**
+ * Array of eodash STAC Collections extracted from the current selected indicator.
+ * Updated in {@link file://./../store/stac.js `loadSelectedSTAC`} widget
+ *
+ * @type {import('../eodashSTAC/EodashCollection').EodashCollection[]}
+ * @private
+ */
+const eodashCollections = shallowReactive([]);
+
+/**
+ * Array of eodash STAC Collections extracted from the current selected COMPARE indicator.
+ * Updated in {@link file://./../store/stac.js ` loadSelectedCompareSTAC`} widget
  *
- * @see {@link "@/plugins/index.js"}
+ * @type {import('../eodashSTAC/EodashCollection').EodashCollection[]}
+ * @private
  */
-const eodashKey = Symbol("eodash");
-/** @type {import("@vueuse/core").EventBusKey<"layers:updated"|"time:updated">} */
-const eoxLayersKey = Symbol("eoxMapLayers");
+const eodashCompareCollections = shallowReactive([]);
+
+/** whether the map postion was set in URL params on first load */
+const posIsSetFromUrl = ref(false);
 
 // functions of this folder can only be consumed inside setup stores,
-// setup functions or vue composition api components
+// setup functions or vue composition api components https://vuejs.org/guide/reusability/composables
 
 
 /**
@@ -7761,11 +7567,11 @@ const eoxLayersKey = Symbol("eoxMapLayers");
  * @param {string} [base=eodash.stacEndpoint] - Base URL, default value is the
  *   root stac catalog. Default is `eodash.stacEndpoint`
  * @returns {import("vue").Ref<string>} - Returns `currentUrl`
- * @see {@link '@/store/States.js'}
+ * @see {@link '@/store/states.js'}
  */
 const useAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
   if (!rel || rel.includes("http")) {
-    currentUrl.value = base;
+    currentUrl.value = rel;
     return currentUrl;
   }
 
@@ -7790,7 +7596,7 @@ const useAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
  * @param {string} [base=eodash.stacEndpoint] - Base URL, default value is the
  *   root stac catalog. Default is `eodash.stacEndpoint`
  * @returns {import("vue").Ref<string>} - Returns `currentUrl`
- * @see {@link '@/store/States.js'}
+ * @see {@link '@/store/states.js'}
  */
 const useCompareAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
   if (!rel || rel.includes("http")) {
@@ -7857,6 +7663,10 @@ const useURLSearchParametersSync = () => {
         z;
       for (const [key, value] of searchParams) {
         switch (key) {
+          case "template": {
+            activeTemplate.value = value;
+            break;
+          }
           case "indicator": {
             log.debug("Found indicator key in url");
             const { loadSelectedSTAC, stac } = useSTAcStore();
@@ -7892,82 +7702,504 @@ const useURLSearchParametersSync = () => {
         }
       }
 
-      if (x && y && z) {
-        log.debug("Coordinates found, applying map poisition", x, y, z);
-        mapPosition.value = [x, y, z];
+      if (x && y && z) {
+        log.debug("Coordinates found, applying map poisition", x, y, z);
+        mapPosition.value = [x, y, z];
+        if (!posIsSetFromUrl.value) {
+          posIsSetFromUrl.value = true;
+        }
+      }
+    }
+
+    watch(
+      [indicator, mapPosition, datetime, activeTemplate],
+      ([
+        updatedIndicator,
+        updatedMapPosition,
+        updatedDatetime,
+        updatedTemplate,
+      ]) => {
+        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] ?? "");
+          }
+          if (updatedTemplate) {
+            searchParams.set("template", updatedTemplate);
+          }
+          const newRelativePathQuery =
+            window.location.pathname + "?" + searchParams.toString();
+          history.pushState(null, "", newRelativePathQuery);
+        }
+      },
+    );
+  });
+};
+
+/**
+ * Converts eox-layout-item to transparent
+ *
+ *  @param {import("vue").Ref<HTMLElement|null>} root - components root element ref*/
+const makePanelTransparent = (root) => {
+  onMounted(() => {
+    const eoxItem = root.value?.parentElement;
+    if (eoxItem?.tagName === "EOX-LAYOUT-ITEM") {
+      eoxItem.classList.remove("bg-surface");
+    }
+  });
+};
+
+/**
+ * Listens to the `layers:updated` and `time:updated` events and calls
+ *
+ * @param {import("@vueuse/core").EventBusListener<
+ * "layers:updated"|"time:updated",
+ * {layers:Record<string,any>[]| undefined}
+ * >} listener
+ */
+const useOnLayersUpdate = (listener) => {
+  const layersEvents = useEventBus(eoxLayersKey);
+
+  const unsubscribe = layersEvents.on(listener);
+
+  onUnmounted(() => {
+    unsubscribe();
+  });
+};
+
+/** @param {import("stac-ts").StacLink[]} [links] */
+function generateFeatures(links) {
+  /**
+   * @type {import("geojson").Feature[]}
+   */
+  const features = [];
+  links?.forEach((element) => {
+    if (element.rel === "item" && "latlng" in element) {
+      const [lat, lon] = /** @type {string} */ (element.latlng)
+        .split(",")
+        .map((it) => Number(it));
+      features.push({
+        type: "Feature",
+        geometry: {
+          type: "Point",
+          coordinates: [lon, lat],
+        },
+        properties: { id: element.id },
+      });
+    }
+  });
+  const geojsonObject = {
+    type: "FeatureCollection",
+    crs: {
+      type: "name",
+      properties: {
+        name: "EPSG:4326",
+      },
+    },
+    features,
+  };
+  return geojsonObject;
+}
+
+/**
+ * Sperates and extracts layerConfig (jsonform schema & legend) from a style json
+ *
+ *  @param { import("ol/layer/WebGLTile").Style & { jsonform?: Record<string,any> } & { legend?: Record<string,any> } } [style] */
+function extractLayerConfig(style) {
+  /** @type {Record<string,unknown> | undefined} */
+  let layerConfig = undefined;
+  if (style?.jsonform) {
+    layerConfig = { schema: style.jsonform, type: "style" };
+    style = { ...style };
+    delete style.jsonform;
+    if (style?.legend) {
+      layerConfig.legend = style.legend;
+      delete style.legend;
+    }
+  }
+  log.debug(
+    "extracted layerConfig",
+    JSON.parse(JSON.stringify({ layerConfig, style })),
+  );
+
+  return { layerConfig, style };
+}
+
+/**
+ * Function to extract collection urls from an indicator
+ * @param {import("stac-ts").StacCatalog
+ *   | import("stac-ts").StacCollection
+ *   | import("stac-ts").StacItem
+ *   | null
+ * } stacObject
+ * @param {string} basepath
+ */
+function extractCollectionUrls(stacObject, basepath) {
+  /** @type {string[]} */
+  const collectionUrls = [];
+  // Support for two structure types, flat and indicator, simplified here:
+  // Flat assumes Catalog-Collection-Item
+  // Indicator assumes Catalog-Collection-Collection-Item
+
+  const children = stacObject?.links?.filter(
+    (link) => link.rel === "child" && link.type?.includes("json"),
+  );
+  if (!children?.length) {
+    collectionUrls.push(basepath);
+    return collectionUrls;
+  }
+  children.forEach((link) => {
+    collectionUrls.push(toAbsolute(link.href, basepath));
+  });
+  return collectionUrls;
+}
+
+/**
+ * Assign extracted roles to layer properties
+ * @param {Record<string,any>} properties
+ * @param {import("stac-ts").StacLink | import("stac-ts").StacAsset} linkOrAsset
+ * */
+const extractRoles = (properties, linkOrAsset) => {
+  const roles = /** @type {string[]} */ (linkOrAsset.roles);
+  roles?.forEach((role) => {
+    if (role === "visible") {
+      properties.visible = true;
+    }
+    if (role === "overlay" || role === "baselayer") {
+      properties.group = role;
+    }
+
+    return properties;
+  });
+};
+
+/**
+ * Extracts style JSON from a STAC Item
+ * @param {import("stac-ts").StacItem} item
+ * @param {string} itemUrl
+ * @returns
+ **/
+const fetchStyle = async (item, itemUrl) => {
+  const styleLink = item.links.find((link) => link.rel.includes("style"));
+  if (styleLink) {
+    let url = "";
+    if (styleLink.href.startsWith("http")) {
+      url = styleLink.href;
+    } else {
+      url = toAbsolute(styleLink.href, itemUrl);
+    }
+
+    /** @type {import("ol/layer/WebGLTile").Style & {jsonform?:Record<string,any>}} */
+    const styleJson = await axios.get(url).then((resp) => resp.data);
+
+    log.debug("fetched styles JSON", JSON.parse(JSON.stringify(styleJson)));
+    return { ...styleJson };
+  }
+};
+
+/**
+ * Return projection code which is to be registered in `eox-map`
+ * @param {string|number|{name: string, def: string}} [projection]
+ * @returns {string}
+ */
+const getProjectionCode = (projection) => {
+  let code = projection;
+  switch (typeof projection) {
+    case "number":
+      code = `EPSG:${projection}`;
+      break;
+    case "string":
+      code = projection;
+      break;
+    case "object":
+      code = projection?.name;
+  }
+  return /** @type {string} */ (code);
+};
+
+/**
+ * Extracts layercontrol LayerDatetime property from STAC Links
+ * @param {import("stac-ts").StacLink[]} [links]
+ * @param {string|null} [currentStep]
+ **/
+const extractLayerDatetime = (links, currentStep) => {
+  if (!currentStep || !links?.length) {
+    return undefined;
+  }
+
+  // check if links has a datetime value
+  // TODO: consider datetime ranges
+  const hasDatetime = links.some((l) => typeof l.datetime === "string");
+  if (!hasDatetime) {
+    return undefined;
+  }
+
+  /** @type {string[]} */
+  const controlValues = [];
+  try {
+    currentStep = new Date(currentStep).toISOString();
+
+    links.reduce((vals, link) => {
+      if (link.datetime && link.rel === "item") {
+        vals.push(
+          new Date(/** @type {string} */ (link.datetime)).toISOString(),
+        );
+      }
+      return vals;
+    }, controlValues);
+  } catch (e) {
+    console.warn("[eodash] not supported datetime format was provided", e);
+    return undefined;
+  }
+  // not enough controlValues
+  if (controlValues.length <= 1) {
+    return undefined;
+  }
+
+  // item datetime is not included in the item links datetime
+  if (!controlValues.includes(currentStep)) {
+    return undefined;
+  }
+
+  return {
+    controlValues,
+    currentStep,
+    slider: true,
+    play: false,
+    displayFormat: "DD MMMM YYYY",
+  };
+};
+
+/**
+ * Find JSON layer by ID
+ *  @param {string} layer
+ *  @param {Record<string, any>[]} layers
+ *  @returns {Record<string,any> | undefined}
+ **/
+const findLayer = (layers, layer) => {
+  for (const lyr of layers) {
+    if (lyr.type === "Group") {
+      const found = findLayer(lyr.layers, layer);
+      if (!found) {
+        continue;
       }
+      return found;
     }
+    if (lyr.properties.id === layer) {
+      return lyr;
+    }
+  }
+};
 
-    watch(
-      [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) ?? "");
-          }
+/**
+ * Removes the layer with the id provided and injects an array of layers in its position
+ * @param {Record<string,any>[]} currentLayers
+ * @param {string} oldLayer - id of the layer to be replaced
+ * @param {Record<string,any>[]} newLayers - array of layers to replace the old layer
+ * @returns {Record<string,any>[] | undefined}
+ */
+const replaceLayer = (currentLayers, oldLayer, newLayers) => {
+  const oldLayerIdx = currentLayers.findIndex(
+    (l) => l.properties.id === oldLayer,
+  );
 
-          if (updatedDatetime) {
-            searchParams.set("datetime", updatedDatetime.split("T")?.[0] ?? "");
-          }
-          const newRelativePathQuery =
-            window.location.pathname + "?" + searchParams.toString();
-          history.pushState(null, "", newRelativePathQuery);
-        }
-      },
+  if (oldLayerIdx !== -1) {
+    log.debug(
+      "Replacing layer",
+      oldLayer,
+      "with",
+      newLayers.map((l) => l.properties.id),
     );
-  });
-};
+    currentLayers.splice(oldLayerIdx, 1, ...newLayers);
+    return currentLayers;
+  }
 
-/** @param {import("vue").Ref<HTMLElement|null>} root - components root element ref*/
-const makePanelTransparent = (root) => {
-  onMounted(() => {
-    const eoxItem = root.value?.parentElement;
-    if (eoxItem?.tagName === "EOX-LAYOUT-ITEM") {
-      eoxItem.classList.remove("bg-surface");
+  for (const l of currentLayers) {
+    if (l.type === "Group") {
+      const updatedGroupLyrs = replaceLayer(l.layers, oldLayer, newLayers);
+      if (updatedGroupLyrs?.length) {
+        l.layers = updatedGroupLyrs;
+        return currentLayers;
+      }
     }
+  }
+};
+
+/**
+ * Extracts the STAC collection which the layer was created from.
+ *
+ * @param {import('../eodashSTAC/EodashCollection.js').EodashCollection[]} indicators
+ * @param {import('ol/layer').Layer} layer
+ */
+const getColFromLayer = async (indicators, layer) => {
+  // init cols
+  const collections = await Promise.all(
+    indicators.map((ind) => ind.fetchCollection()),
+  );
+  const [collectionId, itemId, ..._other] = layer.get("id").split(";:;");
+
+  const chosen = collections.find((col) => {
+    const isInd =
+      col.id === collectionId &&
+      col.links?.some(
+        (link) => link.rel === "item" && link.href.includes(itemId),
+      );
+    return isInd;
   });
+  return indicators.find((ind) => ind.collectionStac?.id === chosen?.id);
 };
 
 /**
- * Listens to the `layers:updated` and `time:updated` events and calls
+ * Generates layer specific ID from STAC Links
+ * related functions are: {@link assignProjID} & {@link createAssetID}
+ *
+ * @param {string} collectionId
+ * @param {string} itemId
+ * @param {import('stac-ts').StacLink} link
+ * @param {string} projectionCode
  *
- * @param {import("@vueuse/core").EventBusListener<
- * "layers:updated"|"time:updated",
- * {layers:Record<string,any>[]| undefined}
- * >} listener
  */
-const useOnLayersUpdate = (listener) => {
-  const layersEvents = useEventBus(eoxLayersKey);
+const createLayerID = (collectionId, itemId, link, projectionCode) => {
+  const linkId = link.id || link.title || link.href;
+  let lId = `${collectionId ?? ""};:;${itemId ?? ""};:;${linkId ?? ""};:;${projectionCode ?? ""}`;
+  // If we are looking at base layers and overlays we remove the collection and item part
+  // as we want to make sure tiles are not reloaded when switching layers
+  if (
+    /** @type {string[]} */
+    (link.roles)?.find((r) => ["baselayer", "overlay"].includes(r))
+  ) {
+    lId = `${linkId ?? ""};:;${projectionCode ?? ""}`;
+  }
+  log.debug("Generated Layer ID", lId);
+  return lId;
+};
 
-  const unsubscribe = layersEvents.on(listener);
+/**
+ * Generates layer specific ID from STAC assets, related functions are: {@link assignProjID} & {@link createLayerID}
+ *
+ * @param {string} collectionId
+ * @param {string} itemId
+ * @param {number} index
+ *
+ */
+const createAssetID = (collectionId, itemId, index) => {
+  let lId = `${collectionId ?? ""};:;${itemId ?? ""};:;${index ?? ""}`;
+  log.debug("Generated Asset ID", lId);
+  return lId;
+};
 
-  onUnmounted(() => {
-    unsubscribe();
+/**
+ * creates a structured clone from the layers and
+ * removes all properties from the clone
+ * except the ID and title
+ *
+ * @param {Record<string,any>[]} layers
+ */
+const removeUnneededProperties = (layers) => {
+  const cloned = structuredClone(layers);
+  cloned.forEach((layer) => {
+    const id = layer.properties.id;
+    const title = layer.properties.title;
+    layer.properties = { id, title };
+    if (layer["interactions"]) {
+      delete layer["interactions"];
+    }
+    if (layer.type === "Group") {
+      layer.layers = removeUnneededProperties(layer.layers);
+    }
   });
+  return cloned;
 };
 
 /**
- * Array of eodash STAC Collections extracted from the current selected indicator.
- * Updated in {@link file://./../store/stac.js `loadSelectedSTAC`} widget
- * @type {import('./eodashSTAC').EodashCollection[]}
- * @private
+ * Returns the current layers of {@link mapEl}
+ * @returns {Record<string,any>[]}
  */
-const eodashCollections = shallowReactive([]);
+const getLayers = () => mapEl.value?.layers.toReversed();
 
 /**
- * Array of eodash STAC Collections extracted from the current selected COMPARE indicator.
- * Updated in {@link file://./../store/stac.js ` loadSelectedCompareSTAC`} widget
- * @type {import('./eodashSTAC').EodashCollection[]}
- * @private
+ * Returns the current layers of {@link mapCompareEl}
+ * @returns {Record<string,any>[]}
  */
-const eodashCompareCollections = shallowReactive([]);
+const getCompareLayers = () => mapCompareEl.value?.layers.toReversed();
+
+/**
+ * Register EPSG projection in `eox-map`
+ * @param {string|number|{name: string, def: string, extent?:number[]}} [projection]*/
+const registerProjection = async (projection) => {
+  let code = getProjectionCode(projection);
+  if (!code || registeredProjections.includes(code)) {
+    return;
+  }
+  log.debug("Unregistered projection found, registering it", code);
+  registeredProjections.push(code);
+  if (typeof projection === "object") {
+    // registering whole projection definition
+    await mapEl.value?.registerProjection(
+      code,
+      projection.def,
+      projection.extent,
+    );
+    // also registering for comparison map
+    await mapCompareEl.value?.registerProjection(
+      code,
+      projection.def,
+      projection.extent,
+    );
+  } else {
+    await mapEl.value?.registerProjectionFromCode(code);
+    // also registering for comparison map
+    await mapCompareEl.value?.registerProjectionFromCode(code);
+  }
+};
+/**
+ * Change `eox-map` projection from an `EPSG` projection
+ *  @param {string|number|{name: string, def: string}} [projection]*/
+const changeMapProjection = async (projection) => {
+  let code = getProjectionCode(projection);
+
+  if (!code) {
+    mapEl.value?.setAttribute("projection", "EPSG:3857");
+    mapCompareEl.value?.setAttribute("projection", "EPSG:3857");
+    return;
+  }
+
+  if (!registeredProjections.includes(code)) {
+    await registerProjection(projection);
+  }
+
+  code = mapEl.value?.getAttribute("projection") === code ? "EPSG:3857" : code;
+  mapEl.value?.setAttribute("projection", code);
+  mapCompareEl.value?.setAttribute("projection", code);
+};
+
+/**
+ *
+ * @param {string} template
+ */
+const setActiveTemplate = (template) => {
+  activeTemplate.value = template;
+  log.debug("Setting active template to", template);
+};
+
+const actions = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  changeMapProjection,
+  getCompareLayers,
+  getLayers,
+  registerProjection,
+  setActiveTemplate
+}, Symbol.toStringTag, { value: 'Module' }));
 
 /**
  * @param {string} collectionId
@@ -8026,10 +8258,11 @@ async function createLayersFromAssets(
         },
         ...(!style?.variables && { style }),
       };
+
       extractRoles(layer.properties, assets[ast]);
-      if (extraProperties !== null) {
-        layer.properties = { ...layer.properties, ...extraProperties };
-      }
+
+      layer.properties = { ...layer.properties, ...(extraProperties ?? {}) };
+
       jsonArray.push(layer);
     } else if (assets[ast]?.type === "image/tiff") {
       geoTIFFIdx = idx;
@@ -8057,7 +8290,7 @@ async function createLayersFromAssets(
       },
       style,
     };
-    if (extraProperties !== null) {
+    if (extraProperties) {
       layer.properties = { ...layer.properties, ...extraProperties };
     }
     jsonArray.push(layer);
@@ -8111,10 +8344,11 @@ const createLayersFromLinks = async (
       viewProjectionCode,
     );
     log.debug("WMS Layer added", linkId);
-    const tileSize =
+    const tileSize = /** @type {number[]} */ (
       "wms:tilesize" in wmsLink
         ? [wmsLink["wms:tilesize"], wmsLink["wms:tilesize"]]
-        : [512, 512];
+        : [512, 512]
+    );
     let json = {
       type: "Tile",
       properties: {
@@ -8279,11 +8513,6 @@ class EodashCollection {
   /** @type {import("stac-ts").StacCollection | undefined} */
   #collectionStac;
 
-  //  read only
-  get collectionStac() {
-    return this.#collectionStac;
-  }
-
   /**
    * @type {import("stac-ts").StacLink
    *   | import("stac-ts").StacItem
@@ -8291,6 +8520,11 @@ class EodashCollection {
    */
   selectedItem;
 
+  //  read only
+  get collectionStac() {
+    return this.#collectionStac;
+  }
+
   /** @param {string} collectionUrl */
   constructor(collectionUrl) {
     this.#collectionUrl = collectionUrl;
@@ -8339,9 +8573,7 @@ class EodashCollection {
       this.selectedItem = this.getItem();
 
       if (this.selectedItem) {
-        layersJson = /** @type {Record<string,any>[]} */ (
-          await this.createLayersJson(this.selectedItem)
-        );
+        layersJson = await this.createLayersJson(this.selectedItem);
       } else {
         console.warn(
           "[eodash] the selected collection does not include any items",
@@ -8367,7 +8599,7 @@ class EodashCollection {
    * @param {string} title
    * @param {boolean} isGeoDB
    * @param {string} [itemDatetime]
-   * @returns {Promise<Record<string,any>[]>} arrays
+   * @returns {Promise<Record<string,any>[]>} layers
    * */
   async buildJsonArray(item, itemUrl, title, isGeoDB, itemDatetime) {
     log.debug(
@@ -8390,31 +8622,9 @@ class EodashCollection {
 
     const jsonArray = [];
 
-    if (isGeoDB) {
-      const allFeatures = generateFeatures(this.#collectionStac?.links);
-
-      return [
-        {
-          type: "Vector",
-          properties: {
-            id: this.#collectionStac?.id ?? "",
-            title: this.#collectionStac?.title || item.id,
-          },
-          source: {
-            type: "Vector",
-            url: "data:," + encodeURIComponent(JSON.stringify(allFeatures)),
-            format: "GeoJSON",
-          },
-          style: {
-            "circle-radius": 5,
-            "circle-fill-color": "#00417077",
-            "circle-stroke-color": "#004170",
-            "fill-color": "#00417077",
-            "stroke-color": "#004170",
-          },
-          interactions: [],
-        },
-      ];
+    if (isGeoDB) {
+      // handled by getGeoDBLayer
+      return [];
     }
 
     // I propose following approach, we "manually" create configurations
@@ -8447,7 +8657,7 @@ class EodashCollection {
       let extraProperties = null;
       if (this.#collectionStac?.assets?.legend?.href) {
         extraProperties = {
-          description: `<div style="text-align:center; width: 100%">
+          description: `<div style="width: 100%">
             <img src="${this.#collectionStac.assets.legend.href}" style="max-height:70px; margin-top:-15px; margin-bottom:-20px;" />
           </div>`,
         };
@@ -8601,14 +8811,14 @@ class EodashCollection {
       currentLayers = getCompareLayers();
     }
 
-    const oldLayer = findLayer(currentLayers, layer);
+    /** @type {string | undefined} */
+    const oldLayerID = findLayer(currentLayers, layer)?.properties.id;
 
-    const updatedLayers = replaceLayer(
-      currentLayers,
-      /** @type {Record<string,any> & { properties:{ id:string; title:string } } } */
-      (oldLayer),
-      newLayers,
-    );
+    if (!oldLayerID) {
+      return;
+    }
+
+    const updatedLayers = replaceLayer(currentLayers, oldLayerID, newLayers);
 
     return updatedLayers;
   }
@@ -8651,6 +8861,63 @@ class EodashCollection {
       )),
     ];
   }
+
+  /**
+   * Returns GeoDB layer from a list of EodashCollections
+   *
+   * @param {EodashCollection[]} eodashCollections
+   *
+   **/
+  static getGeoDBLayer(eodashCollections) {
+    const allFeatures = [];
+    for (const collection of eodashCollections) {
+      const isGeoDB = collection.#collectionStac?.endpointtype === "GeoDB";
+      if (!isGeoDB) {
+        continue;
+      }
+      const collectionFeatures = generateFeatures(
+        collection.#collectionStac?.links,
+      ).features;
+      if (collectionFeatures.length) {
+        allFeatures.push(
+          generateFeatures(collection.#collectionStac?.links).features,
+        );
+      }
+    }
+    if (allFeatures.length) {
+      const featureCollection = {
+        type: "FeatureCollection",
+        crs: {
+          type: "name",
+          properties: {
+            name: "EPSG:4326",
+          },
+        },
+        features: allFeatures.flat(),
+      };
+      return {
+        type: "Vector",
+        properties: {
+          id: "geodb-collection",
+          title: "GeoDB Collection",
+        },
+        source: {
+          type: "Vector",
+          url: "data:," + encodeURIComponent(JSON.stringify(featureCollection)),
+          format: "GeoJSON",
+        },
+        style: {
+          "circle-radius": 5,
+          "circle-fill-color": "#00417077",
+          "circle-stroke-color": "#004170",
+          "fill-color": "#00417077",
+          "stroke-color": "#004170",
+        },
+        interactions: [],
+      };
+    }
+    return null;
+  }
 }
 
 const useSTAcStore = defineStore("stac", () => {
@@ -8770,7 +9037,7 @@ const useSTAcStore = defineStore("stac", () => {
       .get(absoluteUrl.value)
       .then(async (resp) => {
         // init eodash collections
-        const collectionUrls = extractCollectionUrls(
+        const collectionUrls = await extractCollectionUrls(
           resp.data,
           absoluteUrl.value,
         );
@@ -8814,31 +9081,12 @@ const useSTAcStore = defineStore("stac", () => {
   };
 });
 
-const __vite_glob_0_2 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
-  __proto__: null,
-  useSTAcStore
-}, Symbol.toStringTag, { value: 'Module' }));
+//export all actions, states, and pinia stores
 
-const storesImport = /* #__PURE__ */ Object.assign({"./Actions.js": __vite_glob_0_0,"./States.js": __vite_glob_0_1,"./stac.js": __vite_glob_0_2});
-
-const store = /** @type {import("@/types").EodashStore} */ (
-  (() => {
-    const stores = {};
-    for (const [filePath, importedstore] of Object.entries(storesImport)) {
-      const storeType =
-        filePath.split("/").at(-1)?.slice(0, -3).toLowerCase() ?? "";
-      if (!["keys"].includes(storeType)) {
-        //@ts-expect-error `importedstore` cant be typed individually
-        stores[storeType] = importedstore;
-      }
-    }
-    return stores;
-  })()
-);
+const store = { stac: { useSTAcStore }, actions, states };
 
 /**
- * Sets user defined instance on runtime. Consumes `/@fs/config.js` and assign
- * it to `eodash`
+ * Handles importing user defined instance of Eodash
  *
  * @async
  * @param {string | undefined} runtimeConfig
@@ -8849,6 +9097,17 @@ const useEodashRuntime = async (runtimeConfig) => {
   const eodash = /** @type {import("@/types").Eodash} */ (inject$1(eodashKey));
   /** @param {import("@/types").Eodash} config */
   const assignInstance = (config) => {
+    if ("template" in config) {
+      //@ts-expect-error to do
+      delete eodash.templates;
+      //@ts-expect-error to do
+      eodash.template = config.template;
+    } else if ("templates" in config) {
+      //@ts-expect-error to do
+      delete eodash.template;
+      //@ts-expect-error to do
+      eodash.templates = config.templates;
+    }
     /** @type {(keyof import("@/types").Eodash)[]} */ (
       Object.keys(eodash)
     ).forEach((key) => {
@@ -8868,232 +9127,74 @@ const useEodashRuntime = async (runtimeConfig) => {
     return eodash;
   }
 
-  try {
-    const configJs = "/config.js";
-    assignInstance(
-      (await import(/* @vite-ignore */ new URL(configJs, import.meta.url).href))
-        .default,
-    );
-  } catch {
-    try {
-      assignInstance(
-        await Promise.resolve().then(() => eodash$1).then(async (m) => await m["default"]),
-      );
-    } catch {
-      console.error("no dashboard configuration defined");
-    }
-  }
-  return eodash;
-};
-
-/**
- * Loads font in the app using `webfontloader`
- *
- * @param {string} [family]
- * @param {string} [link]
- * @param {boolean} [isWebComponent]
- * @returns {Promise<string>} - Font family name
- * @see {@link "https://github.com/typekit/webfontloader"}
- */
-const loadFont = async (
-  family = "",
-  link = "",
-  isWebComponent = false,
-) => {
-  if (family && link) {
-    const WebFontLoader = (await import('webfontloader')).default;
-    WebFontLoader.load({
-      classes: false,
-      custom: {
-        // Use FVD notation to include families https://github.com/typekit/fvd
-        families: [family],
-        // Path to stylesheet that defines font-face
-        urls: [link],
-      },
-      fontactive(familyName, _fvd) {
-        const stylesheet = new CSSStyleSheet();
-        const styles = isWebComponent
-          ? `eo-dash {font-family: ${familyName};}`
-          : `* {font-family: ${familyName};}`;
-        stylesheet.replaceSync(styles);
-        document.adoptedStyleSheets.push(stylesheet);
-      },
-      fontinactive(familyName, _fvd) {
-        throw new Error(`error loading font: ${familyName}`);
-      },
-    });
-  }
-  return family;
-};
-
-/**
- *  @param {string} text
- *  @param {import("vue").Ref<boolean>} showIcon
- **/
-const copyToClipBoard = async (text, showIcon) => {
-  await navigator.clipboard.writeText(text);
-  showIcon.value = true;
-  setTimeout(() => {
-    showIcon.value = false;
-  }, 2000);
-};
-
-/**
- * @typedef {{
- *   component: import("vue").Component | null;
- *   props: Record<string, unknown>;
- *   title: string;
- *   id: string | number | symbol;
- *   layout: { x: number; y: number; h: number; w: number };
- * }} DefinedWidget
- */
-
-/** @typedef {import("vue").ShallowRef<DefinedWidget>} ReactiveDefinedWidget */
-
-const internalWidgets = (() => {
-  /** @type {Record<string, () => Promise<import("vue").Component>>} */
-  const importMap = {
-    .../* #__PURE__ */ Object.assign({"/widgets/EodashDatePicker.vue": () => import('./EodashDatePicker-VVkiPmpc.js'),"/widgets/EodashItemFilter.vue": () => import('./EodashItemFilter-CugWNQ86.js'),"/widgets/EodashLayerControl.vue": () => import('./EodashLayerControl-53WghA8G.js'),"/widgets/EodashMap.vue": () => import('./EodashMap-CQnOePpy.js'),"/widgets/EodashMapBtns.vue": () => import('./EodashMapBtns-uaRwFtfB.js'),"/widgets/EodashProcess.vue": () => import('./EodashProcess-cF0unIy8.js'),"/widgets/ExportState.vue": () => import('./ExportState-BT8MLAW7.js'),"/widgets/PopUp.vue": () => import('./PopUp-Bm01q7Ko.js'),"/widgets/WidgetsContainer.vue": () => import('./WidgetsContainer-CwXRRLS1.js')}),
-    .../* #__PURE__ */ Object.assign({}),
-  };
-  for (const key in importMap) {
-    const newKey = /** @type {string} */ (key.split("/").at(-1)).slice(0, -4);
-    Object.defineProperty(
-      importMap,
-      newKey,
-      /** @type {PropertyDescriptor} */ (
-        Object.getOwnPropertyDescriptor(importMap, key)
-      ),
-    );
-    delete importMap[key];
-  }
-  return importMap;
-})();
-
-/**
- * Composable that converts widgets Configurations to defined imported widgets
- *
- * @param {(
- *       | import("@/types").Widget
- *       | import("@/types").BackgroundWidget
- *       | Omit<import("@/types").Widget, "layout">
- *       | undefined
- *     )[]
- *   | undefined} widgetConfigs
- * @returns {ReactiveDefinedWidget[]}
- */
-const useDefineWidgets = (widgetConfigs) => {
-  /** @type {ReactiveDefinedWidget[]} */
-  const definedWidgets = [];
-
-  for (const config of widgetConfigs ?? []) {
-    /** @type {ReactiveDefinedWidget} */
-    const definedWidget = shallowRef({
-      component: null,
-      props: {},
-      title: "",
-      id: Symbol(),
-      layout: { x: 0, y: 0, h: 0, w: 0 },
-    });
-
-    if ("defineWidget" in (config ?? {})) {
-      const { selectedStac } = storeToRefs(useSTAcStore());
-      watch(
-        selectedStac,
-        (updatedStac) => {
-          let definedConfig =
-            /** @type {import("@/types").FunctionalWidget} */ (
-              config
-            )?.defineWidget(updatedStac);
-          if (definedConfig) {
-            definedConfig = reactive(definedConfig);
-          }
-          definedWidget.value =
-            definedWidget.value.id === definedConfig?.id
-              ? definedWidget.value
-              : getWidgetDefinition(definedConfig);
-        },
-        { immediate: true },
-      );
-    } else {
-      definedWidget.value = getWidgetDefinition(
-        /** @type {import("@/types").StaticWidget} */ (config),
-      );
-    }
-    definedWidgets.push(definedWidget);
-  }
-  return definedWidgets;
-};
-
-/**
- * Converts a static widget configuration to a defined imported widget
- *
- * @param {import("@/types").StaticWidget
- *   | Omit<import("@/types").StaticWidget, "layout">
- *   | undefined
- *   | null} [config]
- * @returns {DefinedWidget}
- */
-const getWidgetDefinition = (config) => {
-  /** @type {DefinedWidget} */
-  const importedWidget = {
-    component: null,
-    props: {},
-    title: "",
-    id: Symbol(),
-    layout: reactive({ x: 0, y: 0, h: 0, w: 0 }),
-  };
-  switch (config?.type) {
-    case "internal":
-      importedWidget.component = defineAsyncComponent({
-        loader:
-          internalWidgets[
-            /** @type {import("@/types").InternalComponentWidget} * */ (config)
-              ?.widget.name
-          ],
-        suspensible: true,
-      });
-      importedWidget.props = reactive(
-        /** @type {import("@/types").InternalComponentWidget} * */ (config)
-          ?.widget.properties ?? {},
-      );
-
-      break;
-
-    case "web-component":
-      importedWidget.component = defineAsyncComponent({
-        loader: () => import('./DynamicWebComponent-Cv8n457T.js'),
-        suspensible: true,
-      });
-      importedWidget.props = reactive(config.widget);
-
-      break;
-    case "iframe":
-      importedWidget.component = defineAsyncComponent({
-        loader: () => import('./IframeWrapper-BgM9aU8f.js'),
-        suspensible: true,
-      });
-      importedWidget.props = reactive(config.widget);
-      break;
-
-    default:
-      if (!config) {
-        return importedWidget;
-      } else {
-        console.error("Widget type not found");
-      }
-      break;
+  try {
+    const configJs = "/config.js";
+    assignInstance(
+      (await import(/* @vite-ignore */ new URL(configJs, import.meta.url).href))
+        .default,
+    );
+  } catch {
+    try {
+      assignInstance(
+        await Promise.resolve().then(() => eodash$1).then(async (m) => await m["default"]),
+      );
+    } catch {
+      console.error("no dashboard configuration defined");
+    }
   }
-  importedWidget.title = config?.title ?? "";
-  importedWidget.id = config?.id ?? importedWidget.id;
+  return eodash;
+};
 
-  if ("layout" in config) {
-    importedWidget.layout.x = config.layout.x;
-    importedWidget.layout.y = config.layout.y;
-    importedWidget.layout.h = config.layout.h;
-    importedWidget.layout.w = config.layout.w;
+/**
+ * Loads font in the app using `webfontloader`
+ *
+ * @param {string} [family]
+ * @param {string} [link]
+ * @param {boolean} [isWebComponent]
+ * @returns {Promise<string>} - Font family name
+ * @see {@link "https://github.com/typekit/webfontloader"}
+ */
+const loadFont = async (
+  family = "",
+  link = "",
+  isWebComponent = false,
+) => {
+  if (family && link) {
+    const WebFontLoader = (await import('webfontloader')).default;
+    WebFontLoader.load({
+      classes: false,
+      custom: {
+        // Use FVD notation to include families https://github.com/typekit/fvd
+        families: [family],
+        // Path to stylesheet that defines font-face
+        urls: [link],
+      },
+      fontactive(familyName, _fvd) {
+        const stylesheet = new CSSStyleSheet();
+        const styles = isWebComponent
+          ? `eo-dash {font-family: ${familyName};}`
+          : `* {font-family: ${familyName};}`;
+        stylesheet.replaceSync(styles);
+        document.adoptedStyleSheets.push(stylesheet);
+      },
+      fontinactive(familyName, _fvd) {
+        throw new Error(`error loading font: ${familyName}`);
+      },
+    });
   }
-  return importedWidget;
+  return family;
+};
+
+/**
+ *  @param {string} text
+ *  @param {import("vue").Ref<boolean>} showIcon
+ **/
+const copyToClipBoard = async (text, showIcon) => {
+  await navigator.clipboard.writeText(text);
+  showIcon.value = true;
+  setTimeout(() => {
+    showIcon.value = false;
+  }, 2000);
 };
 
 const _export_sfc = (sfc, props) => {
@@ -11073,6 +11174,226 @@ return (_ctx, _cache) => {
 };
 const ErrorAlert = /*#__PURE__*/_export_sfc(_sfc_main$3, [['__scopeId',"data-v-ac10aa7f"]]);
 
+/**
+ * @typedef {{
+ *   component: import("vue").Component | null;
+ *   props: Record<string, unknown>;
+ *   title: string;
+ *   id: string | number | symbol;
+ *   layout: { x: number; y: number; h: number; w: number };
+ * }} DefinedWidget
+ */
+
+/** @typedef {import("vue").ShallowRef<DefinedWidget>} ReactiveDefinedWidget */
+/**
+ * Widgets import map that is created from eodash internals and user defined widgets
+ */
+const internalWidgets = (() => {
+  /** @type {Record<string, () => Promise<import("vue").Component>>} */
+  const importMap = {
+    .../* #__PURE__ */ Object.assign({"/widgets/EodashDatePicker.vue": () => import('./EodashDatePicker-BGSS2ZYK.js'),"/widgets/EodashItemFilter.vue": () => import('./EodashItemFilter-CFNKjm_Z.js'),"/widgets/EodashLayerControl.vue": () => import('./EodashLayerControl-CzffoPUs.js'),"/widgets/EodashLayoutSwitcher.vue": () => import('./EodashLayoutSwitcher-DM0zDhvI.js'),"/widgets/EodashMap.vue": () => import('./EodashMap-BdFZ657e.js'),"/widgets/EodashMapBtns.vue": () => import('./EodashMapBtns-rC_IPD-Z.js'),"/widgets/EodashProcess.vue": () => import('./EodashProcess-SLsTISKV.js'),"/widgets/EodashStacInfo.vue": () => import('./EodashStacInfo-DFD0gtWm.js'),"/widgets/EodashTools.vue": () => import('./EodashTools-ImohD2ys.js'),"/widgets/ExportState.vue": () => import('./ExportState-LNZAovzM.js'),"/widgets/PopUp.vue": () => import('./PopUp-B0_c0207.js'),"/widgets/WidgetsContainer.vue": () => import('./WidgetsContainer-sD1vDnhF.js')}),
+    .../* #__PURE__ */ Object.assign({}),
+  };
+  for (const key in importMap) {
+    const newKey = /** @type {string} */ (key.split("/").at(-1)).slice(0, -4);
+    Object.defineProperty(
+      importMap,
+      newKey,
+      /** @type {PropertyDescriptor} */ (
+        Object.getOwnPropertyDescriptor(importMap, key)
+      ),
+    );
+    delete importMap[key];
+  }
+  return importMap;
+})();
+
+/**
+ * Composable that converts widgets Configurations to defined imported widgets
+ *
+ * @param {(
+ *       | import("@/types").Widget
+ *       | import("@/types").BackgroundWidget
+ *       | Omit<import("@/types").Widget, "layout">
+ *       | undefined
+ *     )[]
+ *   | undefined} widgetConfigs
+ */
+const useDefineWidgets = (widgetConfigs) => {
+  /** @type {ReactiveDefinedWidget[]} */
+  const definedWidgets = [];
+
+  for (const config of widgetConfigs ?? []) {
+    /** @type {ReactiveDefinedWidget} */
+    const definedWidget = shallowRef({
+      component: null,
+      props: {},
+      title: "",
+      id: Symbol(),
+      layout: { x: 0, y: 0, h: 0, w: 0 },
+    });
+
+    if ("defineWidget" in (config ?? {})) {
+      const { selectedStac } = storeToRefs(useSTAcStore());
+      watch(
+        selectedStac,
+        (updatedStac) => {
+          let definedConfig =
+            /** @type {import("@/types").FunctionalWidget} */ (
+              config
+            )?.defineWidget(updatedStac);
+          if (definedConfig) {
+            definedConfig = reactive(definedConfig);
+          }
+          definedWidget.value =
+            definedWidget.value.id === definedConfig?.id
+              ? definedWidget.value
+              : getWidgetDefinition(definedConfig);
+        },
+        { immediate: true },
+      );
+    } else {
+      definedWidget.value = getWidgetDefinition(
+        /** @type {import("@/types").StaticWidget} */ (config),
+      );
+    }
+    definedWidgets.push(definedWidget);
+  }
+  return definedWidgets;
+};
+
+/**
+ * Converts a static widget configuration to a defined imported widget
+ *
+ * @param {import("@/types").StaticWidget
+ *   | Omit<import("@/types").StaticWidget, "layout">
+ *   | undefined
+ *   | null} [config]
+ * @returns {DefinedWidget}
+ */
+const getWidgetDefinition = (config) => {
+  /** @type {DefinedWidget} */
+  const importedWidget = {
+    component: null,
+    props: {},
+    title: "",
+    id: Symbol(),
+    layout: reactive({ x: 0, y: 0, h: 0, w: 0 }),
+  };
+  switch (config?.type) {
+    case "internal":
+      importedWidget.component = defineAsyncComponent({
+        loader:
+          internalWidgets[
+            /** @type {import("@/types").InternalComponentWidget} * */ (config)
+              ?.widget.name
+          ],
+        suspensible: true,
+      });
+      importedWidget.props = reactive(
+        /** @type {import("@/types").InternalComponentWidget} * */ (config)
+          ?.widget.properties ?? {},
+      );
+
+      break;
+
+    case "web-component":
+      importedWidget.component = defineAsyncComponent({
+        loader: () => import('./DynamicWebComponent-CBSgT677.js'),
+        suspensible: true,
+      });
+      importedWidget.props = reactive(config.widget);
+
+      break;
+    case "iframe":
+      importedWidget.component = defineAsyncComponent({
+        loader: () => import('./IframeWrapper-BgM9aU8f.js'),
+        suspensible: true,
+      });
+      importedWidget.props = reactive(config.widget);
+      break;
+
+    default:
+      if (!config) {
+        return importedWidget;
+      } else {
+        console.error("Widget type not found");
+      }
+      break;
+  }
+  importedWidget.title = config?.title ?? "";
+  importedWidget.id = config?.id ?? importedWidget.id;
+
+  if ("layout" in config) {
+    importedWidget.layout.x = config.layout.x;
+    importedWidget.layout.y = config.layout.y;
+    importedWidget.layout.h = config.layout.h;
+    importedWidget.layout.w = config.layout.w;
+  }
+  return importedWidget;
+};
+
+/**
+ * @typedef {{
+ * bgWidget:ReturnType< typeof import("./DefineWidgets").useDefineWidgets>[number]| import("vue").ShallowRef<null>
+ * loading: ReturnType< typeof import("./DefineWidgets").useDefineWidgets>[number]| import("vue").ShallowRef<null>
+ * importedWidgets:ReturnType< typeof import("./DefineWidgets").useDefineWidgets>
+ * gap: import("vue").Ref<number>
+ * }} DefinedTemplate
+ **/
+
+const useTemplate = () => {
+  const eodash = /** @type {import("@/types").Eodash} */ (inject$1(eodashKey));
+
+  /** @type {DefinedTemplate} */
+  const definedTemplate = shallowReactive({
+    bgWidget: shallowRef(null),
+    importedWidgets: [],
+    loading: shallowRef(null),
+    gap: ref(16),
+  });
+
+  if ("template" in eodash) {
+    [definedTemplate.bgWidget] = useDefineWidgets([eodash.template.background]);
+    [definedTemplate.loading] = useDefineWidgets([eodash.template.loading]);
+    definedTemplate.importedWidgets = useDefineWidgets(eodash.template.widgets);
+    definedTemplate.gap.value = eodash.template.gap ?? 16;
+  } else {
+    watch(
+      activeTemplate,
+      (template) => {
+        log.debug("Active template watcher triggered, changing to:", template);
+        if (!template) {
+          template = Object.keys(eodash.templates)[0];
+          activeTemplate.value = template ?? "";
+          log.debug("No template found, setting to first template", template);
+        }
+
+        if (!template || !eodash.templates[template]) {
+          console.error(`[eodash] template not found`);
+          return;
+        }
+
+        const templateConfig = eodash.templates[template];
+        [definedTemplate.bgWidget] = useDefineWidgets([
+          templateConfig.background,
+        ]);
+
+        [definedTemplate.loading] = useDefineWidgets([templateConfig.loading]);
+
+        definedTemplate.importedWidgets = useDefineWidgets(
+          templateConfig.widgets,
+        );
+        definedTemplate.gap.value = templateConfig.gap ?? 16;
+      },
+      { immediate: true },
+    );
+  }
+  return toRefs(definedTemplate);
+};
+
+const useDefineTemplate = createSharedComposable(useTemplate);
+
 // Styles
 const breakpointProps = (() => {
   return breakpoints.reduce((props, val) => {
@@ -11317,9 +11638,7 @@ const _sfc_main$2 = {
   __name: 'Loading',
   setup(__props) {
 
-const eodash = /** @type {import("@/types").Eodash} */ (inject$1(eodashKey));
-
-const [loading] = useDefineWidgets([eodash.template.loading]);
+const { loading } = useDefineTemplate();
 
 const error = ref("");
 onErrorCaptured((e, inst, info) => {
@@ -11347,8 +11666,8 @@ return (_ctx, _cache) => {
               createElementVNode("div", { class: "text-center" }, "Loading...", -1 /* HOISTED */)
             ])),
             default: withCtx(() => [
-              (unref(loading).component)
-                ? (openBlock(), createBlock(resolveDynamicComponent(unref(loading).component), normalizeProps(mergeProps({ key: 0 }, unref(loading).props)), null, 16 /* FULL_PROPS */))
+              (unref(loading)?.component)
+                ? (openBlock(), createBlock(resolveDynamicComponent(unref(loading)?.component), normalizeProps(mergeProps({ key: 0 }, unref(loading)?.props)), null, 16 /* FULL_PROPS */))
                 : (openBlock(), createElementBlock("div", _hoisted_1$1, "Loading..."))
             ]),
             _: 1 /* STABLE */
@@ -11412,15 +11731,17 @@ const { loadSTAC } = useSTAcStore();
 );
 
 const { smAndDown } = useDisplay();
-const TemplateComponent = smAndDown.value
-  ? defineAsyncComponent(() => import('./MobileLayout-BAo8Wr8T.js'))
-  : defineAsyncComponent(() => import('./DashboardLayout-CVMJ4l8M.js'));
+const TemplateComponent = computed(() =>
+  smAndDown.value
+    ? defineAsyncComponent(() => import('./MobileLayout-OM6Wc-vj.js'))
+    : defineAsyncComponent(() => import('./DashboardLayout-FS5inBIm.js')),
+);
 
 const HeaderComponent = defineAsyncComponent(
-  () => import('./Header-D2dtCWp8.js'),
+  () => import('./Header-CcvXFqqt.js'),
 );
 const FooterComponent = defineAsyncComponent(
-  () => import('./Footer-C6GUG84G.js'),
+  () => import('./Footer-c19dV1ZR.js'),
 );
 
 const templateHeight = props.isWebComponent ? "100%" : "100dvh";
@@ -11572,6 +11893,7 @@ const vuetify = createVuetify({
       next: [mdiChevronRight],
       prev: [mdiChevronLeft],
       subgroup: [mdiMenuDown],
+      plus: [mdiPlus],
     },
   },
   theme: {
@@ -11605,7 +11927,7 @@ function registerPlugins(app) {
  *  @type {import("vue").VueElementConstructor<
  *  import("vue").ExtractPropTypes<{ config: string }>>}
  * */
-const Eodash = defineCustomElement(_sfc_main, {
+const EodashConstructor = defineCustomElement(_sfc_main, {
   shadowRoot: false,
   configureApp(app) {
     registerPlugins(app);
@@ -11613,9 +11935,9 @@ const Eodash = defineCustomElement(_sfc_main, {
 });
 
 function register() {
-  customElements.define("eo-dash", Eodash);
+  customElements.define("eo-dash", EodashConstructor);
 }
 
 register();
 
-export { datetime as $, makeDensityProps as A, useDensity as B, useBackgroundColor as C, provideDefaults as D, isObject as E, eodashKey as F, useDefineWidgets as G, useLayout as H, IconValue as I, makeDimensionProps as J, useDimension as K, makeBorderProps as L, makeElevationProps as M, makeRoundedProps as N, useBorder as O, useElevation as P, useRounded as Q, VDefaultsProvider as R, clamp as S, consoleWarn as T, makeLayoutItemProps as U, VBtn as V, useToggleScope as W, useLayoutItem as X, getUid as Y, consoleError as Z, _export_sfc as _, useRender as a, useSTAcStore as a0, eodashCollections as a1, VRow as a2, mapCompareEl as a3, mapEl as a4, eodashCompareCollections as a5, getColFromLayer as a6, eoxLayersKey as a7, setMapProjFromCol as a8, EodashCollection as a9, copyToClipBoard as aA, SUPPORTS_INTERSECTION as aB, getCurrentInstance as aC, isOn as aD, eventName as aE, destructComputed as aF, parseAnchor as aG, flipSide as aH, flipAlign as aI, flipCorner as aJ, getAxis as aK, defer as aL, templateRef as aM, matchesSelector as aN, useRouter as aO, useBackButton as aP, Eodash as aQ, register as aR, store as aS, mapPosition as aa, makePanelTransparent as ab, availableMapProjection as ac, changeMapProjection as ad, axios$1 as ae, getLayers as af, extractLayerConfig as ag, useOnLayersUpdate as ah, createSimpleFunctional as ai, makeSizeProps as aj, makeVariantProps as ak, useVariant as al, useSize as am, genOverlays as an, makeLoaderProps as ao, makeLocationProps as ap, makePositionProps as aq, makeRouterProps as ar, Ripple as as, useLoader as at, useLocation as au, usePosition as av, useLink as aw, LoaderSlot as ax, removeUnneededProperties as ay, VCol as az, makeComponentProps as b, makeTagProps as c, makeThemeProps as d, provideTheme as e, useRtl as f, genericComponent as g, useLocale as h, useGroup as i, useProxiedModel as j, keys as k, makeGroupItemProps as l, makeVBtnProps as m, useGroupItem as n, omit as o, propsFactory as p, convertToUnit as q, makeDisplayProps as r, makeGroupProps as s, useDisplay as t, useTextColor as u, useResizeObserver as v, useGoTo as w, IN_BROWSER as x, VIcon as y, focusableChildren as z };
+export { useSTAcStore as $, makeDensityProps as A, useDensity as B, useBackgroundColor as C, provideDefaults as D, isObject as E, useDefineTemplate as F, useLayout as G, makeDimensionProps as H, IconValue as I, useDimension as J, makeBorderProps as K, makeElevationProps as L, makeRoundedProps as M, useBorder as N, useElevation as O, useRounded as P, VDefaultsProvider as Q, clamp as R, consoleWarn as S, makeLayoutItemProps as T, useToggleScope as U, VBtn as V, useLayoutItem as W, eodashKey as X, consoleError as Y, datetime as Z, _export_sfc as _, useRender as a, eodashCollections as a0, makePanelTransparent as a1, mapCompareEl as a2, mapEl as a3, eodashCompareCollections as a4, getColFromLayer as a5, registerProjection as a6, getProjectionCode as a7, availableMapProjection as a8, changeMapProjection as a9, useLink as aA, LoaderSlot as aB, removeUnneededProperties as aC, VRow as aD, VCol as aE, copyToClipBoard as aF, SUPPORTS_INTERSECTION as aG, getCurrentInstance as aH, useDefineWidgets as aI, isOn as aJ, eventName as aK, destructComputed as aL, parseAnchor as aM, flipSide as aN, flipAlign as aO, flipCorner as aP, getAxis as aQ, defer as aR, templateRef as aS, matchesSelector as aT, useRouter as aU, useBackButton as aV, EodashConstructor as aW, register as aX, store as aY, eoxLayersKey as aa, posIsSetFromUrl as ab, EodashCollection as ac, mapPosition as ad, setActiveTemplate as ae, axios$1 as af, getLayers as ag, extractLayerConfig as ah, useOnLayersUpdate as ai, currentUrl as aj, activeTemplate as ak, getUid as al, createSimpleFunctional as am, makeSizeProps as an, makeVariantProps as ao, useVariant as ap, useSize as aq, genOverlays as ar, makeLoaderProps as as, makeLocationProps as at, makePositionProps as au, makeRouterProps as av, Ripple as aw, useLoader as ax, useLocation as ay, usePosition as az, makeComponentProps as b, makeTagProps as c, makeThemeProps as d, provideTheme as e, useRtl as f, genericComponent as g, useLocale as h, useGroup as i, useProxiedModel as j, keys as k, makeGroupItemProps as l, makeVBtnProps as m, useGroupItem as n, omit as o, propsFactory as p, convertToUnit as q, makeDisplayProps as r, makeGroupProps as s, useDisplay as t, useTextColor as u, useResizeObserver as v, useGoTo as w, IN_BROWSER as x, VIcon as y, focusableChildren as z };