Mercurial > gemma
changeset 3086:a69a8deb56fe
client: added button to sync/unsync maps when comparing sounding results
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Thu, 18 Apr 2019 15:29:09 +0200 |
| parents | 7ac392edf8e2 |
| children | 014be2194bd1 |
| files | client/src/components/fairway/Profiles.vue client/src/components/map/Map.vue client/src/store/map.js |
| diffstat | 3 files changed, 68 insertions(+), 16 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/Profiles.vue Thu Apr 18 14:24:52 2019 +0200 +++ b/client/src/components/fairway/Profiles.vue Thu Apr 18 15:29:09 2019 +0200 @@ -94,7 +94,7 @@ </select> </div> </div> - <div class="mt-3 d-flex" v-if="additionalSurvey"> + <div class="mt-2 d-flex" v-if="additionalSurvey"> <button class="btn btn-info btn-xs flex-fill" @click="differencesVisible ? showSurvey() : showDifferences()" @@ -113,6 +113,16 @@ > <font-awesome-icon icon="redo" fixed-width /> </button> + <button + class="btn btn-info btn-xs ml-2" + @click="toggleSyncMaps()" + v-tooltip="syncMapsTooltip" + > + <font-awesome-icon + :icon="mapsAreSynced ? 'unlink' : 'link'" + fixed-width + /> + </button> </div> <hr class="w-100 mb-0" /> <small class="text-muted d-block mt-2"> @@ -268,12 +278,13 @@ return { coordinatesInput: "", cutLabel: "", - showLabelInput: false + showLabelInput: false, + comparePaneId: "compare-sounding-results" }; }, computed: { ...mapState("application", ["showProfiles"]), - ...mapState("map", ["openLayersMaps", "cutToolEnabled"]), + ...mapState("map", ["openLayersMaps", "syncedMaps", "cutToolEnabled"]), ...mapState("bottlenecks", [ "bottlenecksList", "surveys", @@ -389,16 +400,22 @@ }, differencesVisible() { return ( - !this.openLayersMap("compare-sounding-results") + !this.openLayersMap(this.comparePaneId) .getLayer("BOTTLENECKISOLINE") .getVisible() && - this.openLayersMap("compare-sounding-results") + this.openLayersMap(this.comparePaneId) .getLayer("DIFFERENCES") .getVisible() ); }, rotatePanesTooltip() { return this.$gettext("Rotate Maps"); + }, + syncMapsTooltip() { + return this.$gettext("Syncronize Maps"); + }, + mapsAreSynced() { + return this.syncedMaps.includes(this.comparePaneId); } }, watch: { @@ -413,17 +430,16 @@ additionalSurvey(survey) { if (survey) { this.loadDifferences(); + this.$store.commit("map/syncedMaps", [this.comparePaneId]); this.$store.commit("application/addPane", { - id: "compare-sounding-results", + id: this.comparePaneId, component: "Map" }); this.$store.commit("application/paneRotate", 4); } else { - this.$store.commit( - "application/removePane", - "compare-sounding-results" - ); + this.$store.commit("application/removePane", this.comparePaneId); this.$store.commit("application/paneRotate", 1); + this.$store.commit("map/syncedMaps", []); } this.loadProfile(survey); }, @@ -434,6 +450,16 @@ } }, methods: { + toggleSyncMaps() { + if (this.mapsAreSynced) { + this.$store.commit( + "map/syncedMaps", + this.syncedMaps.filter(m => m !== this.comparePaneId) + ); + } else { + this.$store.commit("map/syncedMaps", [this.comparePaneId]); + } + }, loadDifferences() { this.$store.commit("fairwayprofile/setDifferencesLoading", true); HTTP.post( @@ -461,18 +487,18 @@ }); }, showDifferences() { - this.openLayersMap("compare-sounding-results") + this.openLayersMap(this.comparePaneId) .getLayer("BOTTLENECKISOLINE") .setVisible(false); - this.openLayersMap("compare-sounding-results") + this.openLayersMap(this.comparePaneId) .getLayer("DIFFERENCES") .setVisible(true); }, showSurvey() { - this.openLayersMap("compare-sounding-results") + this.openLayersMap(this.comparePaneId) .getLayer("BOTTLENECKISOLINE") .setVisible(true); - this.openLayersMap("compare-sounding-results") + this.openLayersMap(this.comparePaneId) .getLayer("DIFFERENCES") .setVisible(false); },
--- a/client/src/components/map/Map.vue Thu Apr 18 14:24:52 2019 +0200 +++ b/client/src/components/map/Map.vue Thu Apr 18 15:29:09 2019 +0200 @@ -52,7 +52,7 @@ }; }, computed: { - ...mapState("map", ["initialLoad", "extent", "syncedView"]), + ...mapState("map", ["initialLoad", "extent", "syncedMaps", "syncedView"]), ...mapState("bottlenecks", ["selectedSurvey"]), ...mapState("fairwayprofile", ["additionalSurvey"]), ...mapState("application", ["panes", "paneRotate"]), @@ -81,6 +81,20 @@ paneRotate() { this.$nextTick(() => this.map.updateSize()); }, + syncedMaps(syncedMaps) { + if (syncedMaps.includes(this.paneId) || this.paneId === "main") { + this.map.setView(this.syncedView); + } else { + this.map.setView( + new View({ + center: [this.extent.lon, this.extent.lat], + minZoom: 5, // restrict zooming out to ~size of Europe for width 1000px + zoom: this.extent.zoom, + projection: "EPSG:3857" + }) + ); + } + }, selectedSurvey(survey) { if (this.paneId === "main") { if (survey) { @@ -142,7 +156,15 @@ layers: this.layers.config, target: "map-" + this.paneId, controls: [], - view: this.syncedView + view: + this.syncedMaps.includes(this.paneId) || this.paneId === "main" + ? this.syncedView + : new View({ + center: [this.extent.lon, this.extent.lat], + minZoom: 5, + zoom: this.extent.zoom, + projection: "EPSG:3857" + }) }); this.map.getLayer = id => this.layers.get(id);
--- a/client/src/store/map.js Thu Apr 18 14:24:52 2019 +0200 +++ b/client/src/store/map.js Thu Apr 18 15:29:09 2019 +0200 @@ -30,6 +30,7 @@ const init = () => { return { openLayersMaps: [], + syncedMaps: [], syncedView: null, initialLoad: true, extent: { @@ -79,6 +80,9 @@ state.openLayersMaps.splice(index, 1); } }, + syncedMaps: (state, ids) => { + state.syncedMaps = ids; + }, syncedView: (state, view) => { state.syncedView = view; },