Mercurial > gemma
diff client/src/components/map/Zoom.vue @ 1272:bc55ffaeb639
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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/map/Zoom.vue Thu Nov 22 07:07:12 2018 +0100 @@ -0,0 +1,51 @@ +<template> + <div class="d-flex buttoncontainer shadow-xs mb-3 position-absolute" :style="showSplitscreen ? 'margin-bottom: 51vh !important' : ''"> + <button class="zoomButton border-0 bg-white rounded-left ui-element border-right" @click="zoomIn"> + <i class="fa fa-plus"></i> + </button> + <button class="zoomButton border-0 bg-white rounded-right ui-element" @click="zoomOut"> + <i class="fa fa-minus"></i> + </button> + </div> +</template> + +<style lang="sass" scoped> +.buttoncontainer + bottom: 0 + left: 50% + margin-left: -$icon-width + +.zoomButton + min-height: $icon-width + min-width: $icon-width + z-index: 2 + outline: none + color: #666 +</style> +<script> +import { mapState } from "vuex"; + +export default { + name: "zoom", + computed: { + ...mapState("map", ["openLayersMap"]), + ...mapState("application", ["showSplitscreen"]), + zoomLevel: { + get() { + return this.openLayersMap.getView().getZoom(); + }, + set(value) { + this.openLayersMap.getView().animate({ zoom: value, duration: 300 }); + } + } + }, + methods: { + zoomIn() { + this.zoomLevel = this.zoomLevel + 1; + }, + zoomOut() { + this.zoomLevel = this.zoomLevel - 1; + } + } +}; +</script>