Mercurial > gemma

comparison client/src/components/map/Zoom.vue @ 1272:bc55ffaeb639

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
cleaned up client/src directory better organization of files and directories, better naming, separation of admin and map context
author Markus Kottlaender <markus@intevation.de>
date Thu, 22 Nov 2018 07:07:12 +0100
parents
children 60e15c2d26a2
comparison
equal deleted inserted replaced
1268:aca692e73028 1272:bc55ffaeb639
1 <template>
2 <div class="d-flex buttoncontainer shadow-xs mb-3 position-absolute" :style="showSplitscreen ? 'margin-bottom: 51vh !important' : ''">
3 <button class="zoomButton border-0 bg-white rounded-left ui-element border-right" @click="zoomIn">
4 <i class="fa fa-plus"></i>
5 </button>
6 <button class="zoomButton border-0 bg-white rounded-right ui-element" @click="zoomOut">
7 <i class="fa fa-minus"></i>
8 </button>
9 </div>
10 </template>
11
12 <style lang="sass" scoped>
13 .buttoncontainer
14 bottom: 0
15 left: 50%
16 margin-left: -$icon-width
17
18 .zoomButton
19 min-height: $icon-width
20 min-width: $icon-width
21 z-index: 2
22 outline: none
23 color: #666
24 </style>
25 <script>
26 import { mapState } from "vuex";
27
28 export default {
29 name: "zoom",
30 computed: {
31 ...mapState("map", ["openLayersMap"]),
32 ...mapState("application", ["showSplitscreen"]),
33 zoomLevel: {
34 get() {
35 return this.openLayersMap.getView().getZoom();
36 },
37 set(value) {
38 this.openLayersMap.getView().animate({ zoom: value, duration: 300 });
39 }
40 }
41 },
42 methods: {
43 zoomIn() {
44 this.zoomLevel = this.zoomLevel + 1;
45 },
46 zoomOut() {
47 this.zoomLevel = this.zoomLevel - 1;
48 }
49 }
50 };
51 </script>