properly setup base sizing for MapZoom & add method to reset the base transform

src/components/layouts/MapZoom.vue

@@ -14,17 +14,17 @@
 </template>
 
 <script>
-import { select, zoom } from 'd3'
+import { select, zoom, zoomIdentity } from 'd3'
 
 
 export default {
   name: 'MapZoom',
 
   props: {
-    value: { type: Object, default: () => ({ width: undefined, height: undefined }) },
     id: { type: String, required: true },
     minZoom: { type: Number, default: 0.3 },
-    maxZoom: { type: Number, default: 1 }
+    maxZoom: { type: Number, default: 1 },
+    initialZoom: { type: Number, default: 1 }
   },
 
   data () {
@@ -33,8 +33,8 @@ export default {
       svg: undefined, // d3 select(svg)
       width: undefined,
       height: undefined,
-      scale: 1,
-      transform: 'translate(0, 0) scale(1)'
+      scale: this.initialZoom,
+      transform: zoomIdentity.translate(0, 0).scale(this.initialZoom)
     }
   },
 
@@ -55,6 +55,11 @@ export default {
 
     onZoom (direction) {
       this.zoom.scaleBy(this.svg, direction === 1 ? 1.3 : 1 / 1.3, [0, 0])
+    },
+
+    reset () {
+      this.transform = zoomIdentity.translate(0, 0).scale(this.initialZoom)
+      this.svg.call(this.zoom.transform, this.transform)
     }
   },
 
@@ -68,7 +73,7 @@ export default {
 
     this.updateSize()
     this.svg = select('#' + this.id + ' svg')
-    this.svg.call(this.zoom)
+    this.svg.call(this.zoom).call(this.zoom.transform, this.transform)
   }
 }
 </script>