Mercurial > gemma

changeset 783:ab9604a46075

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: add move after clicking search result * Move openLayersMap to mapstore. * Add code to move the center to the point of a clicked search result, with animation.
author Bernhard Reiter <bernhard@intevation.de>
date Wed, 26 Sep 2018 15:29:17 +0200
parents cb6dc630c702
children 5616c6bfb186
files client/src/application/Topbar.vue client/src/map/Maplayer.vue client/src/map/store.js
diffstat 3 files changed, 26 insertions(+), 10 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/application/Topbar.vue	Wed Sep 26 14:57:35 2018 +0200
+++ b/client/src/application/Topbar.vue	Wed Sep 26 15:29:17 2018 +0200
@@ -97,6 +97,8 @@
 
 <script>
 import debounce from "lodash.debounce";
+import { fromLonLat } from "ol/proj";
+import { mapState } from "vuex";
 
 import { displayError } from "../application/lib/errors.js";
 import { HTTP } from "../application/lib/http";
@@ -119,6 +121,7 @@
     };
   },
   computed: {
+    ...mapState("mapstore", ["openLayersMap"]),
     searchIndicator: function() {
       if (this.isSearching) {
         return "⟳";
@@ -182,10 +185,21 @@
       this.searchQueryIsDirty = false;
     },
     moveToSearchResult(resultEntry) {
-      console.log("Moving to", resultEntry);
-      if(resultEntry.geom.type == "Point") {
-
+      // DEBUG console.log("Moving to", resultEntry);
+      if (resultEntry.geom.type == "Point") {
+        let view = this.openLayersMap.getView();
+        view.animate(
+          {
+            center: fromLonLat(
+              resultEntry.geom.coordinates,
+              view.getProjection()
+            )
+          },
+          700
+        );
       }
+      // this.searchQuery = ""; // clear search query again
+      this.toggleSearchbar();
     },
     toggleSearchbar() {
       this.searchbarCollapsed = !this.searchbarCollapsed;
--- a/client/src/map/Maplayer.vue	Wed Sep 26 14:57:35 2018 +0200
+++ b/client/src/map/Maplayer.vue	Wed Sep 26 15:29:17 2018 +0200
@@ -14,7 +14,7 @@
 
 <script>
 import { HTTP } from "../application/lib/http";
-import { mapGetters } from "vuex";
+import { mapGetters, mapState } from "vuex";
 import "ol/ol.css";
 import { Map, View } from "ol";
 import Feature from "ol/Feature";
@@ -41,17 +41,14 @@
   data() {
     return {
       projection: "EPSG:3857",
-      openLayersMap: null,
       interaction: null,
       vectorLayer: null,
       vectorSource: null
     };
   },
   computed: {
-    ...mapGetters("mapstore", [
-      "layers",
-      "getLayerByName"
-    ]),
+    ...mapGetters("mapstore", ["layers", "getLayerByName"]),
+    ...mapState("mapstore", ["openLayersMap"]),
     mapStyle() {
       return {
         mapfull: !this.split,
@@ -295,7 +292,7 @@
   mounted() {
     this.createVectorSource();
     this.createVectorLayer();
-    this.openLayersMap = new Map({
+    let map = new Map({
       layers: this.layerData,
       target: "map",
       controls: [],
@@ -305,6 +302,7 @@
         projection: this.projection
       })
     });
+    this.$store.commit("mapstore/setOpenLayersMap", map);
 
     // TODO make display of layers more dynamic, e.g. from a list
 
--- a/client/src/map/store.js	Wed Sep 26 14:57:35 2018 +0200
+++ b/client/src/map/store.js	Wed Sep 26 15:29:17 2018 +0200
@@ -10,6 +10,7 @@
 const MapStore = {
   namespaced: true,
   state: {
+    openLayersMap: null,
     layers: [
       {
         name: "Open Streetmap",
@@ -165,6 +166,9 @@
     },
     setIdentifiedFeatures: (state, identifiedFeatures) => {
       state.identifiedFeatures = identifiedFeatures;
+    },
+    setOpenLayersMap: (state, map) => {
+      state.openLayersMap = map;
     }
   }
 };