Mercurial > gemma
changeset 1074:ca1c178456e5
zomm added
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 26 Oct 2018 12:57:04 +0200 |
parents | 7845c599f4c9 |
children | c1989ebe1d8a |
files | client/src/zoom/zoom.vue |
diffstat | 1 files changed, 52 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- /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>