@vcmap/ui 5.0.0-rc.8 → 5.0.0

package/src/navigation/VcsZoomButton.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="rounded vcs-navigation-zoom">
+    <div class="rounded inner">
+      <OrientationToolsButton
+        @click="$emit('zoom-in')"
+        icon="$vcsPlus"
+        tooltip="navigation.zoomInTooltip"
+        elevation="0"
+      />
+      <OrientationToolsButton
+        @click="$emit('zoom-out')"
+        icon="$vcsMinus"
+        tooltip="navigation.zoomOutTooltip"
+        elevation="0"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import OrientationToolsButton from './OrientationToolsButton.vue';
+
+  /**
+   * @description Zoom buttons rendered above each other.
+   * @vue-event {void} zoom-in - raised when zoom in is called
+   * @vue-event {void} zoom-out - raised when zoom out is called
+   */
+  export default {
+    components: { OrientationToolsButton },
+  };
+</script>
+<style lang="scss" scoped>
+  .vcs-navigation-zoom {
+    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 2px 0;
+    .inner {
+      box-shadow: rgba(0, 0, 0, 0.25) 0 0 10px 0 inset;
+    }
+    ::v-deep {
+      .btn-orientation-tools {
+        &:first-child {
+          box-shadow: rgba(0, 0, 0, 0.25) -2px 2px 1px -2px,
+            rgba(0, 0, 0, 0.08) 1px 0 0 0, rgba(0, 0, 0, 0.05) -1px 1px 1px 1px !important;
+        }
+        &:last-child {
+          box-shadow: rgba(0, 0, 0, 0.25) -2px 3px 1px -2px,
+            rgba(0, 0, 0, 0.08) 1px 4px 2px 0,
+            rgba(0, 0, 0, 0.05) -1px 1px 1px 1px !important;
+        }
+      }
+    }
+  }
+</style>

package/src/navigation/overviewMap.js

@@ -1,6 +1,5 @@
 import {
   OpenlayersMap,
-  CesiumMap,
   ObliqueMap,
   VectorLayer,
   VectorStyleItem,
@@ -10,20 +9,26 @@ import {
   DataState,
   emptyStyle,
   Extent,
-  ViewPoint,
+  Viewpoint,
   deserializeLayer,
 } from '@vcmap/core';
-import Point from 'ol/geom/Point';
-import Feature from 'ol/Feature';
-import { Math as CesiumMath, Color } from '@vcmap/cesium';
+import Point from 'ol/geom/Point.js';
+import Feature from 'ol/Feature.js';
+import { Math as CesiumMath, Color } from '@vcmap-cesium/engine';
 import { unByKey } from 'ol/Observable.js';
 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 { vuetify } 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}
  */
@@ -35,16 +40,48 @@ export function getWindowComponentOptions() {
     id: 'overview-map-container',
     state: {
       hideHeader: true,
+      classes: ['overview-map'],
     },
     position: {
       right: '100px',
       bottom: '25px',
-      width: '272px',
-      height: '223px',
+      width: '300px',
+      height: '240px',
     },
   };
 }
 
+/**
+ * @param {string} color
+ * @returns {import("ol/style/Icon").Options}
+ */
+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`,
+    color,
+  };
+}
+
 /**
  * A 2D OverviewMap for cesium, openlayers and oblique map.
  * Baselayers are added to the OverviewMap using `showInOverviewMap` flag within the properties bag of a layer configuration.
@@ -77,9 +114,9 @@ class OverviewMap {
 
     /**
      * @private
-     * @type {import("@vcmap/core").ViewPoint|null}
+     * @type {import("@vcmap/core").Viewpoint|null}
      */
-    this._cachedViewPoint = null;
+    this._cachedViewpoint = null;
 
     /**
      * @type {import("@vcmap/core").VectorLayer}
@@ -99,21 +136,9 @@ class OverviewMap {
      */
     this._obliqueSelectedImageLayer = null;
 
-    const { primary, accent } = vuetify.userPreset.theme.themes.light;
-    const fillColor = Color.fromCssColorString(accent);
-
-    /**
-     * @type {VectorStyleItem}
-     */
-    this.obliqueUnselectedStyle = new VectorStyleItem({
-      fill: {
-        color: fillColor.withAlpha(0.1).toCssColorString(),
-      },
-      stroke: {
-        color: primary,
-        width: 1,
-      },
-    });
+    const primary =
+      app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor();
+    const fillColor = Color.fromCssColorString('#EDEDED');
 
     /**
      * @type {VectorStyleItem}
@@ -152,10 +177,7 @@ class OverviewMap {
      * @type {import("@vcmap/core").VectorStyleItem}
      */
     this.cameraIconStyle = new VectorStyleItem({
-      image: {
-        src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA8CAYAAADxJz2MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphMzhlODgyYy00ZGYzLTZkNGMtYWZhYy1hYTkwOTI3MjRiYjEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEYxRkE1MDlENjRDMTFFNTlGRjhFMzM3RTA3MDJFMDciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEYxRkE1MDhENjRDMTFFNTlGRjhFMzM3RTA3MDJFMDciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OGJiODg5ODItZGM0Zi0xNjQyLWEyZDYtODJkZTcxMGNhNjkwIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzY5MTdhNjAtZDYzYy0xMWU1LThjNTgt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',
-        anchor: [0.5, 1],
-      },
+      image: getCameraIcon(getDefaultPrimaryColor()),
     });
 
     /**
@@ -199,7 +221,7 @@ class OverviewMap {
      * @type {Array<function():void>}
      * @private
      */
-    this._layerCollectionListener = [
+    this._collectionListeners = [
       this._app.maps.layerCollection.added.addEventListener((layer) => {
         if (layer.properties.showInOverviewMap) {
           const clone = deserializeLayer(this._app, layer.toJSON());
@@ -219,6 +241,9 @@ class OverviewMap {
           this._map.layerCollection.remove(clone);
         }
       }),
+      this._app.themeChanged.addEventListener(
+        this._updatePrimaryColor.bind(this),
+      ),
     ];
   }
 
@@ -254,6 +279,21 @@ class OverviewMap {
     return this._mapClicked;
   }
 
+  /**
+   * @private
+   */
+  _updatePrimaryColor() {
+    const color = getColorByKey('primary');
+    this.obliqueSelectedStyle?.stroke?.setColor(color);
+    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);
+  }
+
   /**
    * @private
    */
@@ -262,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);
+      });
   }
 
   /**
@@ -277,21 +318,23 @@ class OverviewMap {
       this._setupMapInteraction();
     }
     await this._map.activate();
+    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 CesiumMap) {
-      await this._initializeForCesium(activeMap);
-    } else if (activeMap instanceof OpenlayersMap) {
-      await this._initializeForOpenlayers(activeMap);
-    } else if (activeMap instanceof ObliqueMap) {
+    if (activeMap instanceof ObliqueMap) {
       await this._initializeForOblique(activeMap);
+    } else if (activeMap) {
+      await this._initializePostRenderHandler(activeMap);
     }
   }
 
@@ -304,7 +347,6 @@ class OverviewMap {
       this._app.windowManager.add(getWindowComponentOptions(), vcsAppSymbol);
     }
     await this._activate();
-    this.map.setTarget('overview-map-container');
   }
 
   /**
@@ -321,45 +363,22 @@ class OverviewMap {
   }
 
   /**
-   * @param {import("@vcmap/core").CesiumMap} cesiumMap
+   * @param {import("@vcmap/core").VcsMap} map
    * @returns {Promise<void>}
    * @private
    */
-  async _initializeForCesium(cesiumMap) {
+  async _initializePostRenderHandler(map) {
     if (!this._cameraIconLayer) {
       this._setupCameraIconLayer();
+      this._syncCameraViewAndFeature();
     }
-    if (cesiumMap.initialized) {
-      const cesiumViewer = cesiumMap.getCesiumWidget();
-      const cesiumScene = cesiumViewer.scene;
-      const navRemover = this._addNavigationListener(cesiumMap);
-      const prRemover = cesiumScene.postRender.addEventListener(this._addCameraFeature, this);
-      const cleanupTasks = () => {
-        prRemover();
-        navRemover();
-        this._cameraIconLayer.deactivate();
-      };
-      this._listeners.push(cleanupTasks);
-      await this._cameraIconLayer.activate();
-    }
-  }
-
-  /**
-   * @param {import("@vcmap/core").OpenlayersMap} map
-   * @returns {Promise<void>}
-   * @private
-   */
-  async _initializeForOpenlayers(map) {
-    if (!this._cameraIconLayer) {
-      this._setupCameraIconLayer();
-    }
-    const { olMap } = map;
-    const navListener = this._addNavigationListener(map);
-    const prUnKey = olMap.on('postrender', this._addCameraFeature.bind(this));
-
+    const navRemover = this._addNavigationListener(map);
+    const prRemover = map.postRender.addEventListener(
+      this._syncCameraViewAndFeature.bind(this),
+    );
     const cleanupTasks = () => {
-      unByKey(prUnKey);
-      navListener();
+      prRemover();
+      navRemover();
       this._cameraIconLayer.deactivate();
     };
     this._listeners.push(cleanupTasks);
@@ -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();
@@ -445,9 +472,9 @@ class OverviewMap {
         projection: mercatorProjection.toJSON(),
       });
 
-      const vp = ViewPoint.createViewPointFromExtent(extent);
+      const vp = Viewpoint.createViewpointFromExtent(extent);
       vp.distance /= this._obliqueResolutionFactor;
-      this._map.gotoViewPoint(vp);
+      this._map.gotoViewpoint(vp);
     }
   }
 
@@ -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);
@@ -497,12 +530,12 @@ class OverviewMap {
    */
   _addNavigationListener(activeMap) {
     return this._mapClicked.addEventListener((e) => {
-      const vp = activeMap.getViewPointSync();
+      const vp = activeMap.getViewpointSync();
       const height = vp.groundPosition[2] ? vp.groundPosition[2] : 0.0;
       vp.groundPosition = Projection.mercatorToWgs84(e.positionOrPixel);
       vp.groundPosition[2] = height;
       vp.cameraPosition = null;
-      activeMap.gotoViewPoint(vp);
+      activeMap.gotoViewpoint(vp);
     });
   }
 
@@ -512,6 +545,7 @@ class OverviewMap {
         projection: mercatorProjection.toJSON(),
         zIndex: 50,
       });
+      this._cameraIconLayer[overviewMapLayerSymbol] = true;
       this._map.layerCollection.add(this._cameraIconLayer);
     }
   }
@@ -520,20 +554,22 @@ class OverviewMap {
    * Adds and maintains the view and camera feature
    * @private
    */
-  _addCameraFeature() {
-    const viewpoint = this._app.maps.activeMap.getViewPointSync();
-    if (!viewpoint || !viewpoint.isValid() || viewpoint.equals(this._cachedViewPoint)) {
+  _syncCameraViewAndFeature() {
+    const viewpoint = this._app.maps.activeMap?.getViewpointSync();
+    if (
+      !viewpoint ||
+      !viewpoint.isValid() ||
+      viewpoint.equals(this._cachedViewpoint)
+    ) {
       return;
     }
-    this._cachedViewPoint = viewpoint.clone();
+    this._cachedViewpoint = viewpoint.clone();
     const gp = viewpoint.groundPosition;
     const position = viewpoint.cameraPosition || gp;
     const { heading } = viewpoint;
     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;
@@ -541,8 +577,9 @@ class OverviewMap {
       return;
     }
     let cameraFeature = this._cameraIconLayer.getFeatureById('cameraFeature');
+    const coords = Projection.wgs84ToMercator(position);
     if (!cameraFeature) {
-      const cameraGeometry = new Point([position[0], position[1]]);
+      const cameraGeometry = new Point(coords);
       cameraFeature = new Feature({
         geometry: cameraGeometry,
       });
@@ -550,7 +587,7 @@ class OverviewMap {
       cameraFeature.setStyle(this.cameraIconStyle.style);
       this._cameraIconLayer.addFeatures([cameraFeature]);
     }
-    cameraFeature.getGeometry().setCoordinates(Projection.wgs84ToMercator(position));
+    cameraFeature.getGeometry().setCoordinates(coords);
 
     const rotationDegrees = viewpoint.heading;
     const rotationRadians = CesiumMath.toRadians(rotationDegrees);
@@ -558,24 +595,26 @@ class OverviewMap {
     this.cameraIconStyle.image.setRotation(rotationRadians);
 
     viewpoint.heading = 0;
-    viewpoint.cameraPosition = position;
-    viewpoint.groundPosition = null;
-    viewpoint.distance = distance * 4;
-
-    this._map.gotoViewPoint(viewpoint);
+    if (viewpoint.cameraPosition) {
+      viewpoint.cameraPosition = position;
+      viewpoint.groundPosition = null;
+      viewpoint.distance = distance * 4;
+    }
+    this._map.gotoViewpoint(viewpoint);
   }
 
   /**
    * @private
    */
   _clearListeners() {
-    this._listeners.forEach(cb => cb());
+    this._listeners.forEach((cb) => cb());
     this._listeners.splice(0);
   }
 
   destroy() {
     this._clearListeners();
-    this._layerCollectionListener.forEach(cb => cb());
+    this._collectionListeners.forEach((cb) => cb());
+    this._collectionListeners = [];
     if (this._mapPointerListener) {
       this._mapPointerListener();
       this._mapPointerListener = null;
@@ -606,9 +645,8 @@ class OverviewMap {
       this._eventHandler.destroy();
     }
     this.cameraIconStyle.destroy();
-    this.obliqueUnselectedStyle.destroy();
     this.obliqueSelectedStyle.destroy();
-    this._cachedViewPoint = null;
+    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/notifier/NotifierComponent.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <v-snackbar
+      dark
+      v-for="notification in notifications"
+      :key="notification.id"
+      v-model="notification.open"
+      :timeout="notification.timeout"
+    >
+      <v-icon :color="notification.type">
+        {{ icon[notification.type] }}
+      </v-icon>
+      <span class="snack-title">{{
+        $t(notification.title || defaultTitle[notification.type])
+      }}</span>
+      <template #action="{ attrs }">
+        <VcsButton
+          icon="mdi-close"
+          v-bind="attrs"
+          @click="notification.open = false"
+        />
+      </template>
+      <span>{{ $t(notification.message) }}</span>
+    </v-snackbar>
+  </div>
+</template>
+
+<script>
+  import { VSnackbar, VIcon } from 'vuetify/lib';
+  import { inject } from 'vue';
+  import VcsButton from '../components/buttons/VcsButton.vue';
+  import { NotificationType } from './notifier.js';
+
+  /**
+   * @description Renders notifications of different types
+   */
+  export default {
+    components: {
+      VSnackbar,
+      VcsButton,
+      VIcon,
+    },
+    name: 'NotifierComponent',
+    setup() {
+      const app = inject('vcsApp');
+
+      return {
+        notifications: app.notifier.notifications,
+        icon: {
+          [NotificationType.ERROR]: 'mdi-alert-box',
+          [NotificationType.WARNING]: 'mdi-alert',
+          [NotificationType.INFO]: 'mdi-information',
+          [NotificationType.SUCCESS]: 'mdi-check-circle',
+        },
+        defaultTitle: {
+          [NotificationType.ERROR]: 'notification.error',
+          [NotificationType.WARNING]: 'notification.warning',
+          [NotificationType.INFO]: 'notification.information',
+          [NotificationType.SUCCESS]: 'notification.success',
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .v-snack {
+    ::v-deep {
+      .v-snack__content {
+        display: grid;
+        gap: 8px 4px;
+        grid-template-columns: 20px auto;
+        .v-icon {
+          grid-row-start: 1;
+          grid-row-end: 3;
+          align-self: start;
+          font-size: 17px;
+        }
+      }
+      .v-snack__action {
+        align-self: flex-start;
+        margin-top: 4px;
+      }
+    }
+  }
+</style>