Mercurial > gemma

changeset 1158:da75faa8043f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
added central moveMap method to pan and zoom the map on certain events it was requested to prevent zooming out if the zoomlevel is already higher then the desired default zoom (for certain zoom/pan targets) so there's a parameter preventZoomOut which, if set to true, lets this method only zoom in but not out.
author Markus Kottlaender <markus@intevation.de>
date Tue, 13 Nov 2018 14:22:35 +0100
parents 403b99a43f54
children f498494fceb5
files client/src/application/Topbar.vue client/src/bottlenecks/Bottlenecks.vue client/src/store/map.js
diffstat 3 files changed, 25 insertions(+), 33 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/application/Topbar.vue	Tue Nov 13 13:40:35 2018 +0100
+++ b/client/src/application/Topbar.vue	Tue Nov 13 14:22:35 2018 +0100
@@ -111,7 +111,6 @@
  * Thomas Junk <thomas.junk@intevation.de>
  */
 import debounce from "lodash.debounce";
-import { fromLonLat } from "ol/proj";
 import { mapState } from "vuex";
 
 import { displayError } from "../application/lib/errors.js";
@@ -212,23 +211,16 @@
     moveToSearchResult(resultEntry) {
       // DEBUG console.log("Moving to", resultEntry);
       if (resultEntry.geom.type == "Point") {
-        let view = this.openLayersMap.getView();
-        const currentZoom = view.getZoom();
-        let newZoom = 11;
-        if (resultEntry.type === "bottleneck")
-          newZoom = Math.max(17, currentZoom);
-        if (resultEntry.type === "rhm") newZoom = Math.max(15, currentZoom);
-        if (resultEntry.type === "city") newZoom = Math.max(13, currentZoom);
-        view.animate(
-          {
-            zoom: newZoom,
-            center: fromLonLat(
-              resultEntry.geom.coordinates,
-              view.getProjection()
-            )
-          },
-          700
-        );
+        let zoom = 11;
+        if (resultEntry.type === "bottleneck") zoom = 17;
+        if (resultEntry.type === "rhm") zoom = 15;
+        if (resultEntry.type === "city") zoom = 13;
+        
+        this.$store.commit("map/moveMap", {
+          coordinates: resultEntry.geom.coordinates,
+          zoom,
+          preventZoomOut: true
+        });
       }
       // this.searchQuery = ""; // clear search query again
       this.toggleSearchbar();
--- a/client/src/bottlenecks/Bottlenecks.vue	Tue Nov 13 13:40:35 2018 +0100
+++ b/client/src/bottlenecks/Bottlenecks.vue	Tue Nov 13 14:22:35 2018 +0100
@@ -66,7 +66,6 @@
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 import { mapState } from "vuex";
-import { fromLonLat } from "ol/proj";
 import { HTTP } from "../application/lib/http";
 import { displayError } from "../application/lib/errors.js";
 
@@ -160,20 +159,11 @@
       this.moveToBottleneck(bottleneck);
     },
     moveToBottleneck(bottleneck) {
-      // TODO: make this central, duplicates code from application/Topbar.vue
-      let view = this.openLayersMap.getView();
-      const currentZoom = view.getZoom();
-      const newZoom = Math.max(17, currentZoom);
-      view.animate(
-        {
-          zoom: newZoom,
-          center: fromLonLat(
-            bottleneck.geometry.coordinates,
-            view.getProjection()
-          )
-        },
-        700
-      );
+      this.$store.commit("map/moveMap", {
+        coordinates: bottleneck.geometry.coordinates,
+        zoom: 17,
+        preventZoomOut: true
+      });
     },
     sortBy(column) {
       this.sortColumn = column;
--- a/client/src/store/map.js	Tue Nov 13 13:40:35 2018 +0100
+++ b/client/src/store/map.js	Tue Nov 13 14:22:35 2018 +0100
@@ -30,6 +30,7 @@
 import Point from "ol/geom/Point.js";
 import { bbox as bboxStrategy } from "ol/loadingstrategy";
 import { HTTP } from "../application/lib/http";
+import { fromLonLat } from "ol/proj";
 
 export default {
   namespaced: true,
@@ -366,6 +367,15 @@
     },
     cutTool: (state, cutTool) => {
       state.cutTool = cutTool;
+    },
+    moveMap: (state, { coordinates, zoom, preventZoomOut }) => {
+      let view = state.openLayersMap.getView();
+      const currentZoom = view.getZoom();
+      view.animate({
+        zoom: preventZoomOut ? Math.max(zoom, currentZoom) : zoom,
+        center: fromLonLat(coordinates, view.getProjection()),
+        duration: 700
+      });
     }
   }
 };