Mercurial > gemma

annotate client/src/components/map/Map.vue @ 3079:57255fda7594

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: compare surveys on map The compare survey is now displayed in a second map.
author Markus Kottlaender <markus@intevation.de>
date Thu, 18 Apr 2019 12:40:42 +0200
parents db890b71f070
children a69a8deb56fe
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
3079
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
3 :id="'map-' + paneId"
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
4 :class="['map', { nocursor: this.hasActiveInteractions }]"
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
5 />
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6 </template>
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8 <style lang="sass" scoped>
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
9 .map
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
10 width: 100%
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 height: 100%
3079
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
12 background-color: #eee
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
13 background-image: linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%, #e8e8e8), linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%, #e8e8e8)
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
14 background-size: 20px 20px
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
15 background-position: 0 0, 10px 10px
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 &.nocursor
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17 cursor: none
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 </style>
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 <script>
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 /* 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
22 * 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
23 *
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 * 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
25 * 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
26 *
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 * 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
28 * – Ö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
29 * 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
30 *
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 * Author(s):
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 * * 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
33 * * 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
34 */
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 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
36 import { mapState } from "vuex";
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 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
38 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
39 import { displayError } from "@/lib/errors";
3079
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
40 import { pane } from "@/lib/mixins";
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 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
42 import "ol/ol.css";
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 /* 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
45 /* eslint-disable no-console */
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 export default {
3079
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
47 mixins: [pane],
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 data() {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 return {
3016
083cd270bdfd client: splitview: implemented rotation mechanism
Markus Kottlaender <markus@intevation.de>
parents: 3011
diff changeset
50 map: null,
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 splitscreen: false
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 };
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 },
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 computed: {
3063
333aff79197d client: maps: all map's views are now synced
Markus Kottlaender <markus@intevation.de>
parents: 3062
diff changeset
55 ...mapState("map", ["initialLoad", "extent", "syncedView"]),
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 ...mapState("bottlenecks", ["selectedSurvey"]),
3079
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
57 ...mapState("fairwayprofile", ["additionalSurvey"]),
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
58 ...mapState("application", ["panes", "paneRotate"]),
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 ...mapState("imports", ["selectedStretchId"]),
3021
2e2a271c1026 client: fixed layer factory to actually serve different objects
Markus Kottlaender <markus@intevation.de>
parents: 3016
diff changeset
60 layers() {
2e2a271c1026 client: fixed layer factory to actually serve different objects
Markus Kottlaender <markus@intevation.de>
parents: 3016
diff changeset
61 return layers();
2e2a271c1026 client: fixed layer factory to actually serve different objects
Markus Kottlaender <markus@intevation.de>
parents: 3016
diff changeset
62 },
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 hasActiveInteractions() {
3079
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
64 return (
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
65 this.map &&
3062
87e0422cffa7 client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents: 3057
diff changeset
66 this.map
87e0422cffa7 client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents: 3057
diff changeset
67 .getInteractions()
87e0422cffa7 client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents: 3057
diff changeset
68 .getArray()
3079
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
69 .filter(
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
70 i =>
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
71 ["linetool", "polygontool", "cuttool"].includes(i.get("id")) &&
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
72 i.getActive()
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
73 ).length
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
74 );
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
75 }
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
76 },
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
77 watch: {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
78 panes() {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
79 this.$nextTick(() => this.map.updateSize());
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
80 },
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
81 paneRotate() {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
82 this.$nextTick(() => this.map.updateSize());
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
83 },
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
84 selectedSurvey(survey) {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
85 if (this.paneId === "main") {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
86 if (survey) {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
87 this.updateBottleneckFilter(survey.bottleneck_id, survey.date_info);
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
88 } else {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
89 this.updateBottleneckFilter("does_not_exist", "1999-10-01");
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
90 }
3062
87e0422cffa7 client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents: 3057
diff changeset
91 }
3079
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
92 },
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
93 additionalSurvey(survey) {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
94 if (this.paneId === "compare-sounding-results") {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
95 if (survey) {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
96 this.updateBottleneckFilter(survey.bottleneck_id, survey.date_info);
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
97 } else {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
98 this.updateBottleneckFilter("does_not_exist", "1999-10-01");
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
99 }
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
100 }
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
101 },
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
102 selectedStretchId(id) {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
103 this.layers
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
104 .get("STRETCHES")
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
105 .getSource()
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
106 .getFeatures()
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
107 .forEach(f => {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
108 f.set("highlighted", false);
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
109 if (id === f.getId()) {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
110 f.set("highlighted", true);
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
111 }
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
112 });
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 },
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
115 methods: {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
116 updateBottleneckFilter(bottleneck_id, datestr) {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
117 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
118
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
119 if (exists) {
3021
2e2a271c1026 client: fixed layer factory to actually serve different objects
Markus Kottlaender <markus@intevation.de>
parents: 3016
diff changeset
120 this.layers
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
121 .get("BOTTLENECKISOLINE")
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
122 .getSource()
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
123 .updateParams({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
124 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
125 });
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
126 }
3021
2e2a271c1026 client: fixed layer factory to actually serve different objects
Markus Kottlaender <markus@intevation.de>
parents: 3016
diff changeset
127 this.layers.get("BOTTLENECKISOLINE").setVisible(exists);
3079
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
128 },
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
129 initMap() {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
130 if (!this.syncedView) {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
131 this.$store.commit(
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
132 "map/syncedView",
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
133 new View({
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
134 center: [this.extent.lon, this.extent.lat],
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
135 minZoom: 5, // restrict zooming out to ~size of Europe for width 1000px
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
136 zoom: this.extent.zoom,
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
137 projection: "EPSG:3857"
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
138 })
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
139 );
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
140 }
3079
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
141 this.map = new Map({
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
142 layers: this.layers.config,
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
143 target: "map-" + this.paneId,
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
144 controls: [],
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
145 view: this.syncedView
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
146 });
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
147 this.map.getLayer = id => this.layers.get(id);
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
148
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
149 // store map position on every move
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
150 // will be obsolete once we abandoned the separated admin context
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
151 this.map.on("moveend", event => {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
152 const center = event.map.getView().getCenter();
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
153 this.$store.commit("map/extent", {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
154 lat: center[1],
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
155 lon: center[0],
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
156 zoom: event.map.getView().getZoom()
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
157 });
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
158 });
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
159 this.$store.dispatch("map/openLayersMap", this.map);
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
160
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
161 // move to user specific default extent if map loads for the first time
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
162 // checking initialLoad will be obsolete once we abandoned the separated admin context
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
163 if (this.initialLoad) {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
164 this.$store.commit("map/initialLoad", false);
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
165 var currentUser = this.$store.state.user.user;
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
166 HTTP.get("/users/" + currentUser, {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
167 headers: {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
168 "X-Gemma-Auth": localStorage.getItem("token"),
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
169 "Content-type": "text/xml; charset=UTF-8"
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
170 }
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
171 })
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
172 .then(response => {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
173 this.$store.dispatch("map/moveToBoundingBox", {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
174 boundingBox: [
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
175 response.data.extent.x1,
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
176 response.data.extent.y1,
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
177 response.data.extent.x2,
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
178 response.data.extent.y2
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
179 ],
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
180 zoom: 17,
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
181 preventZoomOut: true
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
182 });
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
183 })
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
184 .catch(error => {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
185 const { status, data } = error.response;
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
186 displayError({
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
187 title: this.$gettext("Backend Error"),
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
188 message: `${status}: ${data.message || data}`
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
189 });
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
190 });
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
191 }
3079
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
192
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
193 this.$store.dispatch("map/initIdentifyTool", this.map);
3011
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 },
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
196 mounted() {
3079
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
197 this.initMap();
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
198
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
199 if (this.selectedSurvey && this.paneId === "main") {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
200 this.updateBottleneckFilter(
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
201 this.selectedSurvey.bottleneck_id,
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
202 this.selectedSurvey.date_info
3063
333aff79197d client: maps: all map's views are now synced
Markus Kottlaender <markus@intevation.de>
parents: 3062
diff changeset
203 );
333aff79197d client: maps: all map's views are now synced
Markus Kottlaender <markus@intevation.de>
parents: 3062
diff changeset
204 }
3079
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
205 if (this.additionalSurvey && this.paneId === "compare-sounding-results") {
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
206 this.updateBottleneckFilter(
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
207 this.additionalSurvey.bottleneck_id,
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
208 this.additionalSurvey.date_info
57255fda7594 client: compare surveys on map
Markus Kottlaender <markus@intevation.de>
parents: 3077
diff changeset
209 );
3011
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
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
212 // load configured bottleneck colors
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
213 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
214 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
215 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
216 .then(response => {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
217 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
218 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
219 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
220 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
221 .then(response => {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
222 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
223 var newStyle = new Style({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
224 stroke: new Stroke({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
225 color: btlnStrokeC,
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
226 width: 4
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 fill: new Fill({
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
229 color: btlnFillC
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
230 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
231 });
3021
2e2a271c1026 client: fixed layer factory to actually serve different objects
Markus Kottlaender <markus@intevation.de>
parents: 3016
diff changeset
232 this.layers.get("BOTTLENECKS").setStyle(newStyle);
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
233 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
234 .catch(error => {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
235 console.log(error);
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
236 });
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
237 })
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
238 .catch(error => {
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
239 console.log(error);
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
240 });
3052
01210542e028 client: remove openlayers map objects after removing a map component from the view
Markus Kottlaender <markus@intevation.de>
parents: 3051
diff changeset
241 },
01210542e028 client: remove openlayers map objects after removing a map component from the view
Markus Kottlaender <markus@intevation.de>
parents: 3051
diff changeset
242 destroyed() {
01210542e028 client: remove openlayers map objects after removing a map component from the view
Markus Kottlaender <markus@intevation.de>
parents: 3051
diff changeset
243 this.$store.commit("map/removeOpenLayersMap", this.map);
3011
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
244 }
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
245 };
fc8fbea24568 client: moved map component, layer factory and styles to own subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
246 </script>