annotate client/src/components/map/Map.vue @ 3016:083cd270bdfd

client: splitview: implemented rotation mechanism
author Markus Kottlaender <markus@intevation.de>
date Thu, 11 Apr 2019 16:44:27 +0200
parents fc8fbea24568
children 2e2a271c1026
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
2 <div
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
3 :id="'map-' + uuid"
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
4 :class="[
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 'map',
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6 {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 splitscreen: this.splitscreen,
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8 nocursor: this.hasActiveInteractions
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
9 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
10 ]"
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 ></div>
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
12 </template>
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
13
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
14 <style lang="sass" scoped>
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 .map
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 width: 100%
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17 height: 100%
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 &.splitscreen
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 height: 50%
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 &.nocursor
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 cursor: none
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 </style>
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 <script>
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 /* This is Free Software under GNU Affero General Public License v >= 3.0
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 * without warranty, see README.md and license for details.
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 *
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 * SPDX-License-Identifier: AGPL-3.0-or-later
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 * License-Filename: LICENSES/AGPL-3.0.txt
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 *
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 * Copyright (C) 2018, 2019 by via donau
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 * – Österreichische Wasserstraßen-Gesellschaft mbH
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 * Software engineering by Intevation GmbH
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 *
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 * Author(s):
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 * * Thomas Junk <thomas.junk@intevation.de>
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 * * Bernhard E. Reiter <bernhard.reiter@intevation.de>
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40 */
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 import { HTTP } from "@/lib/http";
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 import { mapState } from "vuex";
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43 import { Map, View } from "ol";
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 import { Stroke, Style, Fill } from "ol/style";
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 import { displayError } from "@/lib/errors";
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 import { uuid } from "@/lib/mixins";
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 import layers from "@/components/map/layers";
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 import "ol/ol.css";
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 /* for the sake of debugging */
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 /* eslint-disable no-console */
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 export default {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 mixins: [uuid],
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 data() {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 return {
3016
083cd270bdfd client: splitview: implemented rotation mechanism
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
56 map: null,
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 splitscreen: false
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 };
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 },
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 computed: {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 ...mapState("map", [
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 "initialLoad",
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 "extent",
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 "openLayersMap",
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 "lineTool",
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 "polygonTool",
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 "cutTool"
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 ]),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 ...mapState("bottlenecks", ["selectedSurvey"]),
3016
083cd270bdfd client: splitview: implemented rotation mechanism
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
70 ...mapState("application", ["showSplitscreen", "panes", "paneMode"]),
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 ...mapState("imports", ["selectedStretchId"]),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 hasActiveInteractions() {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 return (
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 (this.lineTool && this.lineTool.getActive()) ||
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 (this.polygonTool && this.polygonTool.getActive()) ||
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 (this.cutTool && this.cutTool.getActive())
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 );
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 },
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 methods: {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 updateBottleneckFilter(bottleneck_id, datestr) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 const exists = bottleneck_id != "does_not_exist";
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 if (exists) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
85 layers
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86 .get("BOTTLENECKISOLINE")
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 .getSource()
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 .updateParams({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 cql_filter: `date_info='${datestr}' AND bottleneck_id='${bottleneck_id}'`
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 });
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 layers.get("BOTTLENECKISOLINE").setVisible(exists);
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94 },
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 watch: {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 showSplitscreen(show) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97 if (show) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 setTimeout(() => {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
99 this.splitscreen = true;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100 }, 350);
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
101 } else {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102 this.splitscreen = false;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
103 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
104 },
3016
083cd270bdfd client: splitview: implemented rotation mechanism
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
105 panes() {
083cd270bdfd client: splitview: implemented rotation mechanism
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
106 this.$nextTick(() => this.map.updateSize());
083cd270bdfd client: splitview: implemented rotation mechanism
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
107 },
083cd270bdfd client: splitview: implemented rotation mechanism
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
108 paneMode() {
083cd270bdfd client: splitview: implemented rotation mechanism
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
109 this.$nextTick(() => this.map.updateSize());
083cd270bdfd client: splitview: implemented rotation mechanism
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
110 },
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 splitscreen() {
3016
083cd270bdfd client: splitview: implemented rotation mechanism
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
112 this.$nextTick(() => this.map.updateSize());
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
113 },
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
114 selectedSurvey(newSelectedSurvey) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
115 if (newSelectedSurvey) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
116 this.updateBottleneckFilter(
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
117 newSelectedSurvey.bottleneck_id,
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
118 newSelectedSurvey.date_info
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
119 );
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
120 } else {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
121 this.updateBottleneckFilter("does_not_exist", "1999-10-01");
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
122 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
123 },
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
124 selectedStretchId(id) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
125 layers
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
126 .get("STRETCHES")
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
127 .getSource()
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
128 .getFeatures()
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
129 .forEach(f => {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
130 f.set("highlighted", false);
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
131 if (id === f.getId()) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
132 f.set("highlighted", true);
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
133 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
134 });
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
135 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
136 },
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
137 mounted() {
3016
083cd270bdfd client: splitview: implemented rotation mechanism
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
138 this.map = new Map({
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
139 layers: layers.config,
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
140 target: "map-" + this.uuid,
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
141 controls: [],
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
142 view: new View({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
143 center: [this.extent.lon, this.extent.lat],
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
144 minZoom: 5, // restrict zooming out to ~size of Europe for width 1000px
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
145 zoom: this.extent.zoom,
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
146 projection: "EPSG:3857"
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
147 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
148 });
3016
083cd270bdfd client: splitview: implemented rotation mechanism
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
149 this.map.getLayer = id => layers.get(id);
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
150
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
151 // store map position on every move
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
152 // will be obsolete once we abandoned the separated admin context
3016
083cd270bdfd client: splitview: implemented rotation mechanism
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
153 this.map.on("moveend", event => {
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
154 const center = event.map.getView().getCenter();
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
155 this.$store.commit("map/extent", {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
156 lat: center[1],
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
157 lon: center[0],
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
158 zoom: event.map.getView().getZoom()
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
159 });
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
160 });
3016
083cd270bdfd client: splitview: implemented rotation mechanism
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
161 this.$store.dispatch("map/openLayersMap", this.map);
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
162
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
163 // move to user specific default extent if map loads for the first timeout
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
164 // checking initialLoad will be obsolete once we abandoned the separated admin context
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
165 if (this.initialLoad) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
166 this.$store.commit("map/initialLoad", false);
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
167 var currentUser = this.$store.state.user.user;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
168 HTTP.get("/users/" + currentUser, {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
169 headers: {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
170 "X-Gemma-Auth": localStorage.getItem("token"),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
171 "Content-type": "text/xml; charset=UTF-8"
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
172 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
173 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
174 .then(response => {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
175 this.$store.commit("map/moveToBoundingBox", {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
176 boundingBox: [
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
177 response.data.extent.x1,
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
178 response.data.extent.y1,
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
179 response.data.extent.x2,
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
180 response.data.extent.y2
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
181 ],
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
182 zoom: 17,
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
183 preventZoomOut: true
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
184 });
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
185 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
186 .catch(error => {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
187 const { status, data } = error.response;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
188 displayError({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
189 title: this.$gettext("Backend Error"),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
190 message: `${status}: ${data.message || data}`
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
191 });
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
192 });
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
193 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
194
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
195 // load configured bottleneck colors
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
196 HTTP.get("/system/style/Bottlenecks/stroke", {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
197 headers: { "X-Gemma-Auth": localStorage.getItem("token") }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
198 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
199 .then(response => {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
200 let btlnStrokeC = response.data.code;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
201 HTTP.get("/system/style/Bottlenecks/fill", {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
202 headers: { "X-Gemma-Auth": localStorage.getItem("token") }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
203 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
204 .then(response => {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
205 let btlnFillC = response.data.code;
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
206 var newStyle = new Style({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
207 stroke: new Stroke({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
208 color: btlnStrokeC,
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
209 width: 4
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
210 }),
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
211 fill: new Fill({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
212 color: btlnFillC
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
213 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
214 });
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
215 layers.get("BOTTLENECKS").setStyle(newStyle);
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
216 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
217 .catch(error => {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
218 console.log(error);
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
219 });
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
220 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
221 .catch(error => {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
222 console.log(error);
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
223 });
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
224
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
225 this.$store.dispatch("map/disableIdentifyTool");
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
226 this.$store.dispatch("map/enableIdentifyTool");
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
227 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
228 };
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
229 </script>