@vcmap/ui 5.0.0-rc.15 → 5.0.0-rc.16

package/src/contentTree/contentTreeItem.js

@@ -7,30 +7,30 @@ import { createStateRefAction, StateActionState } from '../actions/stateRefActio
 
 /**
  * @typedef {Object} ContentTreeItemOptions
- * @property {string} name
+ * @property {string} name - name of the item defining the structure within the tree using dot notation.
  * @property {string} [title] - may be unset, if set from object properties later on. required otherwise
  * @property {string} [tooltip] - may be unset or set from object properties later on.
- * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} icon - an icon URL or element to display
- * @property {number} [weight]
- * @property {string} [infoUrl]
- * @property {boolean} [initOpen=false]
+ * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} icon - an icon URL or element to display.
+ * @property {number} [weight] - optional weighting of the item. higher weights come first.
+ * @property {string} [infoUrl] - optional info url providing link with additional information.
+ * @property {boolean} [initOpen=false] - groups being initially open or not.
  */
 
 /**
  * A readonly rendering interface of a ContentTreeItem.
  * @typedef {Object} TreeViewItem
  * @property {string} name
- * @property {boolean} visible
- * @property {boolean} clickable
- * @property {boolean} disabled
- * @property {StateActionState} state
- * @property {string} title
+ * @property {boolean} visible - Whether to display this item or not.
+ * @property {boolean} clickable - Whether this item reacts to click events, e.g. with visual feedback
+ * @property {boolean} disabled - Whether this item should be displayed as disabled.
+ * @property {StateActionState} state - The state of this item. NONE if this item cannot have a state.
+ * @property {string} title - The title to be displayed
  * @property {string} [tooltip]
- * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} icon
+ * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - An optional icon to display with this item. Can be an URL or HTMLElement.
  * @property {Array<VcsAction>} actions
  * @property {Array<TreeViewItem>} children
  * @property {Array<TreeViewItem>} visibleChildren - computed property
- * @property {function():Promise<void>} clicked
+ * @property {function(PointerEvent):Promise<void>} clicked - A callback called once the item is clicked.
  */
 
 /**
@@ -376,7 +376,7 @@ class ContentTreeItem {
    * GoToExtent: 8
    * The default weight is set to always push new actions past these.
    * @param {VcsAction} action
-   * @param {number} [weight=0]
+   * @param {number} [weight=11]
    */
   addAction(action, weight = 11) {
     check(action.name, String);

package/src/contentTree/subContentTreeItem.js

@@ -6,7 +6,7 @@ import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js'
 export const subTreeSymbol = Symbol('SubTree');
 
 /**
- * A sub tree item. Subtrees are rendered in their own (not the main content tree).
+ * A subtree item. Subtrees are rendered in their own (not the main content tree).
  * They will receive their own toggle button in the nav bar.
  * Only toplevel items can be content tree items (with a name which does not have a .)
  * @class

package/src/contentTree/vcsObjectContentTreeItem.js

@@ -9,7 +9,7 @@ import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js'
 
 /**
  * An abstract class for VcsObject based items.
- * It handle the overriding/setting of its own values based on
+ * It handles the overriding/setting of its own values based on
  * the VcsObjects properties bag.
  * @class
  * @template {VcsObjectContentTreeItemProperties} T

package/src/featureInfo/BalloonComponent.vue

@@ -17,16 +17,17 @@
         </v-list-item-avatar>
         <v-list-item-content class="py-2 pr-1 align-self-start">
           <v-list-item-title class="text-h6">
-            {{ $t(title) }}
+            {{ $t(balloonTitle) }}
           </v-list-item-title>
-          <v-list-item-subtitle v-if="subtitle">
-            {{ $t(subtitle) }}
+          <v-list-item-subtitle v-if="balloonSubtitle">
+            {{ $t(balloonSubtitle) }}
           </v-list-item-subtitle>
         </v-list-item-content>
         <VcsButton
           @click.stop="close"
           small
           icon="mdi-close-thick"
+          tooltip="components.close"
         />
       </v-list-item>
     </slot>
@@ -58,7 +59,8 @@
     VList,
     VListItem,
     VListItemAvatar,
-    VListItemContent, VListItemSubtitle,
+    VListItemContent,
+    VListItemSubtitle,
     VListItemTitle,
   } from 'vuetify/lib';
   import { setupBalloonPositionListener } from './balloonHelper.js';
@@ -68,8 +70,8 @@
    * @description A balloon viewing feature attributes. Size dynamic dependent on number of attributes.
    * Scrollable, if more than 6 attributes are provided.
    * @vue-prop {string} featureId - feature's id
-   * @vue-prop {string} title - balloon title
-   * @vue-prop {string} subtitle - balloon subtitle
+   * @vue-prop {string} balloonTitle - balloon title
+   * @vue-prop {string} balloonSubtitle - balloon subtitle
    * @vue-prop {Object} attributes - feature's attributes
    * @vue-prop {Array<import("ol/coordinate").Coordinate>} position - clicked position balloon is rendered at
    * @vue-data {slot} [#balloon-header] - slot to override balloon header, $props and $attrs are passed to `attrs`
@@ -94,11 +96,11 @@
         type: String,
         required: true,
       },
-      title: {
+      balloonTitle: {
         type: String,
         required: true,
       },
-      subtitle: {
+      balloonSubtitle: {
         type: String,
         required: true,
       },

package/src/featureInfo/balloonFeatureInfoView.js

@@ -26,14 +26,14 @@ export function extractNestedKey(key, attrs, defaultValue = null) {
 
 /**
  * @typedef {FeatureInfoViewOptions} BalloonFeatureInfoViewOptions
- * @property {string} [title] - optional title to overwrite default (layerName). Can be attribute key (nested key using '.'), i18n key or text
- * @property {string} [subtitle] - optional window title to overwrite default (featureId). Can be attribute key (nested key using '.'), i18n key or text
+ * @property {string} [balloonTitle] - optional title to overwrite default (layerName). Can be attribute key (nested key using '.'), i18n key or text
+ * @property {string} [balloonSubtitle] - optional window title to overwrite default (featureId). Can be attribute key (nested key using '.'), i18n key or text
  */
 
 /**
  * @typedef {FeatureInfoProps} BalloonFeatureInfoViewProps
- * @property {string} title
- * @property {string} subtitle
+ * @property {string} balloonTitle
+ * @property {string} balloonSubtitle
  * @property {import("ol/coordinate").Coordinate} position
  */
 
@@ -87,12 +87,12 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
     /**
      * @type {string}
      */
-    this.title = options.title;
+    this.balloonTitle = options.balloonTitle;
 
     /**
      * @type {string}
      */
-    this.subtitle = options.subtitle;
+    this.balloonSubtitle = options.balloonSubtitle;
   }
 
   /**
@@ -105,11 +105,11 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
     return {
       ...properties,
       position: featureInfo.position ?? getPositionFromFeature(featureInfo.feature),
-      title: this.title != null ?
-        extractNestedKey(this.title, properties.attributes, this.title) :
+      balloonTitle: this.balloonTitle != null ?
+        extractNestedKey(this.balloonTitle, properties.attributes, this.balloonTitle) :
         properties.layerProperties.title,
-      subtitle: this.subtitle != null ?
-        extractNestedKey(this.subtitle, properties.attributes, this.subtitle) :
+      balloonSubtitle: this.balloonSubtitle != null ?
+        extractNestedKey(this.balloonSubtitle, properties.attributes, this.balloonSubtitle) :
         properties.featureId,
     };
   }
@@ -138,11 +138,11 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
    */
   toJSON() {
     const config = super.toJSON();
-    if (this.title) {
-      config.title = this.title;
+    if (this.balloonTitle) {
+      config.balloonTitle = this.balloonTitle;
     }
-    if (this.subtitle) {
-      config.subtitle = this.subtitle;
+    if (this.balloonSubtitle) {
+      config.balloonSubtitle = this.balloonSubtitle;
     }
     return config;
   }

package/src/featureInfo/balloonHelper.js

@@ -99,6 +99,10 @@ export async function setupBalloonPositionListener(vcsApp, windowId, clickedPosi
 
     const map = app.maps.activeMap;
     if (map instanceof CesiumMap) {
+      if (!position[2]) {
+        const [position3D] = await map.getHeightFromTerrain([position]);
+        position[2] = position3D[2];
+      }
       const wgs84Position = Projection.mercatorToWgs84(position);
       const cartesian = Cartographic.toCartesian(Cartographic.fromDegrees(...wgs84Position));
       listeners.push(map.getScene().postRender.addEventListener((scene) => {

package/src/featureInfo/featureInfo.js

@@ -231,6 +231,11 @@ class FeatureInfo {
      * @private
      */
     this._selectedFeature = null;
+    /**
+     * @type {string|null}
+     * @private
+     */
+    this._selectedFeatureId = null;
     /**
      * @type {Array<function():void>}
      * @private
@@ -299,6 +304,12 @@ class FeatureInfo {
    */
   get selectedFeature() { return this._selectedFeature; }
 
+  /**
+   * @type {null|string}
+   * @readonly
+   */
+  get selectedFeatureId() { return this._selectedFeatureId; }
+
   /**
    * The window id of the current features FeatureInfoView window
    * @type {string|null}
@@ -404,6 +415,7 @@ class FeatureInfo {
       );
 
       this._selectedFeature = feature;
+      this._selectedFeatureId = feature.getId();
       this._featureChanged.raiseEvent(this._selectedFeature);
     } else {
       this.clear();
@@ -436,6 +448,7 @@ class FeatureInfo {
     this._clearInternal();
     if (this._selectedFeature) {
       this._selectedFeature = null;
+      this._selectedFeatureId = null;
       this._featureChanged.raiseEvent(this._selectedFeature);
     }
   }

package/src/featureInfo/featureInfoInteraction.js

@@ -24,7 +24,7 @@ class FeatureInfoInteraction extends AbstractInteraction {
    */
   async pipe(event) {
     if (event.feature) {
-      if (!this._featureInfo.selectedFeature || event.feature.getId() !== this._featureInfo.selectedFeature.getId()) {
+      if (!this._featureInfo.selectedFeature || event.feature.getId() !== this._featureInfo.selectedFeatureId) {
         event.stopPropagation = true;
         await this._featureInfo.selectFeature(
           event.feature,

package/src/i18n/de.js

@@ -44,6 +44,7 @@ const messages = {
   components: {
     title: 'Komponenten',
     tooltip: 'Komponenten',
+    close: 'Fenster schließen.',
     vcsFormSection: {
       help: 'Hilfe anzeigen.',
     },
@@ -91,6 +92,12 @@ const messages = {
       tooltip: 'Öffne Attribution Fenster',
     },
   },
+  notification: {
+    error: 'Fehler',
+    warning: 'Warnung',
+    information: 'Information',
+    success: 'Erfolg',
+  },
 };
 
 export default messages;

package/src/i18n/en.js

@@ -44,6 +44,7 @@ const messages = {
   components: {
     title: 'Components',
     tooltip: 'Components',
+    close: 'Close window.',
     vcsFormSection: {
       help: 'Show help.',
     },
@@ -91,6 +92,12 @@ const messages = {
       tooltip: 'Open Attributions Window',
     },
   },
+  notification: {
+    error: 'Error',
+    warning: 'Warning',
+    information: 'Information',
+    success: 'Success',
+  },
 };
 
 export default messages;

package/src/icons/+all.js

@@ -100,6 +100,7 @@ import Viewshed360Icon from './Viewshed360Icon.vue';
 import ViewshedConeIcon from './ViewshedConeIcon.vue';
 import WalkingIcon from './WalkingIcon.vue';
 import WallIcon from './WallIcon.vue';
+import WandIcon from './WandIcon.vue';
 
 // * // IconMap.boundingBox
 // * <v-icon size="16" v-text="'$vcsBoundingBox'" />
@@ -431,6 +432,9 @@ const IconMap = {
   walking: {
     component: WalkingIcon,
   },
+  wand: {
+    component: WandIcon,
+  },
 };
 
 const nameCapitalized = (name) => { return name.charAt(0).toUpperCase() + name.slice(1); };

package/src/icons/WandIcon.vue

@@ -0,0 +1,63 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg id="icon_wizard" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <g id="wand" transform="translate(1.706 1.705)">
+      <g id="Gruppe_1465" data-name="Gruppe 1465" transform="translate(0 10.491)">
+        <g id="Gruppe_1464" data-name="Gruppe 1464">
+          <path id="Pfad_540" data-name="Pfad 540" d="M1.574,22.1a.476.476,0,0,1-.367-.157L.157,20.892a.507.507,0,0,1,0-.734.507.507,0,0,1,.734,0l1.049,1.049a.507.507,0,0,1,0,.734A.476.476,0,0,1,1.574,22.1Z" transform="translate(0 -20)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1467" data-name="Gruppe 1467" transform="translate(1.049 1.049)">
+        <g id="Gruppe_1466" data-name="Gruppe 1466">
+          <path id="Pfad_541" data-name="Pfad 541" d="M2.525,13.54a.476.476,0,0,1-.367-.157.507.507,0,0,1,0-.734L12.648,2.157a.519.519,0,1,1,.734.734L2.892,13.382A.476.476,0,0,1,2.525,13.54Z" transform="translate(-2 -2)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1469" data-name="Gruppe 1469" transform="translate(10.491 0)">
+        <g id="Gruppe_1468" data-name="Gruppe 1468">
+          <path id="Pfad_542" data-name="Pfad 542" d="M21.574,2.1a.476.476,0,0,1-.367-.157L20.157.892a.507.507,0,0,1,0-.734.507.507,0,0,1,.734,0l1.049,1.049a.507.507,0,0,1,0,.734A.476.476,0,0,1,21.574,2.1Z" transform="translate(-20 0)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1471" data-name="Gruppe 1471" transform="translate(0 0)">
+        <g id="Gruppe_1470" data-name="Gruppe 1470">
+          <path id="Pfad_543" data-name="Pfad 543" d="M.525,11.54a.476.476,0,0,1-.367-.157.507.507,0,0,1,0-.734L10.648.157a.507.507,0,0,1,.734,0,.507.507,0,0,1,0,.734L.892,11.382A.476.476,0,0,1,.525,11.54Z" transform="translate(0 0)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1473" data-name="Gruppe 1473" transform="translate(8.393 2.098)">
+        <g id="Gruppe_1472" data-name="Gruppe 1472">
+          <path id="Pfad_544" data-name="Pfad 544" d="M17.574,6.1a.476.476,0,0,1-.367-.157L16.157,4.892a.519.519,0,0,1,.734-.734l1.049,1.049a.507.507,0,0,1,0,.734A.476.476,0,0,1,17.574,6.1Z" transform="translate(-16 -4)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1475" data-name="Gruppe 1475" transform="translate(7.344 7.344)">
+        <g id="Gruppe_1474" data-name="Gruppe 1474">
+          <path id="Pfad_545" data-name="Pfad 545" d="M14.525,16.1A.5.5,0,0,1,14,15.574V14.525a.525.525,0,1,1,1.049,0v1.049A.5.5,0,0,1,14.525,16.1Z" transform="translate(-14 -14)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1477" data-name="Gruppe 1477" transform="translate(7.344)">
+        <g id="Gruppe_1476" data-name="Gruppe 1476">
+          <path id="Pfad_546" data-name="Pfad 546" d="M14.525,2.1A.5.5,0,0,1,14,1.574V.525a.525.525,0,0,1,1.049,0V1.574A.5.5,0,0,1,14.525,2.1Z" transform="translate(-14)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1479" data-name="Gruppe 1479" transform="translate(3.147 4.196)">
+        <g id="Gruppe_1478" data-name="Gruppe 1478">
+          <path id="Pfad_547" data-name="Pfad 547" d="M7.574,9.049H6.525A.525.525,0,0,1,6.525,8H7.574a.525.525,0,0,1,0,1.049Z" transform="translate(-6 -8)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1481" data-name="Gruppe 1481" transform="translate(10.491 4.196)">
+        <g id="Gruppe_1480" data-name="Gruppe 1480">
+          <path id="Pfad_548" data-name="Pfad 548" d="M21.574,9.049H20.525a.525.525,0,0,1,0-1.049h1.049a.525.525,0,1,1,0,1.049Z" transform="translate(-20 -8)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1483" data-name="Gruppe 1483" transform="translate(3.986 0.839)">
+        <g id="Gruppe_1482" data-name="Gruppe 1482">
+          <path id="Pfad_549" data-name="Pfad 549" d="M9.279,3.8a.476.476,0,0,1-.367-.157L7.757,2.492a.519.519,0,0,1,.734-.734l1.1,1.1a.507.507,0,0,1,0,.734A.326.326,0,0,1,9.279,3.8Z" transform="translate(-7.6 -1.6)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1485" data-name="Gruppe 1485" transform="translate(9.599 6.452)">
+        <g id="Gruppe_1484" data-name="Gruppe 1484">
+          <path id="Pfad_550" data-name="Pfad 550" d="M19.926,14.451a.476.476,0,0,1-.367-.157l-1.1-1.1a.519.519,0,1,1,.734-.734l1.1,1.1a.507.507,0,0,1,0,.734A.567.567,0,0,1,19.926,14.451Z" transform="translate(-18.3 -12.3)" fill="currentColor" />
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>

package/src/manager/window/WindowComponent.vue

@@ -19,7 +19,7 @@
       }"
       :draggable="isDynamic"
     >
-      <slot name="headerComponent" />
+      <slot name="headerComponent" :props="$attrs" />
     </div>
     <v-divider />
     <div
@@ -40,7 +40,7 @@
 
 <script>
   import {
-    onMounted, onUnmounted, computed, ref, nextTick,
+    onMounted, onUnmounted, computed, ref, nextTick, inject, provide,
   } from 'vue';
   import { fromEvent } from 'rxjs';
   import { switchMap, take, map, tap } from 'rxjs/operators';
@@ -133,6 +133,13 @@
           dropSub.unsubscribe();
         }
       });
+
+      const app = inject('vcsApp');
+      const { provides } = app.windowManager.get(windowState.id);
+      Object.entries(provides)
+        .forEach(([key, value]) => {
+          provide(key, value);
+        });
       return {
         isDynamic,
         isDocked,

package/src/manager/window/WindowComponentHeader.vue

@@ -10,29 +10,55 @@
         {{ $t(windowState.headerTitle) }}
       </h3>
     </span>
-    <VcsButton
-      @click.stop="close"
-      small
-      icon="mdi-close-thick"
-    />
+    <div class="d-flex justify-space-between align-center">
+      <template v-if="windowState.headerActions?.length > 0">
+        <VcsActionButtonList
+          :actions="windowState.headerActions"
+          :overflow-count="windowState.headerActionsOverflowCount ?? 3"
+          small
+        />
+        <v-divider
+          vertical
+          inset
+          class="mx-2"
+        />
+      </template>
+      <VcsButton
+        @click.stop="close"
+        small
+        icon="mdi-close-thick"
+        tooltip="components.close"
+      />
+    </div>
   </span>
 </template>
 
-<style>
+<style lang="scss" scoped>
 .window-component-header{
   max-height: 16px;
+
+  .v-divider--vertical.v-divider--inset {
+    margin-top: 2px;
+  }
 }
 </style>
 
 <script>
-  import { VIcon } from 'vuetify/lib';
+  import { VIcon, VDivider } from 'vuetify/lib';
   import VcsButton from '../../components/buttons/VcsButton.vue';
+  import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
 
+  /**
+   * Default window component header with drag functionality close action and further optional window actions.
+   * @vue-prop {WindowState}    windowState - state of the window component.
+   */
   export default {
     name: 'WindowComponentHeader',
     components: {
+      VcsActionButtonList,
       VcsButton,
       VIcon,
+      VDivider,
     },
     props: {
       windowState: {

package/src/manager/window/WindowManager.vue

@@ -23,6 +23,7 @@
         <component
           :is="getHeaderComponent(id)"
           :window-state="getState(id)"
+          v-bind="getProps(id)"
           @close="close(id)"
         />
       </template>

package/src/manager/window/windowManager.js

@@ -78,6 +78,7 @@ export const WindowPositions = {
  * @property {WindowState} [state]
  * @property {WindowSlot} [slot] If WindowSlot is not detached the position will be ignored
  * @property {Object} [props]
+ * @property {Object} [provides]
  */
 
 /**
@@ -87,6 +88,8 @@ export const WindowPositions = {
  * @property {boolean} [hideHeader] be used to not show the header.
  * @property {string} [headerTitle]
  * @property {string} [headerIcon]
+ * @property {Array<VcsAction>} [headerActions]
+ * @property {number} [headerActionsOverflowCount]
  * @property {Object<string, string>} styles[styles] Can be used to add additional styles to the root WindowComponent. Use Vue Style Bindings Object Syntax https://vuejs.org/v2/guide/class-and-style.html
  * @property {Array<string>|Object<string,string>} [classes] Can be used to add additional classes to the root WindowComponent. Use Vue Class Bindings Syntax https://vuejs.org/v2/guide/class-and-style.html
  */
@@ -100,6 +103,7 @@ export const WindowPositions = {
  * @property {WindowState} state
  * @property {Ref<UnwrapRef<WindowSlot>>} slot
  * @property {Object} props
+ * @property {Object} provides
  */
 
 /**
@@ -417,7 +421,7 @@ class WindowManager {
   /**
    * adds a windowComponent to the WindowManager and renders the Window at the provided position/slot.
    * The reactive WindowState Object can be used to watch Changes on position/WindowSlot.
-   * The WindowState Object can also be used to change hideHeader, headerTitle, headerIcon, styles and classes
+   * The WindowState Object can also be used to change hideHeader, headerTitle, headerIcon, headerActions, styles and classes
    * @param {WindowComponentOptions|WindowComponent} windowComponentOptions
    * @param {string|symbol} owner pluginName or vcsAppSymbol
    * @throws {Error} if a windowComponent with the same ID has already been added
@@ -450,11 +454,14 @@ class WindowManager {
       hideHeader: !!windowComponentOptions?.state?.hideHeader,
       headerTitle: windowComponentOptions?.state?.headerTitle,
       headerIcon: windowComponentOptions?.state?.headerIcon,
+      headerActions: windowComponentOptions?.state?.headerActions,
+      headerActionsOverflow: windowComponentOptions?.state?.headerActionsOverflow,
       classes,
       styles,
     });
 
     const props = windowComponentOptions.props || {};
+    const provides = windowComponentOptions.provides || {};
 
     const position = reactive(windowPosition);
     /**
@@ -482,6 +489,9 @@ class WindowManager {
       get props() {
         return props;
       },
+      get provides() {
+        return provides;
+      },
     };
     this._removeWindowAtSlot(slot);
     this._windowComponents.set(id, windowComponent);

package/src/navigation/overviewMap.js

@@ -205,7 +205,7 @@ class OverviewMap {
           clone.activate();
           const idx = this._map.layerCollection.indexOf(clone);
           if (idx < 0) {
-            this._map.layerCollection.add(clone);
+            this._map.layerCollection.add(clone, 0);
           } else {
             this._map.layerCollection.remove(clone);
             this._map.layerCollection.add(clone, idx);
@@ -298,6 +298,7 @@ class OverviewMap {
       this._setupMapInteraction();
     }
     await this._map.activate();
+    this.map.setTarget('overview-map-container');
     if (!this._active) {
       this._mapActivatedListener = this._app.maps.mapActivated.addEventListener(() => {
         this._clearListeners();
@@ -323,7 +324,6 @@ class OverviewMap {
       this._app.windowManager.add(getWindowComponentOptions(), vcsAppSymbol);
     }
     await this._activate();
-    this.map.setTarget('overview-map-container');
   }
 
   /**
@@ -347,9 +347,10 @@ class OverviewMap {
   async _initializePostRenderHandler(map) {
     if (!this._cameraIconLayer) {
       this._setupCameraIconLayer();
+      this._syncCameraViewAndFeature();
     }
     const navRemover = this._addNavigationListener(map);
-    const prRemover = map.postRender.addEventListener(this._addCameraFeature.bind(this));
+    const prRemover = map.postRender.addEventListener(this._syncCameraViewAndFeature.bind(this));
     const cleanupTasks = () => {
       prRemover();
       navRemover();
@@ -513,7 +514,7 @@ class OverviewMap {
    * Adds and maintains the view and camera feature
    * @private
    */
-  _addCameraFeature() {
+  _syncCameraViewAndFeature() {
     const viewpoint = this._app.maps.activeMap?.getViewpointSync();
     if (!viewpoint || !viewpoint.isValid() || viewpoint.equals(this._cachedViewpoint)) {
       return;
@@ -525,8 +526,6 @@ class OverviewMap {
     let { distance } = viewpoint;
     if (position[2] && !(distance && distance < position[2] * 4)) {
       distance = position[2] * 4;
-    } else if (position[2] == null) {
-      position[2] = distance;
     }
 
     distance = distance > this.minimumHeight ? distance : this.minimumHeight;
@@ -551,9 +550,11 @@ class OverviewMap {
     this.cameraIconStyle.image.setRotation(rotationRadians);
 
     viewpoint.heading = 0;
-    viewpoint.cameraPosition = position;
-    viewpoint.groundPosition = null;
-    viewpoint.distance = distance * 4;
+    if (viewpoint.cameraPosition) {
+      viewpoint.cameraPosition = position;
+      viewpoint.groundPosition = null;
+      viewpoint.distance = distance * 4;
+    }
     this._map.gotoViewpoint(viewpoint);
   }