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

package/dist/assets/ui.js

@@ -1 +1 @@
-export * from "./ui-aadb7707.js";
+export * from "./ui-8896bb2c.js";

package/dist/assets/vue.js

@@ -1 +1 @@
-export * from "./vue-d7691a29.js";
+export * from "./vue-461b4f1b.js";

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

@@ -10,7 +10,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} 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";
+} await loadCss('./assets/vuetify-45cc2bff.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-461b4f1b.js";
 function rt(e, n) {
   let t;
   function a() {

package/dist/assets/vuetify.js

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

package/index.d.ts

@@ -127,6 +127,8 @@ export { default as ObliqueRotation } from "./src/navigation/ObliqueRotation.vue
 export type * from "./src/navigation/ObliqueRotation.vue.d.ts";
 export { default as OrientationToolsButton } from "./src/navigation/OrientationToolsButton.vue";
 export type * from "./src/navigation/OrientationToolsButton.vue.d.ts";
+export { default as OverviewMap } from "./src/navigation/overviewMap.js";
+export type * from "./src/navigation/overviewMap.d.ts";
 export { default as OverviewMapClickedInteraction } from "./src/navigation/overviewMapClickedInteraction.js";
 export type * from "./src/navigation/overviewMapClickedInteraction.d.ts";
 export { default as TiltSlider } from "./src/navigation/TiltSlider.vue";
@@ -261,8 +263,10 @@ 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 VcsWorkspaceWrapper } from "./src/components/plugins/VcsWorkspaceWrapper.vue";
+export type * from "./src/components/plugins/VcsWorkspaceWrapper.vue.d.ts";
+export { default as VcsLoadingOverlay } from "./src/components/plugins/VcsLoadingOverlay.vue";
+export type * from "./src/components/plugins/VcsLoadingOverlay.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";
@@ -279,7 +283,7 @@ export { default as ResultItemComponent } from "./src/search/ResultItem.vue";
 export type * from "./src/search/ResultItem.vue.d.ts";
 export { default as ResultsComponent } from "./src/search/ResultsComponent.vue";
 export type * from "./src/search/ResultsComponent.vue.d.ts";
-export { callSafeAction, createMapButtonAction, createToggleAction, createOverviewMapAction, createModalAction, createLinkAction, createGoToViewpointAction, createZoomToFeatureAction, searchComponentId } from "./src/actions/actionHelper.js";
+export { addLoadingOverlay, callSafeAction, createMapButtonAction, createToggleAction, createModalAction, createLinkAction, createGoToViewpointAction, createZoomToFeatureAction, searchComponentId } from "./src/actions/actionHelper.js";
 export type * from "./src/actions/actionHelper.d.ts";
 export { createDeepPickingAction, deepPickingWindowId } from "./src/actions/deepPickingAction.js";
 export type * from "./src/actions/deepPickingAction.d.ts";
@@ -287,7 +291,7 @@ export { createStateRefAction, StateActionState } from "./src/actions/stateRefAc
 export type * from "./src/actions/stateRefAction.d.ts";
 export { createLayerToggleAction, createZoomToExtentAction, createExtentFeatureAction, setupExtentComponentActions } from "./src/actions/extentActions.js";
 export type * from "./src/actions/extentActions.d.ts";
-export { createPlayAction, PlayerDirection, createStepAction, createFastAction, createFlightPlayerActions, setupFlightListItemPlayer, createZoomToFlightAction, createFlightVisualizationAction, createExportFlightAction, importFlights } from "./src/actions/flightActions.js";
+export { createPlayAction, PlayerDirection, createStepAction, createFastAction, createFlightPlayerActions, setupFlightListItemPlayer, createZoomToFlightAction, createFlightVisualizationAction, createFlightMovieActions, createExportFlightAction, importFlights } from "./src/actions/flightActions.js";
 export type * from "./src/actions/flightActions.d.ts";
 export { createListItemDeleteAction, createListItemBulkAction, createListExportAction, createListImportAction, importIntoLayer } from "./src/actions/listActions.js";
 export type * from "./src/actions/listActions.d.ts";
@@ -325,8 +329,6 @@ export { getBalloonPosition, setBalloonPosition, setupBalloonPositionListener }
 export type * from "./src/featureInfo/balloonHelper.d.ts";
 export { getHighlightStyleFromStyle, getHighlightStyle, getClusterHighlightStyle, featureInfoViewSymbol } from "./src/featureInfo/featureInfo.js";
 export type * from "./src/featureInfo/featureInfo.d.ts";
-export { getWindowComponentOptions, default as OverviewMap, overviewMapWindowId } from "./src/navigation/overviewMap.js";
-export type * from "./src/navigation/overviewMap.d.ts";
 export { createVueI18n, setupI18n } from "./src/vuePlugins/i18n.js";
 export type * from "./src/vuePlugins/i18n.d.ts";
 export { default as I18nCollection, i18nPluginSymbol } from "./src/i18n/i18nCollection.js";

package/index.js

@@ -3,10 +3,10 @@ import './src/styles/main.scss';
 
 export { default as StyleSelector } from './src/actions/StyleSelector.vue';
 export {
+  addLoadingOverlay,
   callSafeAction,
   createMapButtonAction,
   createToggleAction,
-  createOverviewMapAction,
   createModalAction,
   createLinkAction,
   createGoToViewpointAction,
@@ -38,6 +38,7 @@ export {
   setupFlightListItemPlayer,
   createZoomToFlightAction,
   createFlightVisualizationAction,
+  createFlightMovieActions,
   createExportFlightAction,
   importFlights,
 } from './src/actions/flightActions.js';
@@ -211,11 +212,7 @@ export { default as MapNavCompass } from './src/navigation/MapNavCompass.vue';
 export { default as MapNavigation } from './src/navigation/MapNavigation.vue';
 export { default as ObliqueRotation } from './src/navigation/ObliqueRotation.vue';
 export { default as OrientationToolsButton } from './src/navigation/OrientationToolsButton.vue';
-export {
-  getWindowComponentOptions,
-  default as OverviewMap,
-  overviewMapWindowId,
-} from './src/navigation/overviewMap.js';
+export { default as OverviewMap } from './src/navigation/overviewMap.js';
 export { default as OverviewMapClickedInteraction } from './src/navigation/overviewMapClickedInteraction.js';
 export { default as TiltSlider } from './src/navigation/TiltSlider.vue';
 export { default as VcsCompass } from './src/navigation/VcsCompass.vue';
@@ -361,7 +358,8 @@ 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 VcsWorkspaceWrapper } from './src/components/plugins/VcsWorkspaceWrapper.vue';
+export { default as VcsLoadingOverlay } from './src/components/plugins/VcsLoadingOverlay.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.2",
+  "version": "6.2.0-rc.4",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -19,6 +19,7 @@
     "lint": "npm run lint:js && npm run lint:prettier && npm run lint:types",
     "format": "prettier --write --list-different . && npm run lint:js -- --fix",
     "prepack": "node build/build.js && node build/buildTypes.js",
+    "postinstall": "node build/postInstall.js",
     "install-plugins": "cd plugins && npm i --omit peer --no-package-lock --force",
     "story:dev": "histoire dev",
     "story:build": "histoire build",
@@ -57,7 +58,7 @@
   },
   "peerDependencies": {
     "@vcmap-cesium/engine": "^11.0.3",
-    "@vcmap/core": "6.2.0-rc.1",
+    "@vcmap/core": "6.2.0-rc.3",
     "ol": "^10.4.0",
     "vue": "~3.4.38",
     "vuetify": "~3.7.14"

package/plugins/package.json

@@ -5,13 +5,13 @@
     "@vcmap/clipping-tool": "^2.0.0",
     "@vcmap/transparent-terrain": "^2.0.0",
     "@vcmap/height-profile": "^2.0.0",
-    "@vcmap/flight": "^2.0.0",
-    "@vcmap/swipe-tool": "^3.0.0",
+    "@vcmap/flight": "^3.0.0",
+    "@vcmap/swipe-tool": "^4.0.0",
     "@vcmap/export": "^2.0.0",
     "@vcmap/viewshed": "^3.0.0",
-    "@vcmap/measurement": "^3.0.0",
+    "@vcmap/measurement": "^4.0.0",
     "@vcmap/multi-view": "^2.0.0",
-    "@vcmap/draw": "^3.0.0",
+    "@vcmap/draw": "^4.0.0",
     "@vcmap/shadow": "^3.0.0",
     "@vcmap/search-wfs": "^2.0.0",
     "@vcmap/search-esri": "^2.0.0",
@@ -20,7 +20,7 @@
     "@vcmap/cesium-filters": "^2.0.0",
     "@vcmap/search-nominatim": "^2.0.0",
     "@vcmap/create-link": "^3.0.0",
-    "@vcmap/module-selector": "^2.0.0",
+    "@vcmap/module-selector": "^3.0.0",
     "@vcmap/line-of-sight": "^1.0.0",
     "@vcmap/layer-slider": "^2.0.0",
     "@vcmap/vcs-solar-balloon": "^2.0.0",
@@ -29,9 +29,10 @@
     "@vcmap/gamepad": "^1.0.0",
     "@vcmap/sensorthings": "^1.0.0",
     "@vcmap/cesium-inspector": "^2.0.0",
-    "@vcmap/event-control": "^1.0.1"
+    "@vcmap/event-control": "^1.0.1",
+    "@vcmap/dynamic-layer": "^1.0.0"
   },
   "optionalDependencies": {
-    "@vcmap/planning": "^6.0.0"
+    "@vcmap/planning": "^7.0.0"
   }
 }

package/src/actions/actionHelper.d.ts

@@ -54,17 +54,6 @@ export function createSearchButtonAction(app: import("../vcsUiApp.js").default):
     searchAction: import("vue").Ref<import("vue").UnwrapRef<VcsAction> | null>;
     destroy: () => void;
 };
-/**
- * Creates an action which will toggle the overview map (opening & closing the window and activating/ deactivating the overview map).
- * @param {import("../navigation/overviewMap.js").default} overviewMap
- * @param {import("../manager/window/windowManager.js").WindowComponentOptions} windowComponent
- * @param {import("../manager/window/windowManager.js").default}  windowManager
- * @returns {{action: VcsAction, destroy: function(): void}}
- */
-export function createOverviewMapAction(overviewMap: import("../navigation/overviewMap.js").default, windowComponent: import("../manager/window/windowManager.js").WindowComponentOptions, windowManager: import("../manager/window/windowManager.js").default): {
-    action: VcsAction;
-    destroy: () => void;
-};
 /**
  * Creates a header less window which will close if anything outside of the window is clicked. The window will open
  * at the clicked position (the actions position) by default, unless the window component already has a position set.
@@ -113,6 +102,22 @@ export function createZoomToFeatureAction(actionOptions: ActionOptions, feature:
  * @param {PointerEvent} [p]
  */
 export function callSafeAction(action: VcsAction, p?: PointerEvent | undefined): void;
+/**
+ * Adds a loading overlay to the application.
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {string|symbol} owner The owner of the loading overlay.
+ * @param {{id?:string, progress?:import('vue').Ref<number>|undefined, title?:string, text?:string, cancel?:Function,  maxWidth?:number|string, persistent?:boolean}} [options] The options for the loading overlay, passed as props.
+ * @returns {function(): void} A function to remove the loading overlay.
+ */
+export function addLoadingOverlay(app: import("../vcsUiApp.js").default, owner: string | symbol, options?: {
+    id?: string | undefined;
+    progress?: import('vue').Ref<number> | undefined;
+    title?: string | undefined;
+    text?: string | undefined;
+    cancel?: Function | undefined;
+    maxWidth?: string | number | undefined;
+    persistent?: boolean | undefined;
+} | undefined): () => void;
 export const searchComponentId: "searchId";
 export type ActionOptions = Omit<VcsAction, 'callback'>;
 export type ActionCallback = (p?: PointerEvent) => (void | Promise<void>);

package/src/actions/actionHelper.js

@@ -19,6 +19,7 @@ import {
   getTargetSize,
 } from '../manager/window/windowHelper.js';
 import SearchComponent from '../search/SearchComponent.vue';
+import VcsLoadingOverlay from '../components/plugins/VcsLoadingOverlay.vue';
 
 /**
  * @typedef {Omit<VcsAction, 'callback'>} ActionOptions
@@ -322,57 +323,6 @@ export function createSearchButtonAction(app) {
   return { searchAction, destroy };
 }
 
-/**
- * Creates an action which will toggle the overview map (opening & closing the window and activating/ deactivating the overview map).
- * @param {import("../navigation/overviewMap.js").default} overviewMap
- * @param {import("../manager/window/windowManager.js").WindowComponentOptions} windowComponent
- * @param {import("../manager/window/windowManager.js").default}  windowManager
- * @returns {{action: VcsAction, destroy: function(): void}}
- */
-export function createOverviewMapAction(
-  overviewMap,
-  windowComponent,
-  windowManager,
-) {
-  const { action, destroy } = createToggleAction(
-    {
-      name: 'overviewMapToggle',
-      icon: '$vcsMap',
-      title: 'navigation.overviewMapTooltip',
-    },
-    windowComponent,
-    windowManager,
-    vcsAppSymbol,
-  );
-
-  const listeners = [
-    windowManager.added.addEventListener(({ id }) => {
-      if (id === windowComponent.id) {
-        overviewMap.activate().catch((e) => {
-          getLogger('createOverviewMapAction').error(
-            'failed to activate overview map',
-            e,
-          );
-          windowManager.remove(windowComponent.id);
-        });
-      }
-    }),
-    windowManager.removed.addEventListener(({ id }) => {
-      if (id === windowComponent.id) {
-        overviewMap.deactivate();
-      }
-    }),
-  ];
-
-  const destroyAction = () => {
-    destroy();
-    listeners.forEach((cb) => {
-      cb();
-    });
-  };
-  return { action, destroy: destroyAction };
-}
-
 /**
  * Creates a header less window which will close if anything outside of the window is clicked. The window will open
  * at the clicked position (the actions position) by default, unless the window component already has a position set.
@@ -418,10 +368,7 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
       width,
       height,
     );
-    const position = {
-      ...fittedPosition,
-      ...windowPositionOptions,
-    };
+    const position = { ...fittedPosition, ...windowPositionOptions };
     const targetSize = getTargetSize(app.maps.target);
     if (contentHeight) {
       if (position.bottom) {
@@ -451,12 +398,7 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
         clickedWindowPosition = { x: event.x, y: event.y };
         const state = { ...modalComponent?.state, hideHeader: true };
         app.windowManager.add(
-          {
-            position: getPositionOptions(),
-            ...component,
-            id,
-            state,
-          },
+          { position: getPositionOptions(), ...component, id, state },
           owner,
         );
         document.addEventListener('mousedown', handleMouseDown);
@@ -638,3 +580,50 @@ export function callSafeAction(action, p) {
     logError(e);
   }
 }
+
+/**
+ * Adds a loading overlay to the application.
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {string|symbol} owner The owner of the loading overlay.
+ * @param {{id?:string, progress?:import('vue').Ref<number>|undefined, title?:string, text?:string, cancel?:Function,  maxWidth?:number|string, persistent?:boolean}} [options] The options for the loading overlay, passed as props.
+ * @returns {function(): void} A function to remove the loading overlay.
+ */
+export function addLoadingOverlay(app, owner, options) {
+  check(owner, oneOf(String, Symbol));
+  check(options?.progress?.value, optional(Number));
+  check(
+    options,
+    optional({
+      id: optional(String),
+      title: optional(String),
+      text: optional(String),
+      cancel: optional(Function),
+      maxWidth: optional(oneOf(Number, String)),
+      persistent: optional(Boolean),
+    }),
+  );
+
+  const id = options?.id || `loading-overlay-${uuid()}`;
+  const removeWindow = () => {
+    if (app.windowManager.has(id)) {
+      app.windowManager.remove(id);
+    }
+  };
+  app.windowManager.add(
+    {
+      component: VcsLoadingOverlay,
+      id,
+      state: { hideHeader: true, styles: { display: 'none !important' } },
+      props: {
+        ...options,
+        cancellable: !!options.cancel,
+        onCancel: () => {
+          options?.cancel?.();
+          removeWindow();
+        },
+      },
+    },
+    owner,
+  );
+  return removeWindow;
+}

package/src/actions/flightActions.d.ts

@@ -69,6 +69,16 @@ export function createFlightVisualizationAction(app: import("../vcsUiApp.js").de
     action: import("./actionHelper.js").VcsAction;
     destroy: () => void;
 }>;
+/**
+ *
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").FlightInstance} instance
+ * @returns {{actions: import("./actionHelper.js").VcsAction[], destroy: function(): void}}
+ */
+export function createFlightMovieActions(app: import("../vcsUiApp.js").default, instance: import("@vcmap/core").FlightInstance): {
+    actions: import("./actionHelper.js").VcsAction[];
+    destroy: () => void;
+};
 /**
  *
  * @param {import("@vcmap/core").FlightInstance} instance

package/src/actions/flightActions.js

@@ -1,16 +1,21 @@
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
 import { check, maybe, ofEnum } from '@vcsuite/check';
 import { getLogger } from '@vcsuite/logger';
 import {
   createFlightVisualization,
+  createFlightMovie,
   exportFlightAsGeoJson,
   exportFlightPathAsGeoJson,
   FlightInstance,
   moduleIdSymbol,
   parseFlightOptionsFromGeoJson,
+  createFlightPlayer,
+  LayerState,
 } from '@vcmap/core';
 import { NotificationType } from '../notifier/notifier.js';
-import { downloadText } from '../downloadHelper.js';
+import { downloadBlob, downloadText } from '../downloadHelper.js';
+import { addLoadingOverlay, callSafeAction } from './actionHelper.js';
+import { vcsAppSymbol } from '../pluginHelper.js';
 
 /**
  * @param {import("../vcsUiApp.js").default} app
@@ -97,10 +102,7 @@ export function createPlayAction(app, instance) {
 /**
  * @enum {string}
  */
-export const PlayerDirection = {
-  Forward: 'forward',
-  Backward: 'backward',
-};
+export const PlayerDirection = { Forward: 'forward', Backward: 'backward' };
 
 /**
  * @param {import("../vcsUiApp.js").default} app
@@ -365,18 +367,32 @@ export async function createFlightVisualizationAction(
   instance,
   active = true,
 ) {
-  let flightVis = await createFlightVisualization(instance, app);
+  let flightVis;
+  let flightVisListener;
+  let flightVisStateListener;
 
   const action = reactive({
     name: 'components.flight.hidePath',
     title: 'components.flight.hidePath',
     icon: '$vcsEye',
-    active,
+    active: false,
     async callback() {
       if (!flightVis) {
         flightVis = await createFlightVisualization(instance, app);
+        flightVisListener?.();
+        flightVisListener = flightVis.destroyed.addEventListener(() => {
+          flightVis = undefined;
+          flightVisListener?.();
+          flightVisStateListener?.();
+        });
+        flightVisStateListener?.();
+        flightVisStateListener = flightVis.stateChanged.addEventListener(
+          (state) => {
+            action.active = state === LayerState.ACTIVE;
+          },
+        );
       }
-      if (this.active) {
+      if (flightVis.state === LayerState.ACTIVE) {
         flightVis.deactivate();
       } else {
         flightVis.activate().catch(() => {
@@ -384,22 +400,96 @@ export async function createFlightVisualizationAction(
           this.active = false;
         });
       }
-      this.active = !this.active;
+      this.active = flightVis.state === LayerState.ACTIVE;
     },
   });
 
   if (active) {
-    await flightVis.activate();
+    callSafeAction(action);
   }
 
   const destroy = () => {
-    flightVis.deactivate();
-    flightVis.destroy();
+    flightVis?.deactivate?.();
+    flightVis?.destroy?.();
   };
 
   return { action, destroy };
 }
 
+/**
+ *
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").FlightInstance} instance
+ * @returns {{actions: import("./actionHelper.js").VcsAction[], destroy: function(): void}}
+ */
+export function createFlightMovieActions(app, instance) {
+  const progress = ref(0);
+
+  function updateProgress(playerClock) {
+    const duration = playerClock.endTime - playerClock.startTime;
+    const currentTime = playerClock.currentTime - playerClock.startTime;
+    progress.value = currentTime / duration;
+  }
+
+  async function recordFlight(options = {}) {
+    let player;
+    let flightVis;
+    let playerListener = () => {};
+    let removeLoadingOverlay = () => {};
+    try {
+      flightVis = await createFlightVisualization(instance, app);
+      if (flightVis.state === LayerState.ACTIVE) {
+        flightVis.deactivate();
+      }
+      player = await createFlightPlayer(instance, app);
+      playerListener = player.clock.changed.addEventListener(updateProgress);
+      const { start, cancel } = createFlightMovie(app, player, options);
+      removeLoadingOverlay = addLoadingOverlay(app, vcsAppSymbol, {
+        progress,
+        title: 'components.flight.record.inProgress',
+        cancel,
+      });
+      const blob = await start();
+      removeLoadingOverlay?.();
+      app.notifier.add({
+        type: NotificationType.SUCCESS,
+        message: app.vueI18n.t('components.flight.record.success'),
+      });
+      const title = instance.properties?.title || 'flight';
+      downloadBlob(blob, `${title}.webm`);
+    } catch (e) {
+      getLogger('flightActions').error('Error while creating flight movie', e);
+    } finally {
+      player?.destroy();
+      flightVis?.destroy();
+      playerListener?.();
+      removeLoadingOverlay?.();
+    }
+  }
+
+  const actions = [
+    reactive({
+      name: 'components.flight.record.standard',
+      callback: recordFlight,
+    }),
+    reactive({
+      name: 'components.flight.record.high',
+      callback: recordFlight.bind(null, {
+        fps: 60,
+        highDefinition: true,
+      }),
+    }),
+  ];
+
+  const destroy = instance.anchorsChanged.addEventListener(() => {
+    actions.forEach((action) => {
+      action.disabled = !instance.isValid();
+    });
+  });
+
+  return { actions, destroy };
+}
+
 /**
  *
  * @param {import("@vcmap/core").FlightInstance} instance

package/src/application/VcsApp.vue

@@ -170,7 +170,7 @@
       OpenlayersMap: '$vcs2d',
       CesiumMap: '$vcs3d',
       ObliqueMap: '$vcsObliqueView',
-      PanoramaMap: 'mdi-image',
+      PanoramaMap: 'mdi-panorama-variant-outline',
     };
 
     const mapBtnWeight = {

package/src/application/VcsMainMap.vue

@@ -2,14 +2,23 @@
   <div class="vcs-main-map">
     <VcsMap :map-id="mapId" />
     <MapNavigation v-if="showMapNavigation" />
+    <div
+      :id="overviewMapContainerId"
+      class="overviewmap-container"
+      :class="xs || mobileLandscape ? 'mobile' : ''"
+      :style="{ display: overviewMapState ? 'block' : 'none' }"
+    />
   </div>
 </template>
 
 <script>
   import { inject, onMounted, onUnmounted, ref, computed } from 'vue';
   import { v4 as uuid } from 'uuid';
-  import MapNavigation from '../navigation/MapNavigation.vue';
+  import { useDisplay } from 'vuetify';
   import VcsMap from './VcsMap.vue';
+  import MapNavigation from '../navigation/MapNavigation.vue';
+  import { overviewMapContainerId } from '../navigation/overviewMap.js';
+  import { isMobileLandscape } from '../vuePlugins/vuetify.js';
 
   export function setupMapNavigation(app) {
     const mapSize = ref(app.maps.size);
@@ -48,6 +57,9 @@
       const id = uuid();
       const mapId = `mapCollection-${id}`;
 
+      const mobileLandscape = isMobileLandscape();
+      const { xs } = useDisplay();
+
       const { showMapNavigation, destroy: destroyMapNavigationListener } =
         setupMapNavigation(app);
 
@@ -63,9 +75,35 @@
       return {
         mapId,
         showMapNavigation,
+        overviewMapContainerId,
+        overviewMapState: app.overviewMap.currentState,
+        mobileLandscape,
+        xs,
       };
     },
   };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  .overviewmap-container {
+    position: absolute;
+    right: 100px;
+    bottom: 25px;
+    width: 300px;
+    height: 240px;
+    background: rgb(var(--v-theme-surface));
+    border: 3px solid rgb(var(--v-theme-surface));
+    border-radius: 3px;
+    &.mobile {
+      width: 100%;
+      right: 0px;
+      bottom: 0px;
+      border-radius: 0px;
+    }
+  }
+
+  :deep(.overviewMapElement) {
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/src/application/VcsMainMap.vue.d.ts

@@ -5,5 +5,9 @@ export function setupMapNavigation(app: any): {
 declare const _default: import("vue").DefineComponent<{}, {
     mapId: string;
     showMapNavigation: import("vue").ComputedRef<boolean>;
+    overviewMapContainerId: string;
+    overviewMapState: any;
+    mobileLandscape: import("vue").ComputedRef<boolean>;
+    xs: import("vue").Ref<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/application/VcsMap.vue

@@ -36,15 +36,6 @@
     overflow: hidden; /* Fix for iFrame content */
   }
 
-  :deep(.overviewMapElement) {
-    position: absolute;
-    top: 3px;
-    bottom: 3px;
-    left: 3px;
-    right: 3px;
-    overflow: hidden; /* Fix for iFrame content */
-  }
-
   :deep(.cesium-widget),
   :deep(.cesium-widget canvas) {
     width: 100%;