Mercurial > gemma
annotate client/src/components/map/Zoom.vue @ 5356:3216b4a19023 extented-report
spinner added to info tool's download link for DQL reports
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 22 Jun 2021 14:44:34 +0200 |
parents | 8f421cd3c746 |
children | 7768f14f6535 |
rev | line source |
---|---|
3166
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3167
diff
changeset
|
2 <div :class="['zoom-buttons shadow-xs', { move: showTimeSlider }]"> |
3166
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
3 <button |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
4 class="zoom-button border-0 bg-white rounded-left ui-element" |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
5 @click="zoomOut" |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
6 > |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
7 <font-awesome-icon icon="minus" /> |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
8 </button> |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
9 <button |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
10 class="zoom-button border-0 bg-white rounded-right ui-element border-right" |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
11 @click="zoomIn" |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
12 > |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
13 <font-awesome-icon icon="plus" /> |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
14 </button> |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
15 </div> |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
16 </template> |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
17 |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
18 <style lang="sass"> |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
19 .zoom-buttons |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
20 position: absolute |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
21 z-index: 1 |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
22 bottom: $small-offset |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
23 left: 50% |
3167
85734c763652
client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents:
3166
diff
changeset
|
24 margin-left: -$icon-width |
3166
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
25 margin-bottom: 0 |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
26 transition: margin-bottom 0.3s |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3167
diff
changeset
|
27 &.move |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3167
diff
changeset
|
28 bottom: $large-offset * 1.5 |
3166
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
29 .zoom-button |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
30 min-height: $icon-width |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
31 min-width: $icon-width |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
32 z-index: 1 |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
33 outline: none |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
34 color: #666 |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
35 </style> |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
36 |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
37 <script> |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3167
diff
changeset
|
38 import { mapState } from "vuex"; |
3166
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
39 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
40 * without warranty, see README.md and license for details. |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
41 * |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
42 * SPDX-License-Identifier: AGPL-3.0-or-later |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
43 * License-Filename: LICENSES/AGPL-3.0.txt |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 * |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
45 * Copyright (C) 2018 by via donau |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
46 * – Österreichische Wasserstraßen-Gesellschaft mbH |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 * Software engineering by Intevation GmbH |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 * |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
49 * Author(s): |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50 * Markus Kottländer <markus@intevation.de> |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
51 * Thomas Junk <thomas.junk@intevation.de> |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
52 */ |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53 export default { |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 props: ["map"], |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 computed: { |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3167
diff
changeset
|
56 ...mapState("application", ["showTimeSlider"]), |
3166
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
57 zoomLevel: { |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 get() { |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
59 return this.map.getView().getZoom(); |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
60 }, |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 set(value) { |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 this.map.getView().animate({ zoom: value, duration: 300 }); |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 } |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 } |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
65 }, |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
66 methods: { |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 zoomIn() { |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 this.zoomLevel = this.zoomLevel + 1; |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 }, |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
70 zoomOut() { |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
71 this.zoomLevel = this.zoomLevel - 1; |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
72 } |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
73 } |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
74 }; |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
75 </script> |