Mercurial > gemma

diff client/src/application/Topbar.vue @ 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 f6a6ce90a1b5
children afe62d1ce01c
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;