@vcmap/ui 6.2.0-rc.1 → 6.2.0-rc.2

package/dist/assets/ui.js

@@ -1 +1 @@
-export * from "./ui-4f308e45.js";
+export * from "./ui-aadb7707.js";

package/dist/assets/vue.js

@@ -1 +1 @@
-export * from "./vue-62303c82.js";
+export * from "./vue-d7691a29.js";

package/dist/assets/{vuetify-99195777.js → vuetify-533fb61b.js}

@@ -10,7 +10,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify-99195777.css');import { watch as Q, onScopeDispose as Ze, effectScope as Zl, shallowRef as K, Fragment as ie, reactive as it, computed as b, watchEffect as Fe, toRefs as Yt, capitalize as Nn, isVNode as Rc, Comment as Nc, unref as ot, warn as ja, getCurrentInstance as Hc, ref as j, provide as De, inject as ye, defineComponent as zc, camelize as Ir, h as Gt, toRaw as Be, createVNode as r, mergeProps as O, onBeforeUnmount as Qe, readonly as Ql, onDeactivated as _r, onActivated as Wc, onMounted as Ye, nextTick as we, TransitionGroup as Jl, Transition as jt, isRef as Tn, toRef as $, onBeforeMount as ra, withDirectives as $e, resolveDirective as gt, vShow as Ct, onUpdated as jc, Text as Uc, resolveDynamicComponent as Yc, markRaw as Gc, Teleport as Kc, cloneVNode as qc, createTextVNode as Tt, onUnmounted as Tr, onBeforeUpdate as Xc, withModifiers as Tl, toDisplayString as Zc, vModelText as Qc, resolveComponent as Jc, render as Ar } from "./vue-62303c82.js";
+} await loadCss('./assets/vuetify-533fb61b.css');import { watch as Q, onScopeDispose as Ze, effectScope as Zl, shallowRef as K, Fragment as ie, reactive as it, computed as b, watchEffect as Fe, toRefs as Yt, capitalize as Nn, isVNode as Rc, Comment as Nc, unref as ot, warn as ja, getCurrentInstance as Hc, ref as j, provide as De, inject as ye, defineComponent as zc, camelize as Ir, h as Gt, toRaw as Be, createVNode as r, mergeProps as O, onBeforeUnmount as Qe, readonly as Ql, onDeactivated as _r, onActivated as Wc, onMounted as Ye, nextTick as we, TransitionGroup as Jl, Transition as jt, isRef as Tn, toRef as $, onBeforeMount as ra, withDirectives as $e, resolveDirective as gt, vShow as Ct, onUpdated as jc, Text as Uc, resolveDynamicComponent as Yc, markRaw as Gc, Teleport as Kc, cloneVNode as qc, createTextVNode as Tt, onUnmounted as Tr, onBeforeUpdate as Xc, withModifiers as Tl, toDisplayString as Zc, vModelText as Qc, resolveComponent as Jc, render as Ar } from "./vue-d7691a29.js";
 function rt(e, n) {
   let t;
   function a() {

package/dist/assets/vuetify.js

@@ -1 +1 @@
-export * from "./vuetify-99195777.js";
+export * from "./vuetify-533fb61b.js";

package/index.d.ts

@@ -31,6 +31,12 @@ export { default as ToggleNavbarButtonCallback } from "./src/callback/toggleNavb
 export type * from "./src/callback/toggleNavbarButtonCallback.d.ts";
 export { default as ToggleToolbarButtonCallback } from "./src/callback/toggleToolbarButtonCallback.js";
 export type * from "./src/callback/toggleToolbarButtonCallback.d.ts";
+export { default as ActivateMapCallback } from "./src/callback/activateMapCallback.js";
+export type * from "./src/callback/activateMapCallback.d.ts";
+export { default as ActivateOverviewMapCallback } from "./src/callback/activateOverviewMapCallback.js";
+export type * from "./src/callback/activateOverviewMapCallback.d.ts";
+export { default as DeactivateOverviewMapCallback } from "./src/callback/deactivateOverviewMapCallback.js";
+export type * from "./src/callback/deactivateOverviewMapCallback.d.ts";
 export { default as VcsNavbar } from "./src/application/VcsNavbar.vue";
 export type * from "./src/application/VcsNavbar.vue.d.ts";
 export { default as VcsAppWrapper } from "./src/application/VcsAppWrapper.vue";
@@ -255,6 +261,8 @@ export { default as VcsFeatureStyleComponent } from "./src/components/style/VcsF
 export type * from "./src/components/style/VcsFeatureStyleComponent.vue.d.ts";
 export { default as AbstractConfigEditor } from "./src/components/plugins/AbstractConfigEditor.vue";
 export type * from "./src/components/plugins/AbstractConfigEditor.vue.d.ts";
+export { default as AbstractWorkspaceItemCreator } from "./src/components/plugins/AbstractWorkspaceItemCreator.vue";
+export type * from "./src/components/plugins/AbstractWorkspaceItemCreator.vue.d.ts";
 export { default as VcsFileDrop } from "./src/components/import/VcsFileDrop.vue";
 export type * from "./src/components/import/VcsFileDrop.vue.d.ts";
 export { default as VcsImportComponent } from "./src/components/import/VcsImportComponent.vue";

package/index.js

@@ -66,6 +66,9 @@ export { default as OpenSplashScreenCallback } from './src/callback/openSplashSc
 export { default as CloseSplashScreenCallback } from './src/callback/closeSplashScreenCallback.js';
 export { default as ToggleNavbarButtonCallback } from './src/callback/toggleNavbarButtonCallback.js';
 export { default as ToggleToolbarButtonCallback } from './src/callback/toggleToolbarButtonCallback.js';
+export { default as ActivateMapCallback } from './src/callback/activateMapCallback.js';
+export { default as ActivateOverviewMapCallback } from './src/callback/activateOverviewMapCallback.js';
+export { default as DeactivateOverviewMapCallback } from './src/callback/deactivateOverviewMapCallback.js';
 export { default as VcsNavbar } from './src/application/VcsNavbar.vue';
 export {
   default as VcsApp,
@@ -358,6 +361,7 @@ export { default as VcsFeatureTransforms } from './src/components/vector-propert
 export { default as VcsSnapTo } from './src/components/vector-properties/VcsSnapTo.vue';
 export { default as VcsFeatureStyleComponent } from './src/components/style/VcsFeatureStyleComponent.vue';
 export { default as AbstractConfigEditor } from './src/components/plugins/AbstractConfigEditor.vue';
+export { default as AbstractWorkspaceItemCreator } from './src/components/plugins/AbstractWorkspaceItemCreator.vue';
 export { default as VcsFileDrop } from './src/components/import/VcsFileDrop.vue';
 export { default as VcsImportComponent } from './src/components/import/VcsImportComponent.vue';
 export { default as VcsExpansionPanel } from './src/components/section/VcsExpansionPanel.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.2.0-rc.1",
+  "version": "6.2.0-rc.2",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -45,7 +45,7 @@
   ],
   "dependencies": {
     "@intlify/core-base": "^9.13.1",
-    "@vcsuite/check": "^2.1.0",
+    "@vcsuite/check": "^3.0.0",
     "@vcsuite/logger": "^1.0.1",
     "@vcsuite/parsers": "^2.0.1",
     "dompurify": "^3.2.4",
@@ -56,8 +56,8 @@
     "vue-i18n": "^9.13.1"
   },
   "peerDependencies": {
-    "@vcmap-cesium/engine": "^11.0.2",
-    "@vcmap/core": "^6.1.6",
+    "@vcmap-cesium/engine": "^11.0.3",
+    "@vcmap/core": "6.2.0-rc.1",
     "ol": "^10.4.0",
     "vue": "~3.4.38",
     "vuetify": "~3.7.14"

package/plugins/@vcmap-show-case/panorama-inspector/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@vcmap-show-case/panorama-inspector",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "description": "",
+  "mapVersion": "^6.2"
+}

package/plugins/@vcmap-show-case/panorama-inspector/src/PanoramaDebugInfo.vue

@@ -0,0 +1,86 @@
+<script setup>
+  import { inject, shallowRef, onUnmounted } from 'vue';
+  import {
+    VcsCheckbox,
+    VcsFormSection,
+    VcsTextField,
+    VcsLabel,
+  } from '@vcmap/ui';
+  import { VContainer, VRow, VCol } from 'vuetify/components';
+
+  const app = inject('vcsApp');
+  /** @type {import("@vcmap/core").PanoramaMap} */
+  const map = app.maps.activeMap; // better be a panorama map;
+
+  const image = shallowRef(map.currentPanoramaImage);
+  const listener = map.currentImageChanged.addEventListener((newImage) => {
+    image.value = newImage;
+  });
+
+  onUnmounted(() => {
+    listener();
+  });
+</script>
+
+<template>
+  <vcs-form-section heading="Information">
+    <v-container class="py-0 px-1">
+      <v-row no-gutters>
+        <v-col>
+          <vcs-label>Image Name</vcs-label>
+        </v-col>
+        <v-col>
+          <vcs-text-field
+            readonly
+            :disabled="true"
+            :model-value="image?.name ?? 'No Image'"
+          />
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <vcs-label>Levels</vcs-label>
+        </v-col>
+        <v-col>
+          <vcs-text-field
+            readonly
+            :disabled="true"
+            :model-value="`${image?.minLevel ?? '0'} - ${image?.maxLevel ?? '0'}`"
+          />
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <vcs-label>Tile Size</vcs-label>
+        </v-col>
+        <v-col>
+          <vcs-text-field
+            readonly
+            :disabled="true"
+            :model-value="image.tileSize.join(' x ') ?? 'No Tile Size'"
+          />
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col> <vcs-label>Has Intensity</vcs-label> </v-col>
+        <v-col>
+          <vcs-checkbox
+            :disabled="true"
+            :model-value="image?.hasIntensity ?? false"
+          />
+        </v-col>
+      </v-row>
+      <v-row no-gutters v-if="image">
+        <v-col> <vcs-label>Has Depth</vcs-label> </v-col>
+        <v-col>
+          <vcs-checkbox
+            :disabled="true"
+            :model-value="image?.hasDepth ?? false"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </vcs-form-section>
+</template>
+
+<style scoped lang="scss"></style>

package/plugins/@vcmap-show-case/panorama-inspector/src/PanoramaDebugTools.vue

@@ -0,0 +1,259 @@
+<script setup>
+  import { inject, onUnmounted, ref, shallowRef, watch } from 'vue';
+  import { VcsCheckbox, VcsFormSection, VcsLabel, VcsSlider } from '@vcmap/ui';
+  import { Color } from '@vcmap-cesium/engine';
+  import {
+    VContainer,
+    VRow,
+    VCol,
+    VColorPicker,
+    VMenu,
+    VCard,
+  } from 'vuetify/components';
+  import {
+    cesiumColorToColor,
+    getStringColor,
+    PanoramaOverlayMode,
+  } from '@vcmap/core';
+  import {
+    createMapMarkerAction,
+    createOsmGlobeAction,
+    setupClickedPrimitive,
+  } from './api.js';
+  import { name } from '../package.json';
+
+  const app = inject('vcsApp');
+  /** @type {import("@vcmap/core").PanoramaMap} */
+  const map = app.maps.activeMap; // better be a panorama map;
+  const clickedPrimitive = setupClickedPrimitive(
+    map,
+    app.plugins.getByKey(name).clickedInteraction,
+  );
+
+  const showClickedPosition = ref(false);
+  watch(showClickedPosition, (newShowClickedPosition) => {
+    clickedPrimitive.show = newShowClickedPosition;
+  });
+
+  const { scene } = map.getCesiumWidget();
+  const enableCesiumInteraction = ref(
+    scene.screenSpaceCameraController.enableInputs,
+  );
+
+  watch(enableCesiumInteraction, (newEnableCesiumInteraction) => {
+    scene.screenSpaceCameraController.enableInputs = newEnableCesiumInteraction;
+
+    if (!newEnableCesiumInteraction) {
+      scene.camera.setView({
+        destination: map.currentPanoramaImage.position,
+        orientation: map.currentPanoramaImage.orientation,
+      });
+    }
+  });
+
+  const { action, destroy } = createOsmGlobeAction(app);
+  const { action: hideMarker, destroy: destroyMarker } =
+    createMapMarkerAction(app);
+
+  const suspendTileLoading = ref(map.panoramaView.suspendTileLoading);
+  watch(suspendTileLoading, (newSuspendTileLoading) => {
+    map.panoramaView.suspendTileLoading = newSuspendTileLoading;
+  });
+
+  const opacity = ref(map.panoramaView.tilePrimitiveCollection.opacity);
+  watch(opacity, (newOpacity) => {
+    map.panoramaView.tilePrimitiveCollection.opacity = newOpacity;
+  });
+
+  const overlayOpacity = ref(
+    map.panoramaView.tilePrimitiveCollection.overlayOpacity,
+  );
+  watch(overlayOpacity, (newOverlayOpacity) => {
+    map.panoramaView.tilePrimitiveCollection.overlayOpacity = newOverlayOpacity;
+  });
+
+  const overlayNaNColor = shallowRef(
+    getStringColor(
+      cesiumColorToColor(
+        map.panoramaView.tilePrimitiveCollection.overlayNaNColor,
+      ),
+    ),
+  );
+  watch(overlayNaNColor, (newOverlayNaNColor) => {
+    map.panoramaView.tilePrimitiveCollection.overlayNaNColor =
+      Color.fromCssColorString(newOverlayNaNColor);
+  });
+
+  const cursorColor = shallowRef(
+    getStringColor(
+      cesiumColorToColor(map.panoramaView.tilePrimitiveCollection.cursorColor),
+    ),
+  );
+  watch(cursorColor, (newCursorColor) => {
+    map.panoramaView.tilePrimitiveCollection.cursorColor =
+      Color.fromCssColorString(newCursorColor);
+  });
+
+  const showIntensity = ref(
+    map.panoramaView.tilePrimitiveCollection.overlay ===
+      PanoramaOverlayMode.Intensity,
+  );
+  const showDepth = ref(
+    map.panoramaView.tilePrimitiveCollection.overlay ===
+      PanoramaOverlayMode.Depth,
+  );
+
+  watch(showIntensity, (newShowIntensity) => {
+    if (newShowIntensity) {
+      showDepth.value = false;
+      map.panoramaView.tilePrimitiveCollection.overlay =
+        PanoramaOverlayMode.Intensity;
+    } else if (!showDepth.value) {
+      map.panoramaView.tilePrimitiveCollection.overlay =
+        PanoramaOverlayMode.None;
+    }
+  });
+
+  watch(showDepth, (newShowDepth) => {
+    if (newShowDepth) {
+      showIntensity.value = false;
+      map.panoramaView.tilePrimitiveCollection.overlay =
+        PanoramaOverlayMode.Depth;
+    } else if (!showIntensity.value) {
+      map.panoramaView.tilePrimitiveCollection.overlay =
+        PanoramaOverlayMode.None;
+    }
+  });
+
+  const showDebug = ref(map.panoramaView.tilePrimitiveCollection.showDebug);
+  watch(showDebug, (newShowDebug) => {
+    map.panoramaView.tilePrimitiveCollection.showDebug = newShowDebug;
+  });
+
+  onUnmounted(() => {
+    clickedPrimitive.destroy();
+    destroy();
+    destroyMarker();
+    map.panoramaView.tilePrimitiveCollection.opacity = 1;
+  });
+</script>
+
+<template>
+  <vcs-form-section
+    heading="Tools"
+    expandable
+    :header-actions="[action, hideMarker]"
+  >
+    <v-container class="py-0 px-1">
+      <v-row no-gutters>
+        <v-col>
+          <VcsCheckbox label="Show Debug" v-model="showDebug"></VcsCheckbox>
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsCheckbox
+            label="Show Intensity"
+            v-model="showIntensity"
+          ></VcsCheckbox>
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsCheckbox label="Show Depth" v-model="showDepth"></VcsCheckbox>
+        </v-col>
+      </v-row>
+      <template v-if="showDepth || showIntensity">
+        <v-row no-gutters>
+          <v-col cols="4">
+            <vcs-label>Overlay Opacity</vcs-label>
+          </v-col>
+          <v-col>
+            <vcs-slider
+              v-model="overlayOpacity"
+              :min="0"
+              :max="1"
+              :step="0.01"
+            />
+          </v-col>
+        </v-row>
+        <v-row no-gutters>
+          <v-col>
+            <vcs-label>Overlay NaN Color</vcs-label>
+          </v-col>
+          <v-col>
+            <v-menu :close-on-content-click="false">
+              <template #activator="{ props }">
+                <v-card
+                  rounded
+                  height="24px"
+                  width="32px"
+                  v-bind="props"
+                  :style="{ backgroundColor: overlayNaNColor }"
+                />
+              </template>
+              <v-color-picker
+                v-model="overlayNaNColor"
+                mode="rgba"
+                width="100%"
+              />
+            </v-menu>
+          </v-col>
+        </v-row>
+      </template>
+      <v-row no-gutters>
+        <v-col>
+          <vcs-label>Cursor Color</vcs-label>
+        </v-col>
+        <v-col>
+          <v-menu :close-on-content-click="false">
+            <template #activator="{ props }">
+              <v-card
+                rounded
+                height="24px"
+                width="32px"
+                v-bind="props"
+                :style="{ backgroundColor: cursorColor }"
+              />
+            </template>
+            <v-color-picker v-model="cursorColor" mode="rgba" width="100%" />
+          </v-menu>
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsCheckbox
+            label="Enable Cesium Interaction"
+            v-model="enableCesiumInteraction"
+          ></VcsCheckbox>
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsCheckbox
+            label="Show Clicked"
+            v-model="showClickedPosition"
+          ></VcsCheckbox>
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsCheckbox
+            label="Suspend Tile Loading"
+            v-model="suspendTileLoading"
+          ></VcsCheckbox>
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col cols="4">
+          <vcs-label>Opacity</vcs-label>
+        </v-col>
+        <v-col>
+          <vcs-slider v-model="opacity" :min="0" :max="1" :step="0.01" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </vcs-form-section>
+</template>
+
+<style scoped lang="scss"></style>

package/plugins/@vcmap-show-case/panorama-inspector/src/PanoramaInspector.vue

@@ -0,0 +1,31 @@
+<script setup>
+  import { ref, inject, onUnmounted } from 'vue';
+  import { PanoramaMap } from '@vcmap/core';
+  import { VSheet, VCard } from 'vuetify/components';
+  import PanoramaDebugInfo from './PanoramaDebugInfo.vue';
+  import PanoramaDebugTools from './PanoramaDebugTools.vue';
+
+  /** @type {VcsUiApp} */
+  const app = inject('vcsApp');
+  const isPanorama = ref(app.maps.activeMap instanceof PanoramaMap);
+
+  const listener = app.maps.mapActivated.addEventListener((map) => {
+    isPanorama.value = map instanceof PanoramaMap;
+  });
+
+  onUnmounted(() => {
+    listener();
+  });
+</script>
+
+<template>
+  <v-sheet>
+    <template v-if="isPanorama">
+      <panorama-debug-info />
+      <panorama-debug-tools />
+    </template>
+    <v-card v-else> Switch to panorama map </v-card>
+  </v-sheet>
+</template>
+
+<style scoped lang="scss"></style>

package/plugins/@vcmap-show-case/panorama-inspector/src/api.js

@@ -0,0 +1,161 @@
+import {
+  GeometryInstance,
+  Material,
+  MaterialAppearance,
+  Matrix4,
+  Primitive,
+  SphereGeometry,
+  Color,
+  Cartesian3,
+  Globe,
+  ImageryLayer as CesiumImageryLayer,
+  OpenStreetMapImageryProvider,
+} from '@vcmap-cesium/engine';
+import {
+  mercatorToCartesian,
+  PanoramaMap,
+  PanoramaDatasetLayer,
+} from '@vcmap/core';
+import { reactive, ref, computed, watch } from 'vue';
+
+/**
+ * @typedef {Object} ClickedPrimitive
+ * @property {boolean} show
+ * @property {Cartesian3} position
+ * @property {() => void} destroy
+ */
+
+/**
+ * @param {import("@vcmap/core").PanoramaMap} map
+ * @param {ShowClickInteraction} clickedInteraction
+ * @returns {ClickedPrimitive}
+ */
+export function setupClickedPrimitive(map, clickedInteraction) {
+  const position = new Cartesian3();
+  const appearance = new MaterialAppearance({
+    flat: true,
+    material: Material.fromType('Color', { color: Color.ORANGERED }),
+  });
+  const primitive = new Primitive({
+    geometryInstances: [
+      new GeometryInstance({
+        geometry: new SphereGeometry({
+          radius: 0.2,
+        }),
+      }),
+    ],
+    appearance,
+    depthFailAppearance: new MaterialAppearance({
+      translucent: true,
+      material: Material.fromType('Color', {
+        color: Color.LIMEGREEN.withAlpha(0.6),
+      }),
+    }),
+    asynchronous: false,
+    show: false,
+    modelMatrix: Matrix4.IDENTITY,
+  });
+
+  map.getCesiumWidget().scene.primitives.add(primitive);
+  clickedInteraction.clicked.addEventListener((event) => {
+    mercatorToCartesian(event.position, position);
+    primitive.modelMatrix = Matrix4.fromTranslation(position);
+  });
+
+  return {
+    get show() {
+      return primitive.show;
+    },
+    set show(value) {
+      primitive.show = value;
+    },
+    get position() {
+      return position;
+    },
+    destroy() {
+      map.getCesiumWidget().scene.primitives.remove(primitive);
+    },
+  };
+}
+
+/**
+ * @param {import("@vcmap/core").VcsApp} app
+ * @returns {{ action: import("@vcmap/ui").Action, destroy: () => void }}
+ */
+export function createOsmGlobeAction(app) {
+  /** @type {import("@vcmap/core").PanoramaMap} */
+  const map = app.maps.getByType(PanoramaMap.className)[0];
+
+  const action = reactive({
+    name: 'OSM Globe',
+    icon: 'mdi-earth',
+    title: 'Open Street Map Globe',
+    active: false,
+    callback() {
+      if (action.active) {
+        map.getCesiumWidget().scene.globe = undefined;
+        action.active = false;
+      } else {
+        const { scene } = map.getCesiumWidget();
+        scene.globe = new Globe();
+        scene.imageryLayers.add(
+          new CesiumImageryLayer(
+            new OpenStreetMapImageryProvider({ maximumLevel: 18 }),
+          ),
+        );
+        action.active = true;
+      }
+    },
+  });
+
+  return {
+    action,
+    destroy: () => {
+      if (map.initialized) {
+        map.getCesiumWidget().scene.globe = undefined;
+      }
+    },
+  };
+}
+
+/**
+ * @param {import("@vcmap/core").VcsApp} app
+ * @returns {{action: import("@vcmap/ui").VcsAction, destroy(): void}}
+ */
+export function createMapMarkerAction(app) {
+  const hideFootprint = ref(false);
+
+  const hideFootprintWatcher = watch(hideFootprint, () => {
+    for (const layer of app.layers) {
+      if (layer instanceof PanoramaDatasetLayer) {
+        layer.hideInPanorama = hideFootprint.value;
+      }
+    }
+  });
+
+  const layerAdded = app.layers.added.addEventListener((layer) => {
+    if (layer instanceof PanoramaDatasetLayer) {
+      layer.hideInPanorama = hideFootprint.value;
+    }
+  });
+
+  const action = reactive({
+    name: 'Hide Footprint',
+    icon: computed(() => {
+      return hideFootprint.value ? 'mdi-map-marker-off' : 'mdi-map-marker';
+    }),
+    title: 'Hide Footprint',
+    active: computed(() => hideFootprint.value),
+    callback() {
+      hideFootprint.value = !hideFootprint.value;
+    },
+  });
+
+  return {
+    action,
+    destroy() {
+      hideFootprintWatcher();
+      layerAdded();
+    },
+  };
+}