Add ZoomToMaxExtentButton component

src/WguApp.vue

@@ -5,6 +5,11 @@
 
         <v-toolbar-items slot="wgu-tb-buttons" class="">
 
+            <wgu-zoomtomaxextent-button
+              icon="zoom_out_map"
+              text=""
+            />
+
             <wgu-toggle-layerlist-button
               icon="layers"
               text=""
@@ -55,6 +60,7 @@ import LayerListToggleButton from './components/layerlist/ToggleButton'
 import HelpWinToggleButton from './components/helpwin/ToggleButton'
 import MeasureToolToggleButton from './components/measuretool/ToggleButton'
 import InfoClickButton from './components/infoclick/ToggleButton'
+import ZoomToMaxExtentButton from './components/maxextentbutton/ZoomToMaxExtentButton'
 
 export default {
   name: 'app',
@@ -68,7 +74,8 @@ export default {
     'wgu-toggle-layerlist-button': LayerListToggleButton,
     'wgu-toggle-helpwin-button': HelpWinToggleButton,
     'wgu-toggle-measuretool-button': MeasureToolToggleButton,
-    'wgu-toggle-infoclick-button': InfoClickButton
+    'wgu-toggle-infoclick-button': InfoClickButton,
+    'wgu-zoomtomaxextent-button': ZoomToMaxExtentButton
   },
   data () {
     return {

src/components/maxextentbutton/ZoomToMaxExtentButton.vue

@@ -0,0 +1,40 @@
+<template>
+
+  <div class="">
+
+    <v-btn icon @click="onClick">
+      <v-icon medium>{{icon}}</v-icon>
+      {{text}}
+    </v-btn>
+
+  </div>
+
+</template>
+
+<script>
+
+import { Mapable } from '../../mixins/Mapable';
+
+export default {
+  name: 'wgu-zoomtomaxextent-button',
+  mixins: [Mapable],
+  props: {
+    icon: {type: String, required: false},
+    text: {type: String, required: false}
+  },
+  methods: {
+    onClick () {
+      // derive correct initial zoom and center
+      const initialCenter = this.$appConfig.mapCenter;
+      const initalZoom = this.$appConfig.mapZoom
+      this.map.getView().setCenter(initialCenter);
+      this.map.getView().setZoom(initalZoom);
+    }
+  }
+}
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+</style>

test/unit/specs/maxextentbutton/ZoomToMaxExtentButton.spec.js

@@ -0,0 +1,36 @@
+import Vue from 'vue'
+import ZoomToMaxExtentButton from '@/components/maxextentbutton/ZoomToMaxExtentButton'
+import OlMap from 'ol/map';
+import OlView from 'ol/view';
+
+describe('maxextentbutton/ZoomToMaxExtentButton.vue', () => {
+  // Check methods
+  it('has a method onClick', () => {
+    const Constructor = Vue.extend(ZoomToMaxExtentButton);
+    const ztmeb = new Constructor({
+    }).$mount();
+    expect(typeof ztmeb.onClick).to.equal('function');
+  });
+
+  it('onClick sets correct center and zoom', () => {
+    const Constructor = Vue.extend(ZoomToMaxExtentButton);
+    const ztmeb = new Constructor({
+    }).$mount();
+
+    ztmeb.$appConfig = {
+      mapCenter: [0, 0],
+      mapZoom: 0
+    };
+    ztmeb.map = new OlMap({
+      view: new OlView({
+        center: [1, 1],
+        zoom: 1
+      })
+    });
+
+    ztmeb.onClick();
+    expect(ztmeb.map.getView().getCenter()[0]).to.equal(0);
+    expect(ztmeb.map.getView().getCenter()[1]).to.equal(0);
+    expect(ztmeb.map.getView().getZoom()).to.equal(0);
+  });
+});