--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/zoom/zoom.vue	Fri Oct 26 12:57:04 2018 +0200
@@ -0,0 +1,52 @@
+<template>
+    <div class="d-flex flex-column buttoncontainer align-content-between">
+        <button class="zoomButton shadow ui-element" @click="zoomIn">+</button>
+        <button class="zoomButton shadow ui-element" @click="zoomOut">-</button>
+    </div>
+</template>
+<style lang="scss" scoped>
+.buttoncontainer {
+  width: $icon-width;
+  height: $zoombutton-container-height;
+  margin-top: $sidebar-height;
+  margin-left: $offset;
+}
+.zoomButton {
+  position: relative;
+  background-color: white;
+  border-radius: $border-radius;
+  min-height: $icon-width;
+  min-width: $icon-width;
+  margin-right: $offset;
+  margin-bottom: auto;
+  z-index: 2;
+  outline: none;
+  border: 0px;
+}
+</style>
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "zoom",
+  computed: {
+    ...mapState("mapstore", ["openLayersMap"]),
+    zoomLevel: {
+      get() {
+        return this.openLayersMap.getView().getZoom();
+      },
+      set(value) {
+        this.openLayersMap.getView().animate({ zoom: value }, 700);
+      }
+    }
+  },
+  methods: {
+    zoomIn() {
+      this.zoomLevel = this.zoomLevel + 1;
+    },
+    zoomOut() {
+      this.zoomLevel = this.zoomLevel - 1;
+    }
+  }
+};
+</script>