# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1555164126 -7200
# Node ID c71373594719e474b8afc078f237d3bf41288acf
# Parent  de75404cb5fc35203e6c9df449a1abf3ab29d8ce
client: map: prepared store to hold multiple map objects

This will be necessary to sync maps, toggle layers per map, etc. Therefore the methods to move the map
(moveToExtent, etc.) became actions instead of mutations.

diff -r de75404cb5fc -r c71373594719 client/src/components/Bottlenecks.vue
--- a/client/src/components/Bottlenecks.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/Bottlenecks.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -146,7 +146,7 @@
           this.$store.commit("bottlenecks/selectedSurvey", survey);
         })
         .then(() => {
-          this.$store.commit("map/moveToExtent", {
+          this.$store.dispatch("map/moveToExtent", {
             feature: bottleneck,
             zoom: 17,
             preventZoomOut: true
@@ -163,7 +163,7 @@
           this.$store.commit("bottlenecks/setFirstSurveySelected");
         })
         .then(() => {
-          this.$store.commit("map/moveToExtent", {
+          this.$store.dispatch("map/moveToExtent", {
             feature: bottleneck,
             zoom: 17,
             preventZoomOut: true
diff -r de75404cb5fc -r c71373594719 client/src/components/ImportStretches.vue
--- a/client/src/components/ImportStretches.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/ImportStretches.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -338,11 +338,8 @@
   },
   computed: {
     ...mapState("application", ["searchQuery"]),
-    ...mapState("map", [
-      "openLayersMap",
-      "identifiedFeatures",
-      "currentMeasurement"
-    ]),
+    ...mapState("map", ["identifiedFeatures", "currentMeasurement"]),
+    ...mapGetters("map", ["openLayersMap"]),
     ...mapGetters("user", ["isSysAdmin"]),
     ...mapState("imports", ["stretches"]),
     defineStretchesLabel() {
@@ -463,7 +460,7 @@
     moveMapToStretch(stretch) {
       this.$store.commit("imports/selectedStretchId", stretch.id);
       this.openLayersMap.getLayer("STRETCHES").setVisible(true);
-      this.$store.commit("map/moveToExtent", {
+      this.$store.dispatch("map/moveToExtent", {
         feature: stretch,
         zoom: 17,
         preventZoomOut: true
diff -r de75404cb5fc -r c71373594719 client/src/components/Pdftool.vue
--- a/client/src/components/Pdftool.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/Pdftool.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -93,7 +93,7 @@
  * * Bernhard E. Reiter <bernhard@intevation.de>
  * * Fadi Abbud <fadi.abbud@intevation.de>
  */
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 import jsPDF from "jspdf";
 import "@/lib/font-linbiolinum";
 import { getPointResolution } from "ol/proj";
@@ -165,8 +165,9 @@
   computed: {
     ...mapState("application", ["showPdfTool", "logoForPDF"]),
     ...mapState("bottlenecks", ["selectedBottleneck", "selectedSurvey"]),
-    ...mapState("map", ["openLayersMap", "isolinesLegendImgDataURL"]),
+    ...mapState("map", ["isolinesLegendImgDataURL"]),
     ...mapState("user", ["user"]),
+    ...mapGetters("map", ["openLayersMap"]),
     generatePdfLable() {
       return this.$gettext("Generate PDF");
     },
diff -r de75404cb5fc -r c71373594719 client/src/components/Search.vue
--- a/client/src/components/Search.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/Search.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -299,7 +299,7 @@
         if (resultEntry.type === "rhm") zoom = 15;
         if (resultEntry.type === "city") zoom = 13;
         if (resultEntry.type === "gauge") zoom = 15;
-        this.$store.commit("map/moveMap", {
+        this.$store.dispatch("map/moveMap", {
           coordinates: resultEntry.geom.coordinates,
           zoom,
           preventZoomOut: true
diff -r de75404cb5fc -r c71373594719 client/src/components/Zoom.vue
--- a/client/src/components/Zoom.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/Zoom.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -55,13 +55,13 @@
  * Markus Kottländer <markus@intevation.de>
  * Thomas Junk <thomas.junk@intevation.de>
  */
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 import { Vector as VectorLayer } from "ol/layer";
 
 export default {
   name: "zoom",
   computed: {
-    ...mapState("map", ["openLayersMap"]),
+    ...mapGetters("map", ["openLayersMap"]),
     ...mapState("application", ["showSplitscreen"]),
     zoomLevel: {
       get() {
diff -r de75404cb5fc -r c71373594719 client/src/components/fairway/Profiles.vue
--- a/client/src/components/fairway/Profiles.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/fairway/Profiles.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -247,7 +247,7 @@
  * Author(s):
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 import Feature from "ol/Feature";
 import LineString from "ol/geom/LineString";
 import { displayError, displayInfo } from "@/lib/errors";
@@ -264,7 +264,7 @@
   },
   computed: {
     ...mapState("application", ["showProfiles"]),
-    ...mapState("map", ["openLayersMap", "lineTool", "polygonTool", "cutTool"]),
+    ...mapState("map", ["lineTool", "polygonTool", "cutTool"]),
     ...mapState("bottlenecks", [
       "bottlenecksList",
       "surveys",
@@ -278,6 +278,7 @@
       "differencesLoading",
       "waterLevels"
     ]),
+    ...mapGetters("map", ["openLayersMap"]),
     orderedBottlenecks() {
       let groupedBottlenecks = {},
         orderedGroups = {};
@@ -569,7 +570,7 @@
         bn => bn.properties.name === this.selectedBottleneck
       );
       if (!bottleneck) return;
-      this.$store.commit("map/moveToExtent", {
+      this.$store.dispatch("map/moveToExtent", {
         feature: bottleneck,
         zoom: 17,
         preventZoomOut: true
diff -r de75404cb5fc -r c71373594719 client/src/components/gauge/Gauges.vue
--- a/client/src/components/gauge/Gauges.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/gauge/Gauges.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -180,7 +180,7 @@
     },
     moveToGauge() {
       if (!this.selectedGauge) return;
-      this.$store.commit("map/moveToExtent", {
+      this.$store.dispatch("map/moveToExtent", {
         feature: this.selectedGauge,
         zoom: null,
         preventZoomOut: true
@@ -205,7 +205,7 @@
           this.$store.commit("gauges/waterlevels", []);
         },
         expandCallback: () => {
-          this.$store.commit("map/moveMap", {
+          this.$store.dispatch("map/moveMap", {
             coordinates,
             zoom: null,
             preventZoomOut: true
@@ -254,7 +254,7 @@
           this.$store.commit("gauges/yearWaterlevels", []);
         },
         expandCallback: () => {
-          this.$store.commit("map/moveMap", {
+          this.$store.dispatch("map/moveMap", {
             coordinates,
             zoom: null,
             preventZoomOut: true
diff -r de75404cb5fc -r c71373594719 client/src/components/identify/Identify.vue
--- a/client/src/components/identify/Identify.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/identify/Identify.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -147,7 +147,7 @@
   },
   methods: {
     zoomTo(feature) {
-      this.$store.commit("map/moveMap", {
+      this.$store.dispatch("map/moveMap", {
         coordinates: getCenter(
           feature
             .getGeometry()
diff -r de75404cb5fc -r c71373594719 client/src/components/importoverview/BottleneckDetail.vue
--- a/client/src/components/importoverview/BottleneckDetail.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/importoverview/BottleneckDetail.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -87,7 +87,7 @@
 import { WFS } from "ol/format";
 import { or as orFilter, equalTo as equalToFilter } from "ol/format/filter";
 import { displayError } from "@/lib/errors";
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 
 export default {
   data() {
@@ -101,7 +101,7 @@
   },
   computed: {
     ...mapState("imports", ["showLogs", "details"]),
-    ...mapState("map", ["openLayersMap"])
+    ...mapGetters("map", ["openLayersMap"])
   },
   methods: {
     loadBottlenecks() {
@@ -148,7 +148,7 @@
     },
     moveToBottleneck(index) {
       this.openLayersMap.getLayer("BOTTLENECKS").setVisible(true);
-      this.$store.commit("map/moveToExtent", {
+      this.$store.dispatch("map/moveToExtent", {
         feature: this.bottlenecks[index],
         zoom: 17,
         preventZoomOut: true
diff -r de75404cb5fc -r c71373594719 client/src/components/importoverview/SoundingResultDetail.vue
--- a/client/src/components/importoverview/SoundingResultDetail.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/importoverview/SoundingResultDetail.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -34,7 +34,7 @@
   methods: {
     zoomTo() {
       const { lat, lon, bottleneck, date } = this.details.summary;
-      this.$store.commit("map/moveMap", {
+      this.$store.dispatch("map/moveMap", {
         coordinates: [lat, lon],
         zoom: 17,
         preventZoomOut: true
diff -r de75404cb5fc -r c71373594719 client/src/components/importoverview/StretchDetails.vue
--- a/client/src/components/importoverview/StretchDetails.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/importoverview/StretchDetails.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -21,7 +21,7 @@
  * Thomas Junk <thomas.junk@intevation.de>
  */
 import { displayError } from "@/lib/errors";
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 
 export default {
   name: "stretchdetails",
@@ -31,7 +31,7 @@
   },
   computed: {
     ...mapState("imports", ["showAdditional", "details"]),
-    ...mapState("map", ["openLayersMap"])
+    ...mapGetters("map", ["openLayersMap"])
   },
   methods: {
     zoomToStretch() {
@@ -42,7 +42,7 @@
         .then(response => {
           if (response.data.features.length < 1)
             throw new Error("no feaures found for: " + name);
-          this.$store.commit("map/moveToExtent", {
+          this.$store.dispatch("map/moveToExtent", {
             feature: response.data.features[0],
             zoom: 17,
             preventZoomOut: true
diff -r de75404cb5fc -r c71373594719 client/src/components/layers/Layers.vue
--- a/client/src/components/layers/Layers.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/layers/Layers.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -48,14 +48,14 @@
  * Thomas Junk <thomas.junk@intevation.de>
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 
 export default {
   components: {
     Layerselect: () => import("./Layerselect")
   },
   computed: {
-    ...mapState("map", ["openLayersMap"]),
+    ...mapGetters("map", ["openLayersMap"]),
     ...mapState("application", ["showLayers"]),
     layersLabel() {
       return this.$gettext("Layers");
diff -r de75404cb5fc -r c71373594719 client/src/components/map/Map.vue
--- a/client/src/components/map/Map.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/map/Map.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -61,7 +61,6 @@
     ...mapState("map", [
       "initialLoad",
       "extent",
-      "openLayersMap",
       "lineTool",
       "polygonTool",
       "cutTool"
@@ -175,7 +174,7 @@
         }
       })
         .then(response => {
-          this.$store.commit("map/moveToBoundingBox", {
+          this.$store.dispatch("map/moveToBoundingBox", {
             boundingBox: [
               response.data.extent.x1,
               response.data.extent.y1,
diff -r de75404cb5fc -r c71373594719 client/src/components/toolbar/Linetool.vue
--- a/client/src/components/toolbar/Linetool.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/toolbar/Linetool.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -21,12 +21,13 @@
  * Author(s):
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 
 export default {
   name: "linetool",
   computed: {
-    ...mapState("map", ["openLayersMap", "lineTool", "polygonTool", "cutTool"]),
+    ...mapState("map", ["lineTool", "polygonTool", "cutTool"]),
+    ...mapGetters("map", ["openLayersMap"]),
     label() {
       return this.$gettext("Measure Distance");
     }
diff -r de75404cb5fc -r c71373594719 client/src/components/toolbar/Polygontool.vue
--- a/client/src/components/toolbar/Polygontool.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/toolbar/Polygontool.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -25,12 +25,13 @@
  * Author(s):
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 
 export default {
   name: "polygontool",
   computed: {
-    ...mapState("map", ["openLayersMap", "lineTool", "polygonTool", "cutTool"]),
+    ...mapState("map", ["lineTool", "polygonTool", "cutTool"]),
+    ...mapGetters("map", ["openLayersMap"]),
     label() {
       return this.$gettext("Measure Area");
     }
diff -r de75404cb5fc -r c71373594719 client/src/components/toolbar/Toolbar.vue
--- a/client/src/components/toolbar/Toolbar.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/toolbar/Toolbar.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -116,7 +116,7 @@
  * Author(s):
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 
 export default {
   name: "toolbar",
@@ -131,8 +131,9 @@
     Pdftool: () => import("./Pdftool")
   },
   computed: {
-    ...mapState("map", ["openLayersMap", "lineTool", "polygonTool", "cutTool"]),
-    ...mapState("application", ["expandToolbar", "panes"])
+    ...mapState("map", ["lineTool", "polygonTool", "cutTool"]),
+    ...mapState("application", ["expandToolbar", "panes"]),
+    ...mapGetters("map", ["openLayersMap"])
   },
   mounted() {
     window.addEventListener("keydown", e => {
diff -r de75404cb5fc -r c71373594719 client/src/store/bottlenecks.js
--- a/client/src/store/bottlenecks.js	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/store/bottlenecks.js	Sat Apr 13 16:02:06 2019 +0200
@@ -60,7 +60,7 @@
     }
   },
   actions: {
-    setSelectedBottleneck({ state, commit, rootState }, name) {
+    setSelectedBottleneck({ state, commit, rootState, rootGetters }, name) {
       return new Promise((resolve, reject) => {
         if (name !== state.selectedBottleneck) {
           commit("selectedSurvey", null);
@@ -74,7 +74,7 @@
             commit("application/splitscreenLoading", false, { root: true });
           }, 350);
           rootState.map.cutTool.setActive(false);
-          rootState.map.openLayersMap
+          rootGetters["map/openLayersMap"]
             .getLayer("CUTTOOL")
             .getSource()
             .clear();
diff -r de75404cb5fc -r c71373594719 client/src/store/fairway.js
--- a/client/src/store/fairway.js	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/store/fairway.js	Sat Apr 13 16:02:06 2019 +0200
@@ -132,12 +132,12 @@
     }
   },
   actions: {
-    clearSelection({ commit, dispatch, rootState }) {
+    clearSelection({ commit, dispatch, rootState, rootGetters }) {
       dispatch("bottlenecks/setSelectedBottleneck", null, { root: true });
       dispatch("map/enableIdentifyTool", null, { root: true });
       commit("clearCurrentProfile");
       rootState.map.cutTool.setActive(false);
-      rootState.map.openLayersMap
+      rootGetters["map/openLayersMap"]
         .getLayer("CUTTOOL")
         .getSource()
         .clear();
@@ -178,7 +178,7 @@
         });
       }
     },
-    cut({ commit, dispatch, rootState }, cut) {
+    cut({ commit, dispatch, rootState, rootGetters }, cut) {
       return new Promise(resolve => {
         const length = getLength(cut.getGeometry());
         commit(
@@ -219,7 +219,7 @@
           Promise.all(profileLoaders)
             .then(() => {
               rootState.map.cutTool.setActive(false);
-              const los3 = rootState.map.openLayersMap.getLayer(
+              const los3 = rootGetters["map/openLayersMap"].getLayer(
                 "FAIRWAYDIMENSIONSLOS3"
               );
               los3.getSource().forEachFeatureIntersectingExtent(
@@ -241,7 +241,7 @@
                   }
                 }
               );
-              const los2 = rootState.map.openLayersMap.getLayer(
+              const los2 = rootGetters["map/openLayersMap"].getLayer(
                 "FAIRWAYDIMENSIONSLOS2"
               );
               los2.getSource().forEachFeatureIntersectingExtent(
@@ -263,7 +263,7 @@
                   }
                 }
               );
-              const los1 = rootState.map.openLayersMap.getLayer(
+              const los1 = rootGetters["map/openLayersMap"].getLayer(
                 "FAIRWAYDIMENSIONSLOS1"
               );
               los1.getSource().forEachFeatureIntersectingExtent(
@@ -311,7 +311,7 @@
                       bn.properties.name ===
                       rootState.bottlenecks.selectedBottleneck
                   );
-                  commit(
+                  dispatch(
                     "map/moveToExtent",
                     {
                       feature: bottleneck,
diff -r de75404cb5fc -r c71373594719 client/src/store/map.js
--- a/client/src/store/map.js	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/store/map.js	Sat Apr 13 16:02:06 2019 +0200
@@ -39,7 +39,7 @@
 // initial state
 const init = () => {
   return {
-    openLayersMap: null,
+    openLayersMaps: [],
     initialLoad: true,
     extent: {
       lat: 6155376,
@@ -62,6 +62,9 @@
   namespaced: true,
   state: init(),
   getters: {
+    openLayersMap: state => {
+      return state.openLayersMaps.length ? state.openLayersMaps[0] : null;
+    },
     filteredIdentifiedFeatures: state => {
       return state.identifiedFeatures.filter(f => f.getId());
     }
@@ -73,8 +76,8 @@
     extent: (state, extent) => {
       state.extent = extent;
     },
-    openLayersMap: (state, map) => {
-      state.openLayersMap = map;
+    addOpenLayersMap: (state, map) => {
+      state.openLayersMaps.push(map);
     },
     identifyTool: (state, events) => {
       state.identifyTool = events;
@@ -99,27 +102,6 @@
     cutTool: (state, cutTool) => {
       state.cutTool = cutTool;
     },
-    moveToBoundingBox: (state, { boundingBox, zoom, preventZoomOut }) => {
-      const extent = transformExtent(boundingBox, "EPSG:4326", "EPSG:3857");
-      let view = state.openLayersMap.getView();
-      moveMap({ view, extent, zoom, preventZoomOut });
-    },
-    moveToExtent: (state, { feature, zoom, preventZoomOut }) => {
-      const boundingBox = bbox(feature.geometry);
-      const extent = transformExtent(boundingBox, "EPSG:4326", "EPSG:3857");
-      let view = state.openLayersMap.getView();
-      moveMap({ view, extent, zoom, preventZoomOut });
-    },
-    moveMap: (state, { coordinates, zoom, preventZoomOut }) => {
-      let view = state.openLayersMap.getView();
-      const currentZoom = view.getZoom();
-      zoom = zoom || currentZoom;
-      view.animate({
-        zoom: preventZoomOut ? Math.max(zoom, currentZoom) : zoom,
-        center: fromLonLat(coordinates, view.getProjection()),
-        duration: 700
-      });
-    },
     isolinesLegendImgDataURL: (state, isolinesLegendImgDataURL) => {
       state.isolinesLegendImgDataURL = isolinesLegendImgDataURL;
     },
@@ -216,22 +198,25 @@
       commit("lineTool", lineTool);
       commit("polygonTool", polygonTool);
       commit("cutTool", cutTool);
-      commit("openLayersMap", map);
+      commit("addOpenLayersMap", map);
     },
     disableIdentifyTool({ state }) {
       unByKey(state.identifyTool);
       state.identifyTool = null;
     },
-    enableIdentifyTool({ state, rootState, commit, dispatch }) {
+    enableIdentifyTool({ state, rootState, getters, commit, dispatch }) {
       if (!state.identifyTool) {
-        state.identifyTool = state.openLayersMap.on(
+        state.identifyTool = getters.openLayersMap.on(
           ["singleclick", "dblclick"],
           event => {
             commit("setIdentifiedFeatures", []);
             // checking our WFS layers
-            var features = state.openLayersMap.getFeaturesAtPixel(event.pixel, {
-              hitTolerance: 7
-            });
+            var features = getters.openLayersMap.getFeaturesAtPixel(
+              event.pixel,
+              {
+                hitTolerance: 7
+              }
+            );
             if (features) {
               let identifiedFeatures = [];
 
@@ -260,7 +245,7 @@
                     ).then(() => {
                       this.commit("bottlenecks/setFirstSurveySelected");
                     });
-                    commit("moveMap", {
+                    dispatch("moveMap", {
                       coordinates: getCenter(
                         feature
                           .getGeometry()
@@ -287,7 +272,7 @@
                         root: true
                       }
                     );
-                    commit("moveMap", {
+                    dispatch("moveMap", {
                       coordinates: getCenter(
                         feature
                           .getGeometry()
@@ -309,7 +294,7 @@
                     commit("imports/selectedStretchId", feature.getId(), {
                       root: true
                     });
-                    commit("moveMap", {
+                    dispatch("moveMap", {
                       coordinates: getCenter(
                         feature
                           .getGeometry()
@@ -340,7 +325,7 @@
             */
 
             // trying the GetFeatureInfo way for WMS
-            var dmaSource = state.openLayersMap
+            var dmaSource = getters.openLayersMap
               .getLayer("DISTANCEMARKSAXIS")
               .getSource();
             var dmaUrl = dmaSource.getGetFeatureInfoUrl(
@@ -369,7 +354,7 @@
               });
             }
             // trying the GetFeatureInfo way for WMS
-            var iecdisSource = state.openLayersMap
+            var iecdisSource = getters.openLayersMap
               .getLayer("INLANDECDIS")
               .getSource();
             var iecdisUrl = iecdisSource.getGetFeatureInfoUrl(
@@ -387,6 +372,27 @@
           }
         );
       }
+    },
+    moveToBoundingBox({ getters }, { boundingBox, zoom, preventZoomOut }) {
+      const extent = transformExtent(boundingBox, "EPSG:4326", "EPSG:3857");
+      let view = getters.openLayersMap.getView();
+      moveMap({ view, extent, zoom, preventZoomOut });
+    },
+    moveToExtent({ getters }, { feature, zoom, preventZoomOut }) {
+      const boundingBox = bbox(feature.geometry);
+      const extent = transformExtent(boundingBox, "EPSG:4326", "EPSG:3857");
+      let view = getters.openLayersMap.getView();
+      moveMap({ view, extent, zoom, preventZoomOut });
+    },
+    moveMap({ getters }, { coordinates, zoom, preventZoomOut }) {
+      let view = getters.openLayersMap.getView();
+      const currentZoom = view.getZoom();
+      zoom = zoom || currentZoom;
+      view.animate({
+        zoom: preventZoomOut ? Math.max(zoom, currentZoom) : zoom,
+        center: fromLonLat(coordinates, view.getProjection()),
+        duration: 700
+      });
     }
   }
 };