Make size of overview map configurable via app configuration.

wegue-oss · Nov 25, 2021 · 464a202 · 464a202
1 parent 7c31e38
commit 464a202
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/src/assets/css/wegue.css b/src/assets/css/wegue.css
@@ -59,13 +59,14 @@ html {
 
 .wgu-overviewmap-ctrl,
 .wgu-overviewmap-ctrl.ol-uncollapsible {
-  line-height: normal;
+  width: 100%;
+  height: 100%;
 }
 
 .wgu-overviewmap-ctrl .ol-overviewmap-map {
   border: none;
-  width: 152px;
-  height: 166px;
+  width: 100%;
+  height: 100%;
 } 
 
 /* TODO 

diff --git a/src/components/overviewmap/OverviewMap.vue b/src/components/overviewmap/OverviewMap.vue
@@ -26,6 +26,8 @@
         color="white"
         :dark="false"
         :rotateWithView="rotateWithView"
+        :width="width"
+        :height="height"
       />
     </v-menu>
   </div>
@@ -43,7 +45,9 @@ export default {
     icon: { type: String, required: false, default: 'zoom_out_map' },
     dark: { type: Boolean, required: false, default: true },
     visible: { type: Boolean, required: false, default: true },
-    rotateWithView: { 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 {

diff --git a/src/components/overviewmap/OverviewMapController.js b/src/components/overviewmap/OverviewMapController.js
@@ -64,7 +64,7 @@ export default class OverviewMapController {
    * @param {String} color The color to set.
    */
   setOlStyle (color) {
-    document.querySelector('.ol-overviewmap-map').classList.add('v-card', 'ma-1');
+    document.querySelector('.ol-overviewmap-map').classList.add('v-card', 'ma-0');
   }
 
   /**

diff --git a/src/components/overviewmap/OverviewMapPanel.vue b/src/components/overviewmap/OverviewMapPanel.vue
@@ -1,5 +1,6 @@
 <template>
-  <v-sheet :color="color" :dark="dark" elevation="8" ref="overviewmapPanel">
+  <v-sheet :color="color" :dark="dark" :width="width" :height="height"
+    elevation="8" class="pa-1" ref="overviewmapPanel">
   </v-sheet>
 </template>
 
@@ -11,8 +12,10 @@
     mixins: [Mapable],
     props: {
       dark: { type: Boolean, required: true },
-      color: { type: String, required: false, default: 'white' },
-      rotateWithView: { type: Boolean, required: false, default: true }
+      color: { type: String, required: true },
+      rotateWithView: { type: Boolean, required: true },
+      width: { type: Number, required: true },
+      height: { type: Number, required: true }
     },
     data () {
       return {