From 79df08221b777c57a490cd6478312040c950e2cc Mon Sep 17 00:00:00 2001 From: Matthias Mohr Date: Thu, 20 Oct 2022 19:02:58 +0200 Subject: [PATCH] Delay request for location by providing a button #264 + style improvements for map controls --- config.js | 8 +++- src/components/IDE.vue | 3 +- src/components/Viewer.vue | 2 +- src/components/datatypes/MapAreaSelect.vue | 1 + src/components/maps/GeoJsonMapEditor.vue | 1 + src/components/maps/MapMixin.vue | 15 ++++--- src/components/maps/TextControl.vue | 8 ++++ src/components/maps/UserLocationControl.vue | 44 +++++++++++++++++++++ src/components/viewer/MapViewer.vue | 5 +-- src/store/index.js | 19 +-------- 10 files changed, 73 insertions(+), 33 deletions(-) create mode 100644 src/components/maps/UserLocationControl.vue diff --git a/config.js b/config.js index c86f4582c..b21898517 100644 --- a/config.js +++ b/config.js @@ -12,8 +12,12 @@ export default { // Skip login and automatically load up the "discovery mode" skipLogin: false, - // Request the user location to default the map view on where the user is - requestUserLocation: true, + // Default location for maps + // Default to the center of the EU in Wuerzburg: + // https://en.wikipedia.org/wiki/Geographical_midpoint_of_Europe#Geographic_centre_of_the_European_Union + // The zoom level should show most of Europe + mapLocation: [49.8, 9.9], + mapZoom: 4, // A message shown on the login page loginMessage: '', diff --git a/src/components/IDE.vue b/src/components/IDE.vue index 277760ed1..818bf8d13 100644 --- a/src/components/IDE.vue +++ b/src/components/IDE.vue @@ -116,7 +116,6 @@ export default { } }, async mounted() { - this.initUserLocation(); this.listen('showDataForm', this.showDataForm); this.listen('editProcess', this.editProcess); this.listen('showLogin', this.login); @@ -145,7 +144,7 @@ export default { } }, methods: { - ...Utils.mapActions(['describeAccount', 'initUserLocation']), + ...Utils.mapActions(['describeAccount']), ...Utils.mapMutations(['discoveryCompleted']), ...Utils.mapMutations('editor', ['setContext', 'setProcess', 'setCollectionPreview']), diff --git a/src/components/Viewer.vue b/src/components/Viewer.vue index e205e9853..de848b63e 100644 --- a/src/components/Viewer.vue +++ b/src/components/Viewer.vue @@ -59,7 +59,7 @@ export default { } }, computed: { - ...Utils.mapState(['connection', 'userLocation']), + ...Utils.mapState(['connection']), nextTabId() { return `viewer~${this.tabIdCounter}`; } diff --git a/src/components/datatypes/MapAreaSelect.vue b/src/components/datatypes/MapAreaSelect.vue index 54dde3779..b6bf0f1cb 100644 --- a/src/components/datatypes/MapAreaSelect.vue +++ b/src/components/datatypes/MapAreaSelect.vue @@ -1,6 +1,7 @@ diff --git a/src/components/maps/GeoJsonMapEditor.vue b/src/components/maps/GeoJsonMapEditor.vue index 7712b4941..a55546991 100644 --- a/src/components/maps/GeoJsonMapEditor.vue +++ b/src/components/maps/GeoJsonMapEditor.vue @@ -1,6 +1,7 @@ diff --git a/src/components/maps/MapMixin.vue b/src/components/maps/MapMixin.vue index 3cd031930..e4c8eb189 100644 --- a/src/components/maps/MapMixin.vue +++ b/src/components/maps/MapMixin.vue @@ -16,12 +16,14 @@ import 'ol-ext/control/LayerSwitcher.css'; import LayerSwitcher from 'ol-ext/control/LayerSwitcher'; import ProgressControl from './ProgressControl.vue'; +import UserLocationControl from './UserLocationControl.vue'; let idCounter = 1; export default { components: { - ProgressControl + ProgressControl, + UserLocationControl }, mixins: [EventBusMixin], props: { @@ -49,9 +51,6 @@ export default { await this.showMap(); } }, - computed: { - ...Utils.mapState(['userLocation', 'locationZoom']), - }, async mounted() { await this.showMap(); }, @@ -83,10 +82,14 @@ export default { if (!view) { view = new View(viewOpts); if (!view.getCenter()) { - view.setCenter(fromLonLat([this.userLocation[1], this.userLocation[0]], view.getProjection())); + let location = this.$config.mapLocation; + if (!Array.isArray(location) || location.length != 2) { + location = [0,0]; + } + view.setCenter(fromLonLat([location[1], location[0]], view.getProjection())); } if (!view.getZoom()) { - view.setZoom(this.locationZoom); + view.setZoom(this.$config.mapZoom || 0); } } diff --git a/src/components/maps/TextControl.vue b/src/components/maps/TextControl.vue index 25937f9db..fe816ee5c 100644 --- a/src/components/maps/TextControl.vue +++ b/src/components/maps/TextControl.vue @@ -54,6 +54,14 @@ export default { \ No newline at end of file diff --git a/src/components/viewer/MapViewer.vue b/src/components/viewer/MapViewer.vue index 84b47f00a..928486238 100644 --- a/src/components/viewer/MapViewer.vue +++ b/src/components/viewer/MapViewer.vue @@ -3,6 +3,7 @@
+
@@ -256,8 +257,4 @@ export default { } } } -.ol-control.value { - top: 0.5em; - left: 3em; -} \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js index 226ccdd28..a0fc57341 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -42,9 +42,7 @@ const getDefaultState = () => { udfRuntimes: {}, processesUpdated: 0, collections: [], - processNamespaces: Config.processNamespaces || [], - userLocation: [49.8, 9.9], // Default to the center of the EU in Wuerzburg: https://en.wikipedia.org/wiki/Geographical_midpoint_of_Europe#Geographic_centre_of_the_European_Union - locationZoom: 4 // Should show most of Europe + processNamespaces: Config.processNamespaces || [] }; }; @@ -130,17 +128,6 @@ export default new Vuex.Store({ } }, actions: { - async initUserLocation(cx) { - if (Config.requestUserLocation && "geolocation" in navigator) { - navigator.geolocation.getCurrentPosition( - position => cx.commit('userLocation', [position.coords.latitude, position.coords.longitude]), - error => console.warn(error), - { - maximumAge: Infinity - } - ); - } - }, async connect(cx, url) { await cx.dispatch('logout'); @@ -328,10 +315,6 @@ export default new Vuex.Store({ } }, mutations: { - userLocation(state, location) { - state.userLocation = location; - state.locationZoom = 6; - }, discoveryCompleted(state, completed = true) { state.discoveryCompleted = completed; },