# HG changeset patch # User Markus Kottlaender # Date 1542115355 -3600 # Node ID da75faa8043f12075cc4578f582ab8444b7e66b3 # Parent 403b99a43f547f763ba3a841e1edbc32cf635185 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. diff -r 403b99a43f54 -r da75faa8043f client/src/application/Topbar.vue --- 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 */ 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(); diff -r 403b99a43f54 -r da75faa8043f client/src/bottlenecks/Bottlenecks.vue --- 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 */ 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; diff -r 403b99a43f54 -r da75faa8043f client/src/store/map.js --- 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 + }); } } };