Delay request for location by providing a button #264 + style improve…

…ments for map controls

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: '',

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']),
 

src/components/Viewer.vue

@@ -59,7 +59,7 @@ export default {
 		}
 	},
 	computed: {
-		...Utils.mapState(['connection', 'userLocation']),
+		...Utils.mapState(['connection']),
 		nextTabId() {
 			return `viewer~${this.tabIdCounter}`;
 		}

src/components/datatypes/MapAreaSelect.vue

@@ -1,6 +1,7 @@
 <template>
 	<div :id="id">
 		<ProgressControl ref="progress" :map="map" />
+		<UserLocationControl :map="map" />
 		<TextControl :text="help" :map="map" />
 	</div>
 </template>

src/components/maps/GeoJsonMapEditor.vue

@@ -1,6 +1,7 @@
 <template>
 	<div :id="id" class="geojson-map-editor">
 		<ProgressControl ref="progress" :map="map" />
+		<UserLocationControl :map="map" />
 	</div>
 </template>
 

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);
 				}
 			}
 

src/components/maps/TextControl.vue

@@ -54,6 +54,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.value {
+	position: absolute;
+	top: 0.5em;
+	left: calc(2.375em + 6px);
+	max-width: calc(100% - 2*(2.375em + 6px));
+	box-sizing: border-box;
+	background-color: rgba(255,255,255,0.6);
+}
 .pointer {
 	cursor: pointer;
 }

src/components/maps/UserLocationControl.vue

@@ -0,0 +1,44 @@
+<template>
+	<div class="ol-location ol-unselectable ol-control" style="pointer-events: auto;">
+		<button type="button" @click.prevent.stop="request" title="Go to your location">
+			<i class="fas fa-location-arrow"></i>
+		</button>
+	</div>
+</template>
+
+<script>
+import ControlMixin from './ControlMixin.vue';
+import { fromLonLat } from 'ol/proj';
+
+export default {
+	name: 'UserLocationControl',
+	mixins: [
+		ControlMixin
+	],
+	methods: {
+		request() {
+			if ("geolocation" in navigator) {
+				navigator.geolocation.getCurrentPosition(
+					position => {
+						let view = this.map.getView();
+						let coords = [position.coords.longitude, position.coords.latitude];
+						view.setCenter(fromLonLat(coords, view.getProjection()));
+					},
+					error => Utils.error(this, error, "Location Error"),
+					{
+						maximumAge: Infinity
+					}
+				);
+			}
+		},
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.ol-location {
+	z-index: 0;
+	left: 0.5em;
+	top: calc(3.75em + 6px);
+}
+</style>

src/components/viewer/MapViewer.vue

@@ -3,6 +3,7 @@
 		<Pane id="map">
 			<div :id="id" class="map-viewer">
 				<ProgressControl ref="progress" :map="map" />
+				<UserLocationControl :map="map" />
 				<TextControl v-if="isGeoTiff" :text="textControlText" />
 				<ChannelControl v-if="isGeoTiff && !colorMap" :bands="bands" @update="updateGeoTiffStyle" />
 				<div v-if="loading" class="map-loading">
@@ -256,8 +257,4 @@ export default {
 		}
 	}
 }
-.ol-control.value {
-	top: 0.5em;
-	left: 3em;
-}
 </style>

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;
 		},