Overview map

app-starter/WguAppTemplate.vue

@@ -35,6 +35,7 @@
         <portal-target name="map-overlay" />
         <wgu-app-logo />
         <wgu-bglayerswitcher />
+        <wgu-overviewmap v-if="overviewMapConfig" v-bind="overviewMapConfig"/>
       </v-container>
     </v-content>
 
@@ -69,6 +70,7 @@
   import AppSidebar from './components/AppSidebar'
   import AppLogo from '../src/components/AppLogo'
   import BgLayerSwitcher from '../src/components/bglayerswitcher/BgLayerSwitcher.vue'
+  import OverviewMap from '../src/components/overviewmap/OverviewMap.vue'
   import MeasureWin from '../src/components/measuretool/MeasureWin'
   import LayerListWin from '../src/components/layerlist/LayerListWin'
   import HelpWin from '../src/components/helpwin/HelpWin'
@@ -86,6 +88,7 @@
       'wgu-app-sidebar': AppSidebar,
       'wgu-app-logo': AppLogo,
       'wgu-bglayerswitcher': BgLayerSwitcher,
+      'wgu-overviewmap': OverviewMap,
       'wgu-measuretool-win': MeasureWin,
       'wgu-layerlist-win': LayerListWin,
       'wgu-helpwin-win': HelpWin,
@@ -98,6 +101,7 @@
       return {
         isEmbedded: false,
         sidebarConfig: this.getSidebarConfig(),
+        overviewMapConfig: this.getOverviewMapConfig(),
         floatingWins: this.getModuleWinData('floating'),
         sidebarWins: this.getModuleWinData('sidebar'),
         showCopyrightYear: Vue.prototype.$appConfig.showCopyrightYear
@@ -131,6 +135,14 @@
         const appConfig = Vue.prototype.$appConfig || {};
         return appConfig['sidebar'];
       },
+      /**
+       * Returns the configuration object for the overview map from app-config.
+       * @return {Object} Overview map configuration object.
+       */
+      getOverviewMapConfig () {
+        const appConfig = Vue.prototype.$appConfig || {};
+        return appConfig['overviewMap'];
+      },
       /**
        * Determines the module window configuration objects from app-config:
        *     moduleWins: [

app-starter/static/app-conf-projected.json

@@ -42,6 +42,10 @@
     ]
   ],
 
+  "overviewMap" : {
+    "visible": false
+  },
+
   "viewAnimation": {
     "type": "fly",
     "options": {

app-starter/static/app-conf-sidebar.json

@@ -27,6 +27,10 @@
     "displayInLayerList": true
   },
 
+  "overviewMap" : {
+    "visible": false
+  },
+
   "viewAnimation": {
     "type": "fly",
     "options": {

app-starter/static/app-conf.json

@@ -27,6 +27,10 @@
     "displayInLayerList": true
   },
 
+  "overviewMap" : {
+    "visible": false
+  },
+
   "viewAnimation": {
     "type": "fly",
     "options": {

docs/wegue-configuration.md

@@ -21,6 +21,7 @@ This describes the Wegue application configuration, which is modelled as JSON do
 | mapGeodataDragDop  | Configuration object for geodata file drag/drop functionality on the map. Only by setting the config this function will be enabled. | see [mapGeodataDragDop](wegue-configuration?id=mapGeodataDragDop) |
 | **modules**        | Array of module configuration objects | See [modules](module-configuration) |
 | **mapLayers**      | Array of map layer configuration objects | See [mapLayers](map-layer-configuration) |
+| overviewMap        | Configuration object for the overview map. | See [overviewMap](wegue-configuration?id=overviewMap)
 | projectionDefs     | Array of CRS / projection definition objects compatible to proj4js | See [projectionDefs](wegue-configuration?id=projectiondefs) |
 | tileGridDefs       | Array of tile grid definition objects | See [tileGridDefs](wegue-configuration?id=tilegriddefs) |
 | viewAnimation      | Configuration object for view animations | See [viewAnimation](wegue-configuration?id=viewAnimation) |
@@ -303,6 +304,31 @@ Below is an example for a sidebar configuration object:
   }
 ```
 
+### overviewMap
+Wegue integrates an overview map control, if the optional `overviewMap` property is declared. 
+
+The `overviewMap` object supports the following properties:
+
+| Property           | Meaning   | Example |
+|--------------------|:---------:|---------|
+| icon               | Provide a customized map icon. Defaults to `zoom_out_map`.  | `"icon": "zoom_out_map"` |
+| visible            | Specifies whether the overviewMap appears in open or closed state on application start. Defaults to true. | `"visible": true` |
+| rotateWithView     | Whether the control view should rotate with the main map view. Defaults to true. | `"rotateWithView": true` |
+| width              | Width of the overview map panel in viewport coordinates. Defaults to 164px.  | `"width": 164` |
+| height             | Height of the overview map panel in viewport coordinates. Defaults to 178px.  | `"height": 178` |
+
+Below is an example for an overview map configuration object:
+
+
+```
+  "overviewMap": {
+    "visible": true,
+    "rotateWithView": true,
+    "width": 164,
+    "height": 178
+  }
+```
+
 ## Example configuration
 
 Example configurations can be found in the `app-starter/static` directory. Below an example as used in the Demo:
@@ -311,7 +337,7 @@ Example configurations can be found in the `app-starter/static` directory. Below
 {
 
   "colorTheme": {
-    "dark": false,
+    "dark": false
   },
 
   "logo": "https://dummyimage.com/100x100/aaa/fff&text=Wegue",
@@ -337,6 +363,10 @@ Example configurations can be found in the `app-starter/static` directory. Below
     "displayInLayerList": true
   },
 
+  "overviewMap" : {
+    "visible": false
+  },
+
   "viewAnimation": {
     "type": "fly",
     "options": {
@@ -560,6 +590,10 @@ Example configurations can be found in the `app-starter/static` directory. Below
     "wgu-geolocator": {
       "target": "toolbar"
     },
+    "wgu-themeswitcher": {
+      "target": "toolbar",
+      "icon": "dark_mode"
+    },
     "wgu-attributetable": {
       "target": "menu",
       "win": "floating",

src/assets/css/wegue.css

@@ -25,20 +25,59 @@ html {
   bottom: 45px;
 }
 
-.wgu-bglayerswitcher {
+/*
+  Common style for action buttons placed over the map.
+  This is to match the look and feel of the OL buttons to give
+  them a border for better map constrast.
+*/
+.wgu-map-button {
   position: absolute; 
   z-index: 2; 
-  left: 15px;
-  top: 70px;
   padding: 3px;
   border-radius: 50%;
-  background-color: rgba(255,255,255,0.4) !important;
+  background-color: rgba(255,255,255,0.4) !important;  
 }
 
-.wgu-bglayerswitcher:hover {
+.wgu-map-button:hover {
   background-color: rgba(255,255,255,0.6) !important;
 }
 
+/* 
+ Background layer switcher positioning and styles.
+*/
+.wgu-bglayerswitcher {
+  left: 15px;
+  top: 70px;
+}
+
+/* 
+ Overview map positioning and styles.
+*/
+.wgu-overviewmap {
+  left: 15px;
+  top: calc(50% - 23px);
+}
+
+.wgu-overviewmap-ctrl {
+  position: relative;
+}
+
+.wgu-overviewmap-ctrl,
+.wgu-overviewmap-ctrl.ol-uncollapsible {
+  width: 100%;
+  height: 100%;
+}
+
+.wgu-overviewmap-ctrl .ol-overviewmap-map {
+  border: none;
+  width: 100%;
+  height: 100%;
+}
+
+.wgu-overviewmap-ctrl .ol-overviewmap-box {
+  border: 2px dotted var(--v-secondary-base);
+}
+
 /*
   TODO Review ccs colorization.
   Used to force the onprimary color for solo fields (light theme only).

src/components/bglayerswitcher/BgLayerSwitcher.vue

@@ -7,7 +7,7 @@
       attach="#wgu-bglayerswitcher-wrapper"
       >
       <template v-slot:activator="{on}">
-        <v-sheet class="wgu-bglayerswitcher">
+        <v-sheet class="wgu-map-button wgu-bglayerswitcher">
           <v-btn v-on="on"
             color="secondary"
             fab

src/components/ol/Map.vue

@@ -64,12 +64,18 @@ export default {
     // Make the OL map accessible for Mapable mixin even 'ol-map-mounted' has
     // already been fired. Don not use directly in cmps, use Mapable instead.
     Vue.prototype.$map = me.map;
+
+    me.map.setTarget(document.getElementById('ol-map-container'));
+
     // Send the event 'ol-map-mounted' with the OL map as payload
     WguEventBus.$emit('ol-map-mounted', me.map);
 
-    // resize the map, so it fits to parent
+    // TODO
+    //  Re-evaluate whether and if yes which of the following operations have to be deferred.
+    //  If so, a better implementation could be to rely on this.$nextTick(), which currently causes trouble
+    //  for the units tests (deferred operations are invoked after the component has already been destroyed).
     me.timerHandle = setTimeout(() => {
-      me.map.setTarget(document.getElementById('ol-map-container'));
+      // resize the map, so it fits to parent
       me.map.updateSize();
 
       // adjust the bg color of the OL buttons (like zoom, rotate north, ...)
@@ -80,15 +86,24 @@ export default {
     }, 200);
   },
   destroyed () {
+    // Send the event 'ol-map-unmounted' with the OL map as payload
+    WguEventBus.$emit('ol-map-unmounted', this.map);
+
+    // Destroy controllers, remove map references
     if (this.timerHandle) {
       clearTimeout(this.timerHandle);
     }
     if (this.permalinkController) {
       this.permalinkController.tearDown();
       this.permalinkController = undefined;
     }
-    // Send the event 'ol-map-unmounted' with the OL map as payload
-    WguEventBus.$emit('ol-map-unmounted', this.map);
+    if (this.map) {
+      this.map.getLayers().clear();
+      this.map.getInteractions().clear();
+      this.map.getControls().clear();
+      this.map.getOverlays().clear();
+    }
+    this.map = undefined;
   },
   created () {
     // make map rotateable according to property

src/components/overviewmap/OverviewMap.vue

@@ -0,0 +1,53 @@
+<template>
+  <div id="wgu-overviewmap-wrapper">
+    <v-menu offset-x nudge-right="15"
+      transition="scale-transition"
+      :close-on-content-click="false"
+      :close-on-click="false"
+      z-index=2
+      v-model="open"
+      attach="#wgu-overviewmap-wrapper"
+      >
+      <template v-slot:activator="{on}">
+        <v-sheet class="wgu-map-button wgu-overviewmap">
+          <v-btn v-on="on"
+            color="secondary" 
+            fab
+            :title="$t('wgu-overviewmap.title')"
+            >
+            <v-icon color="onsecondary" medium>{{icon}}</v-icon>
+          </v-btn>
+        </v-sheet>
+      </template>
+      <!-- Remarks: The overviewmap-panel is wrapped by an v-if block to avoid unneccesary image 
+          requests when the panel is not visible -->
+      <wgu-overviewmap-panel v-if="open"
+        :rotateWithView="rotateWithView"
+        :width="width"
+        :height="height"
+      />
+    </v-menu>
+  </div>
+</template>
+<script>
+import OverviewMapPanel from './OverviewMapPanel';
+
+export default {
+  name: 'wgu-overviewmap',
+  components: {
+    'wgu-overviewmap-panel': OverviewMapPanel
+  },
+  props: {
+    icon: { type: String, required: false, default: 'zoom_out_map' },
+    visible: { type: Boolean, required: false, default: true },
+    rotateWithView: { type: Boolean, required: false, default: true },
+    width: { type: Number, required: false, default: 164 },
+    height: { type: Number, required: false, default: 178 }
+  },
+  data () {
+    return {
+      open: this.visible
+    }
+  }
+};
+</script>