diff client/src/components/map/Map.vue @ 3086:a69a8deb56fe

client: added button to sync/unsync maps when comparing sounding results
author Markus Kottlaender <markus@intevation.de>
date Thu, 18 Apr 2019 15:29:09 +0200
parents 57255fda7594
children a9c7825303b3
line wrap: on
line diff
--- a/client/src/components/map/Map.vue	Thu Apr 18 14:24:52 2019 +0200
+++ b/client/src/components/map/Map.vue	Thu Apr 18 15:29:09 2019 +0200
@@ -52,7 +52,7 @@
     };
   },
   computed: {
-    ...mapState("map", ["initialLoad", "extent", "syncedView"]),
+    ...mapState("map", ["initialLoad", "extent", "syncedMaps", "syncedView"]),
     ...mapState("bottlenecks", ["selectedSurvey"]),
     ...mapState("fairwayprofile", ["additionalSurvey"]),
     ...mapState("application", ["panes", "paneRotate"]),
@@ -81,6 +81,20 @@
     paneRotate() {
       this.$nextTick(() => this.map.updateSize());
     },
+    syncedMaps(syncedMaps) {
+      if (syncedMaps.includes(this.paneId) || this.paneId === "main") {
+        this.map.setView(this.syncedView);
+      } else {
+        this.map.setView(
+          new View({
+            center: [this.extent.lon, this.extent.lat],
+            minZoom: 5, // restrict zooming out to ~size of Europe for width 1000px
+            zoom: this.extent.zoom,
+            projection: "EPSG:3857"
+          })
+        );
+      }
+    },
     selectedSurvey(survey) {
       if (this.paneId === "main") {
         if (survey) {
@@ -142,7 +156,15 @@
         layers: this.layers.config,
         target: "map-" + this.paneId,
         controls: [],
-        view: this.syncedView
+        view:
+          this.syncedMaps.includes(this.paneId) || this.paneId === "main"
+            ? this.syncedView
+            : new View({
+                center: [this.extent.lon, this.extent.lat],
+                minZoom: 5,
+                zoom: this.extent.zoom,
+                projection: "EPSG:3857"
+              })
       });
       this.map.getLayer = id => this.layers.get(id);