Mercurial > gemma
changeset 1158:da75faa8043f
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 + }); } } };