@vcmap/ui 5.0.0-rc.23 → 5.0.0-rc.25

package/src/navigation/mapNavigation.vue

@@ -1,24 +1,16 @@
 <template>
-  <v-container :class="$vuetify.breakpoint.xs ? 'nav-container mobile' : 'nav-container'">
+  <v-container
+    :class="$vuetify.breakpoint.xs ? 'nav-container mobile' : 'nav-container'"
+  >
     <v-row>
-      <VcsCompass
-        :view-mode="viewMode"
-        v-model="heading"
-      />
+      <VcsCompass :view-mode="viewMode" v-model="heading" />
     </v-row>
-    <v-row
-      v-if="isOblique"
-    >
-      <ObliqueRotation
-        v-model="heading"
-      />
+    <v-row v-if="isOblique">
+      <ObliqueRotation v-model="heading" />
     </v-row>
     <template v-if="$vuetify.breakpoint.mdAndUp">
       <v-row justify="center">
-        <VcsZoomButton
-          @zoom-out="zoomOut()"
-          @zoom-in="zoomIn()"
-        />
+        <VcsZoomButton @zoom-out="zoomOut()" @zoom-in="zoomIn()" />
       </v-row>
       <v-row justify="center" v-if="is3D && $vuetify.breakpoint.mdAndUp">
         <TiltSlider v-model="tilt" />
@@ -33,6 +25,7 @@
       </v-row>
       <v-row justify="center">
         <OrientationToolsButton
+          v-if="showOverviewButton"
           :icon="overviewAction.icon"
           :tooltip="overviewAction.title"
           :color="overviewAction.active ? 'primary' : undefined"
@@ -44,13 +37,17 @@
 </template>
 
 <script>
-  import {
-    computed, inject, ref, reactive, onUnmounted,
-  } from 'vue';
+  import { computed, inject, ref, reactive, onUnmounted } from 'vue';
   import { ObliqueMap, CesiumMap } from '@vcmap/core';
   import { VContainer, VRow } from 'vuetify/lib';
-  import { createGoToViewpointAction, createOverviewMapAction } from '../actions/actionHelper.js';
-  import { getWindowComponentOptions } from './overviewMap.js';
+  import {
+    createGoToViewpointAction,
+    createOverviewMapAction,
+  } from '../actions/actionHelper.js';
+  import {
+    getWindowComponentOptions,
+    overviewMapLayerSymbol,
+  } from './overviewMap.js';
   import VcsCompass from './vcsCompass.vue';
   import VcsZoomButton from './vcsZoomButton.vue';
   import TiltSlider from './tiltSlider.vue';
@@ -63,7 +60,12 @@
    * @returns {{action: import("vue").Reactive<{}>, destroy: function():void}}
    */
   function setupHomeButton(app) {
-    const initialAction = { icon: undefined, title: undefined, active: undefined, callback: undefined };
+    const initialAction = {
+      icon: undefined,
+      title: undefined,
+      active: undefined,
+      callback: undefined,
+    };
     const action = reactive({ ...initialAction });
     /**
      * Gets the starting viewpoint of the last added module, where a startingViewpointName was defined
@@ -73,7 +75,10 @@
       let viewpoint = null;
       for (let idx = app.modules.length - 1; idx >= 0; idx--) {
         const { startingViewpointName } = app.modules[idx].config;
-        if (startingViewpointName && app.viewpoints.hasKey(startingViewpointName)) {
+        if (
+          startingViewpointName &&
+          app.viewpoints.hasKey(startingViewpointName)
+        ) {
           viewpoint = app.viewpoints.getByKey(startingViewpointName);
           break;
         }
@@ -81,16 +86,19 @@
       if (!viewpoint) {
         Object.assign(action, { ...initialAction });
       } else {
-        Object.assign(action, createGoToViewpointAction(
-          {
-            name: 'home-action',
-            title: 'navigation.homeButton',
-            icon: '$vcsHomePoint',
-          },
-          viewpoint,
-          app.viewpoints,
-          app.maps,
-        ));
+        Object.assign(
+          action,
+          createGoToViewpointAction(
+            {
+              name: 'home-action',
+              title: 'navigation.homeButton',
+              icon: '$vcsHomePoint',
+            },
+            viewpoint,
+            app.viewpoints,
+            app.maps,
+          ),
+        );
       }
     };
 
@@ -99,7 +107,9 @@
       app.moduleRemoved.addEventListener(updateStartingViewpoint),
     ];
 
-    const destroy = () => { listener.forEach(cb => cb()); };
+    const destroy = () => {
+      listener.forEach((cb) => cb());
+    };
 
     return { action, destroy };
   }
@@ -167,12 +177,15 @@
         }
       };
 
-      const postRenderHandler = app.maps.postRender.addEventListener(handleRenderEvent);
+      const postRenderHandler =
+        app.maps.postRender.addEventListener(handleRenderEvent);
       if (app.maps.activeMap) {
         handleRenderEvent({ map: app.maps.activeMap });
       }
       const heading = computed({
-        get() { return headingRef.value; },
+        get() {
+          return headingRef.value;
+        },
         async set(headingValue) {
           let vp;
           if (viewMode.value === OrientationToolsViewMode.OBLIQUE) {
@@ -186,7 +199,9 @@
       });
 
       const tilt = computed({
-        get() { return tiltRef.value; },
+        get() {
+          return tiltRef.value;
+        },
         set(tiltValue) {
           const vp = app.maps.activeMap.getViewpointSync(); // XXX make async and debounce
           vp.pitch = tiltValue;
@@ -194,19 +209,40 @@
         },
       });
 
-      const { action, destroy } = createOverviewMapAction(
-        app.overviewMap,
-        getWindowComponentOptions(),
-        app.windowManager,
+      const { action: overviewAction, destroy: overviewDestroy } =
+        createOverviewMapAction(
+          app.overviewMap,
+          getWindowComponentOptions(),
+          app.windowManager,
+        );
+      const showOverviewButton = ref(
+        app.overviewMap.map.layerCollection.size > 0,
       );
+      const overviewMapListeners = [
+        app.overviewMap.map.layerCollection.added.addEventListener(() => {
+          showOverviewButton.value = true;
+        }),
+        app.overviewMap.map.layerCollection.removed.addEventListener(() => {
+          if (
+            [...app.overviewMap.map.layerCollection].filter(
+              (l) => !l[overviewMapLayerSymbol],
+            ).length < 1 &&
+            app.overviewMap.active
+          ) {
+            app.overviewMap.deactivate();
+            showOverviewButton.value = false;
+          }
+        }),
+      ];
 
       const { action: homeAction, destroy: homeDestroy } = setupHomeButton(app);
 
       onUnmounted(() => {
-        if (destroy) {
-          destroy();
+        if (overviewDestroy) {
+          overviewDestroy();
         }
         postRenderHandler();
+        overviewMapListeners.forEach((cb) => cb());
         homeDestroy();
       });
 
@@ -214,11 +250,20 @@
         viewMode,
         heading,
         tilt,
-        is3D: computed(() => viewMode.value === OrientationToolsViewMode.THREE_D),
-        isOblique: computed(() => viewMode.value === OrientationToolsViewMode.OBLIQUE),
-        zoomIn() { zoom(app.maps.activeMap); }, // debounce?
-        zoomOut() { zoom(app.maps.activeMap, true); },
-        overviewAction: reactive(action),
+        is3D: computed(
+          () => viewMode.value === OrientationToolsViewMode.THREE_D,
+        ),
+        isOblique: computed(
+          () => viewMode.value === OrientationToolsViewMode.OBLIQUE,
+        ),
+        zoomIn() {
+          zoom(app.maps.activeMap);
+        }, // debounce?
+        zoomOut() {
+          zoom(app.maps.activeMap, true);
+        },
+        overviewAction: reactive(overviewAction),
+        showOverviewButton,
         homeAction,
       };
     },
@@ -231,7 +276,7 @@
     right: 2rem;
     bottom: 1rem;
     width: unset;
-    &.mobile{
+    &.mobile {
       top: 1rem;
       right: 1rem;
       bottom: auto;

package/src/navigation/obliqueRotation.vue

@@ -50,20 +50,18 @@
 <style lang="scss" scoped>
   .vcs-oblique-orientation {
     box-shadow: rgba(0, 0, 0, 0.15) 0 2px 2px 0;
-    .inner{
+    .inner {
       box-shadow: rgba(0, 0, 0, 0.25) 0 -2px 2px 0 inset;
     }
     ::v-deep {
-      .btn-orientation-tools{
-        &:first-child{
+      .btn-orientation-tools {
+        &:first-child {
           box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 1px -2px,
-          rgba(0, 0, 0, 0.02) -3px 2px 2px 0,
-          rgba(0, 0, 0, 0.12) 0 1px 1px 0 !important;
+            rgba(0, 0, 0, 0.02) -3px 2px 2px 0, rgba(0, 0, 0, 0.12) 0 1px 1px 0 !important;
         }
-        &:last-child{
+        &:last-child {
           box-shadow: rgba(0, 0, 0, 0.02) 1px 4px 1px -2px,
-          rgba(0, 0, 0, 0.02) 1px 2px 1px 0,
-          rgba(0, 0, 0, 0.1) 1px 1px 1px 0 !important;
+            rgba(0, 0, 0, 0.02) 1px 2px 1px 0, rgba(0, 0, 0, 0.1) 1px 1px 1px 0 !important;
         }
       }
     }

package/src/navigation/orientationToolsButton.vue

@@ -1,25 +1,22 @@
 <template>
-  <VcsTooltip
-    :tooltip-position="tooltipPosition"
-    :tooltip="tooltip"
-  >
+  <VcsTooltip :tooltip-position="tooltipPosition" :tooltip="tooltip">
     <template #activator="{ on, attrs }">
       <v-card
         class="h-8 w-8 d-flex align-center justify-center text-center btn-orientation-tools"
         v-bind="{ ...$attrs, ...attrs }"
         v-on="{ ...$listeners, ...on }"
       >
-        <v-icon v-text="icon" size="16" />
+        <v-icon size="16">{{ icon }}</v-icon>
       </v-card>
     </template>
   </VcsTooltip>
 </template>
 <style lang="scss" scoped>
-.btn-orientation-tools{
-  &:before{
-    background-color: transparent !important;
+  .btn-orientation-tools {
+    &:before {
+      background-color: transparent !important;
+    }
   }
-}
 </style>
 <script>
   import { VCard, VIcon } from 'vuetify/lib';

package/src/navigation/overviewMap.js

@@ -20,10 +20,15 @@ import VectorSource from 'ol/source/Vector.js';
 import { Icon } from 'ol/style.js';
 import { WindowSlot } from '../manager/window/windowManager.js';
 import OverviewMapClickedInteraction from './overviewMapClickedInteraction.js';
-import { getDefaultPrimaryColor, getColorByKey } from '../vuePlugins/vuetify.js';
+import {
+  getDefaultPrimaryColor,
+  getColorByKey,
+} from '../vuePlugins/vuetify.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import VcsMap from '../application/VcsMap.vue';
 
+export const overviewMapLayerSymbol = Symbol('overviewMapLayerSymbol');
+
 /**
  * @returns {WindowComponentOptions}
  */
@@ -52,7 +57,27 @@ export function getWindowComponentOptions() {
  */
 function getCameraIcon(color) {
   return {
-    src: `data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22121.58616%22%20height%3D%2274.204994%22%20viewBox%3D%220%200%2032.169671%2019.633405%22%20version%3D%221.1%22%20id%3D%22svg216%22%3E%3Cdefs%20id%3D%22defs213%22%3E%3ClinearGradient%20id%3D%221-0%22%20x1%3D%2240.529999%22%20y1%3D%2248.970001%22%20x2%3D%2240.529999%22%20y2%3D%220.25%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20id%3D%22stop399%22%2F%3E%3Cstop%20offset%3D%22.46%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.60%22%20id%3D%22stop401%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.40%22%20id%3D%22stop403%22%2F%3E%3Cstop%20offset%3D%22.83%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.20%22%20id%3D%22stop405%22%2F%3E%3Cstop%20offset%3D%22.89%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.15%22%20id%3D%22stop407%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22transparent%22%20stop-opacity%3D%220%22%20id%3D%22stop409%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%222-9%22%20x1%3D%2240.529999%22%20y1%3D%2249.369999%22%20x2%3D%2240.529999%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.24%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20id%3D%22stop412%22%2F%3E%3Cstop%20offset%3D%22.38%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.93%22%20id%3D%22stop414%22%2F%3E%3Cstop%20offset%3D%22.57%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.70%22%20id%3D%22stop416%22%2F%3E%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.38%22%20id%3D%22stop418%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22transparent%22%20stop-opacity%3D%220%22%20id%3D%22stop420%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20id%3D%22layer1%22%20transform%3D%22translate(5.3616118%2C3.2722342)%22%3E%3Cpolygon%20points%3D%220.53%2C0.25%2040.53%2C48.97%2080.53%2C0.25%20%22%20fill%3D%22url(%231)%22%20stroke%3D%22url(%232)%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%220.5px%22%20id%3D%22polygon425%22%20style%3D%22fill%3Aurl(%231-0)%3Bstroke%3Aurl(%232-9)%22%20transform%3D%22matrix(0.396875%2C0%2C0%2C0.396875%2C-5.3621201%2C-3.2722342)%22%2F%3E%3Ccircle%20cx%3D%2210.723224%22%20cy%3D%2213.781484%22%20r%3D%222.3812499%22%20fill%3D%22${encodeURIComponent(color)}%22%20stroke%3D%22%23ffffff%22%20stroke-miterlimit%3D%2210%22%20id%3D%22circle427%22%20style%3D%22stroke-width%3A0.396874%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E`,
+    src: `data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22121.58616%22%20height%3D%2274.204994%22%20viewBox%3D%220%200%2032.169671%2019.633405%22%20version%3D%221.1%22%20id%3D%22svg216%22%3E%3Cdefs%20id%3D%22defs213%22%3E%3ClinearGradient%20id%3D%221-0%22%20x1%3D%2240.529999%22%20y1%3D%2248.970001%22%20x2%3D%2240.529999%22%20y2%3D%220.25%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22${encodeURIComponent(
+      color,
+    )}%22%20id%3D%22stop399%22%2F%3E%3Cstop%20offset%3D%22.46%22%20stop-color%3D%22${encodeURIComponent(
+      color,
+    )}%22%20stop-opacity%3D%22.60%22%20id%3D%22stop401%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22${encodeURIComponent(
+      color,
+    )}%22%20stop-opacity%3D%22.40%22%20id%3D%22stop403%22%2F%3E%3Cstop%20offset%3D%22.83%22%20stop-color%3D%22${encodeURIComponent(
+      color,
+    )}%22%20stop-opacity%3D%22.20%22%20id%3D%22stop405%22%2F%3E%3Cstop%20offset%3D%22.89%22%20stop-color%3D%22${encodeURIComponent(
+      color,
+    )}%22%20stop-opacity%3D%22.15%22%20id%3D%22stop407%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22transparent%22%20stop-opacity%3D%220%22%20id%3D%22stop409%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%222-9%22%20x1%3D%2240.529999%22%20y1%3D%2249.369999%22%20x2%3D%2240.529999%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.24%22%20stop-color%3D%22${encodeURIComponent(
+      color,
+    )}%22%20id%3D%22stop412%22%2F%3E%3Cstop%20offset%3D%22.38%22%20stop-color%3D%22${encodeURIComponent(
+      color,
+    )}%22%20stop-opacity%3D%22.93%22%20id%3D%22stop414%22%2F%3E%3Cstop%20offset%3D%22.57%22%20stop-color%3D%22${encodeURIComponent(
+      color,
+    )}%22%20stop-opacity%3D%22.70%22%20id%3D%22stop416%22%2F%3E%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22${encodeURIComponent(
+      color,
+    )}%22%20stop-opacity%3D%22.38%22%20id%3D%22stop418%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22transparent%22%20stop-opacity%3D%220%22%20id%3D%22stop420%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20id%3D%22layer1%22%20transform%3D%22translate(5.3616118%2C3.2722342)%22%3E%3Cpolygon%20points%3D%220.53%2C0.25%2040.53%2C48.97%2080.53%2C0.25%20%22%20fill%3D%22url(%231)%22%20stroke%3D%22url(%232)%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%220.5px%22%20id%3D%22polygon425%22%20style%3D%22fill%3Aurl(%231-0)%3Bstroke%3Aurl(%232-9)%22%20transform%3D%22matrix(0.396875%2C0%2C0%2C0.396875%2C-5.3621201%2C-3.2722342)%22%2F%3E%3Ccircle%20cx%3D%2210.723224%22%20cy%3D%2213.781484%22%20r%3D%222.3812499%22%20fill%3D%22${encodeURIComponent(
+      color,
+    )}%22%20stroke%3D%22%23ffffff%22%20stroke-miterlimit%3D%2210%22%20id%3D%22circle427%22%20style%3D%22stroke-width%3A0.396874%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E`,
     color,
   };
 }
@@ -111,22 +136,10 @@ class OverviewMap {
      */
     this._obliqueSelectedImageLayer = null;
 
-    const primary = app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor();
+    const primary =
+      app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor();
     const fillColor = Color.fromCssColorString('#EDEDED');
 
-    /**
-     * @type {VectorStyleItem}
-     */
-    this.obliqueUnselectedStyle = new VectorStyleItem({
-      fill: {
-        color: fillColor.withAlpha(0.1).toCssColorString(),
-      },
-      stroke: {
-        color: primary,
-        width: 1,
-      },
-    });
-
     /**
      * @type {VectorStyleItem}
      */
@@ -228,7 +241,9 @@ class OverviewMap {
           this._map.layerCollection.remove(clone);
         }
       }),
-      this._app.themeChanged.addEventListener(this._updatePrimaryColor.bind(this)),
+      this._app.themeChanged.addEventListener(
+        this._updatePrimaryColor.bind(this),
+      ),
     ];
   }
 
@@ -269,15 +284,14 @@ class OverviewMap {
    */
   _updatePrimaryColor() {
     const color = getColorByKey('primary');
-    this.obliqueUnselectedStyle?.stroke?.setColor(color);
     this.obliqueSelectedStyle?.stroke?.setColor(color);
-    this._obliqueTileLayer?.forceRedraw?.();
-    this._obliqueImageLayer?.forceRedraw?.();
     this._obliqueSelectedImageLayer?.forceRedraw?.();
     const rotation = this.cameraIconStyle.image.getRotation();
     this.cameraIconStyle.image = new Icon(getCameraIcon(color));
     this.cameraIconStyle.image.setRotation(rotation);
-    this._cameraIconLayer?.getFeatureById('cameraFeature')?.setStyle(this.cameraIconStyle.style);
+    this._cameraIconLayer
+      ?.getFeatureById('cameraFeature')
+      ?.setStyle(this.cameraIconStyle.style);
   }
 
   /**
@@ -288,9 +302,10 @@ class OverviewMap {
     const overviewMapClickedInteraction = new OverviewMapClickedInteraction();
     this._mapClicked = overviewMapClickedInteraction.mapClicked;
     this._eventHandler.addPersistentInteraction(overviewMapClickedInteraction);
-    this._mapPointerListener = this._map.pointerInteractionEvent.addEventListener((e) => {
-      this._eventHandler.handleMapEvent(e);
-    });
+    this._mapPointerListener =
+      this._map.pointerInteractionEvent.addEventListener((e) => {
+        this._eventHandler.handleMapEvent(e);
+      });
   }
 
   /**
@@ -306,17 +321,19 @@ class OverviewMap {
     this._map.setTarget('overview-map-container');
     this._map.target?.firstChild?.classList?.add('overviewMapElement');
     if (!this._active) {
-      this._mapActivatedListener = this._app.maps.mapActivated.addEventListener(() => {
-        this._clearListeners();
-        this._cachedViewpoint = null;
-        this._activate();
-      });
+      this._mapActivatedListener = this._app.maps.mapActivated.addEventListener(
+        () => {
+          this._clearListeners();
+          this._cachedViewpoint = null;
+          this._activate();
+        },
+      );
     }
     this._active = true;
     const { activeMap } = this._app.maps;
     if (activeMap instanceof ObliqueMap) {
       await this._initializeForOblique(activeMap);
-    } else {
+    } else if (activeMap) {
       await this._initializePostRenderHandler(activeMap);
     }
   }
@@ -356,7 +373,9 @@ class OverviewMap {
       this._syncCameraViewAndFeature();
     }
     const navRemover = this._addNavigationListener(map);
-    const prRemover = map.postRender.addEventListener(this._syncCameraViewAndFeature.bind(this));
+    const prRemover = map.postRender.addEventListener(
+      this._syncCameraViewAndFeature.bind(this),
+    );
     const cleanupTasks = () => {
       prRemover();
       navRemover();
@@ -379,8 +398,10 @@ class OverviewMap {
       if (e.feature) {
         const id = e.feature.getId().toString();
         if (this._obliqueTileLayer.getFeatureById(id)) {
-          const image = await obliqueMap.collection
-            .loadImageForCoordinate(e.positionOrPixel, this._obliqueViewDirection);
+          const image = await obliqueMap.collection.loadImageForCoordinate(
+            e.positionOrPixel,
+            this._obliqueViewDirection,
+          );
           if (image) {
             await obliqueMap.setImageByName(image.name);
           }
@@ -392,8 +413,12 @@ class OverviewMap {
 
     const listeners = [
       mapClickedListener,
-      obliqueMap.imageChanged.addEventListener(this._obliqueImageChange.bind(this)),
-      obliqueMap.collectionChanged.addEventListener(this._obliqueCollectionChanged.bind(this)),
+      obliqueMap.imageChanged.addEventListener(
+        this._obliqueImageChange.bind(this),
+      ),
+      obliqueMap.collectionChanged.addEventListener(
+        this._obliqueCollectionChanged.bind(this),
+      ),
     ];
 
     const prUnKey = this._map.olMap.once('postrender', () => {
@@ -406,7 +431,9 @@ class OverviewMap {
       this._obliqueImageLayer.deactivate();
       this._obliqueSelectedImageLayer.deactivate();
       unByKey(prUnKey);
-      listeners.forEach((l) => { l(); });
+      listeners.forEach((l) => {
+        l();
+      });
     };
     this._listeners.push(cleanupTasks);
     await this._obliqueTileLayer.activate();
@@ -455,10 +482,13 @@ class OverviewMap {
    * @private
    */
   _setupObliqueLayers() {
+    const almostTransparentStyle = new VectorStyleItem({
+      fill: { color: 'rgba(0, 0, 0, 0.000001)' },
+    });
     const obliqueTileStyle = new VectorStyleItem({});
     obliqueTileStyle.style = (feature) => {
       if (feature.get('state') === DataState.PENDING) {
-        return /** @type {ol/style/Style} */ (this.obliqueUnselectedStyle.style);
+        return almostTransparentStyle.style;
       }
       return emptyStyle;
     };
@@ -468,11 +498,12 @@ class OverviewMap {
       style: obliqueTileStyle,
       zIndex: 1,
     });
+    this._obliqueTileLayer[overviewMapLayerSymbol] = true;
 
     const obliqueImageStyle = new VectorStyleItem({});
     obliqueImageStyle.style = (feature) => {
       if (feature.get('viewDirection') === this._obliqueViewDirection) {
-        return this.obliqueUnselectedStyle.style;
+        return almostTransparentStyle.style;
       }
       return emptyStyle;
     };
@@ -481,10 +512,12 @@ class OverviewMap {
       projection: mercatorProjection.toJSON(),
       style: obliqueImageStyle,
     });
+    this._obliqueImageLayer[overviewMapLayerSymbol] = true;
     this._obliqueSelectedImageLayer = new VectorLayer({
       projection: mercatorProjection.toJSON(),
       style: this.obliqueSelectedStyle,
     });
+    this._obliqueSelectedImageLayer[overviewMapLayerSymbol] = true;
     this._map.layerCollection.add(this._obliqueImageLayer);
     this._map.layerCollection.add(this._obliqueSelectedImageLayer);
     this._map.layerCollection.add(this._obliqueTileLayer);
@@ -512,6 +545,7 @@ class OverviewMap {
         projection: mercatorProjection.toJSON(),
         zIndex: 50,
       });
+      this._cameraIconLayer[overviewMapLayerSymbol] = true;
       this._map.layerCollection.add(this._cameraIconLayer);
     }
   }
@@ -522,7 +556,11 @@ class OverviewMap {
    */
   _syncCameraViewAndFeature() {
     const viewpoint = this._app.maps.activeMap?.getViewpointSync();
-    if (!viewpoint || !viewpoint.isValid() || viewpoint.equals(this._cachedViewpoint)) {
+    if (
+      !viewpoint ||
+      !viewpoint.isValid() ||
+      viewpoint.equals(this._cachedViewpoint)
+    ) {
       return;
     }
     this._cachedViewpoint = viewpoint.clone();
@@ -569,13 +607,13 @@ class OverviewMap {
    * @private
    */
   _clearListeners() {
-    this._listeners.forEach(cb => cb());
+    this._listeners.forEach((cb) => cb());
     this._listeners.splice(0);
   }
 
   destroy() {
     this._clearListeners();
-    this._collectionListeners.forEach(cb => cb());
+    this._collectionListeners.forEach((cb) => cb());
     this._collectionListeners = [];
     if (this._mapPointerListener) {
       this._mapPointerListener();
@@ -607,7 +645,6 @@ class OverviewMap {
       this._eventHandler.destroy();
     }
     this.cameraIconStyle.destroy();
-    this.obliqueUnselectedStyle.destroy();
     this.obliqueSelectedStyle.destroy();
     this._cachedViewpoint = null;
     this._mapClicked = null;

package/src/navigation/overviewMapClickedInteraction.js

@@ -1,4 +1,9 @@
-import { VcsEvent, EventType, ModificationKeyType, AbstractInteraction } from '@vcmap/core';
+import {
+  VcsEvent,
+  EventType,
+  ModificationKeyType,
+  AbstractInteraction,
+} from '@vcmap/core';
 
 /**
  * @class

package/src/navigation/tiltSlider.vue

@@ -4,11 +4,7 @@
     tooltip-position="left"
   >
     <template #activator="{ on, attrs }">
-      <v-card
-        class="w-8"
-        v-on="on"
-        v-bind="attrs"
-      >
+      <v-card class="w-8" v-on="on" v-bind="attrs">
         <v-slider
           track-color="base lighten-3"
           v-model="tilt"
@@ -24,21 +20,21 @@
 </template>
 <style lang="scss" scoped>
   @import '../styles/shades.scss';
-  .vcs-slider{
+  .vcs-slider {
     ::v-deep {
       .v-slider {
         min-height: 48px;
         margin-top: 8px;
         margin-bottom: 8px;
       }
-      .v-slider__thumb{
+      .v-slider__thumb {
         cursor: pointer;
         border-radius: 3px;
         width: 16px;
         height: 4px;
         border: 0;
         left: -8px;
-        &:before{
+        &:before {
           background-color: transparent;
         }
       }
@@ -47,7 +43,7 @@
   .v-application .theme--light.vcs-slider {
     ::v-deep {
       .v-slider {
-        .v-slider__track-container{
+        .v-slider__track-container {
           .v-slider__track-fill {
             background-color: map-get($shades, 'black') !important;
           }
@@ -61,7 +57,7 @@
   .v-application .theme--dark.vcs-slider {
     ::v-deep {
       .v-slider {
-        .v-slider__track-container{
+        .v-slider__track-container {
           .v-slider__track-fill {
             background-color: map-get($shades, 'white') !important;
           }

package/src/navigation/vcsCompass.vue

@@ -4,14 +4,7 @@
       transform: `rotate(${compassRotation}deg)`,
     }"
     @click="$emit('input', 0)"
-    class="
-        h-16 w-16
-        d-flex flex-column justify-center align-center
-        position-relative
-        rounded-circle
-        user-select-none
-        transition-transform-200-ease
-      "
+    class="h-16 w-16 d-flex flex-column justify-center align-center position-relative rounded-circle user-select-none transition-transform-200-ease"
     elevation="1"
   >
     <span>N</span>
@@ -25,7 +18,6 @@
   </v-sheet>
 </template>
 
-
 <script>
   import { computed, ref } from 'vue';