Mercurial > gemma

comparison client/src/zoom/zoom.vue @ 1074:ca1c178456e5

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
zomm added
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 26 Oct 2018 12:57:04 +0200
parents
children 595654ad3f66
comparison
equal deleted inserted replaced
1073:7845c599f4c9 1074:ca1c178456e5
1 <template>
2 <div class="d-flex flex-column buttoncontainer align-content-between">
3 <button class="zoomButton shadow ui-element" @click="zoomIn">+</button>
4 <button class="zoomButton shadow ui-element" @click="zoomOut">-</button>
5 </div>
6 </template>
7 <style lang="scss" scoped>
8 .buttoncontainer {
9 width: $icon-width;
10 height: $zoombutton-container-height;
11 margin-top: $sidebar-height;
12 margin-left: $offset;
13 }
14 .zoomButton {
15 position: relative;
16 background-color: white;
17 border-radius: $border-radius;
18 min-height: $icon-width;
19 min-width: $icon-width;
20 margin-right: $offset;
21 margin-bottom: auto;
22 z-index: 2;
23 outline: none;
24 border: 0px;
25 }
26 </style>
27 <script>
28 import { mapState } from "vuex";
29
30 export default {
31 name: "zoom",
32 computed: {
33 ...mapState("mapstore", ["openLayersMap"]),
34 zoomLevel: {
35 get() {
36 return this.openLayersMap.getView().getZoom();
37 },
38 set(value) {
39 this.openLayersMap.getView().animate({ zoom: value }, 700);
40 }
41 }
42 },
43 methods: {
44 zoomIn() {
45 this.zoomLevel = this.zoomLevel + 1;
46 },
47 zoomOut() {
48 this.zoomLevel = this.zoomLevel - 1;
49 }
50 }
51 };
52 </script>