Merge pull request #566 from Dataport/vue3/update-behaviour-of-GeoLocation

refactor(geoLocation): update centering behaviour

Author: jedi-of-the-sea

examples/snowbox/index.js

@@ -359,7 +359,7 @@ addPlugin(
 				{
 					plugin: pluginGeoLocation({
 						checkLocationInitially: false,
-						keepCentered: false,
+						keepCentered: true,
 						showTooltip: true,
 						zoomLevel: 7,
 						// usable when you're in HH or fake your geolocation to HH

src/core/stores/index.ts

@@ -29,6 +29,14 @@ export const useCoreStore = defineStore('core', () => {
 	const markerStore = useMarkerStore()
 
 	return {
+		/**
+		 * The current center coordinates of the map.
+		 *
+		 * @alpha
+		 * @readonly
+		 */
+		center: computed(() => mainStore.center),
+
 		/**
 		 * Color scheme the client should be using.
 		 */

src/plugins/geoLocation/store.ts

@@ -18,7 +18,7 @@ import * as Proj from 'ol/proj'
 import { transform as transformCoordinates } from 'ol/proj'
 import VectorSource from 'ol/source/Vector'
 import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import { useCoreStore } from '@/core/stores'
 import { notifyUser } from '@/lib/notifyUser'
@@ -46,6 +46,8 @@ export const useGeoLocationStore = defineStore('plugins/geoLocation', () => {
 	const lastBoundaryCheck = ref<boolean | symbol | null>(null)
 	const position = ref<number[]>([])
 
+	let mapHasBeenMovedByUser = false
+
 	const configuration = computed<
 		GeoLocationPluginOptions & { showTooltip: boolean; zoomLevel: number }
 	>(() =>
@@ -141,6 +143,7 @@ export const useGeoLocationStore = defineStore('plugins/geoLocation', () => {
 
 	/** Enable tracking of geo position */
 	function track() {
+		mapHasBeenMovedByUser = false
 		if (isGeolocationDenied.value) {
 			onError({
 				message: 'Geolocation API usage was denied by user or configuration.',
@@ -166,6 +169,15 @@ export const useGeoLocationStore = defineStore('plugins/geoLocation', () => {
 		geolocation.value.on('error', onError)
 	}
 
+	watch(
+		() => coreStore.center,
+		() => {
+			if (position.value !== coreStore.center) {
+				mapHasBeenMovedByUser = true
+			}
+		}
+	)
+
 	/**
 	 * Show error information and stop tracking if there are errors by tracking the position
 	 */
@@ -245,7 +257,8 @@ export const useGeoLocationStore = defineStore('plugins/geoLocation', () => {
 
 		if (
 			(configuration.value.keepCentered || !hadPosition) &&
-			lastBoundaryCheck.value
+			lastBoundaryCheck.value &&
+			!mapHasBeenMovedByUser
 		) {
 			coreStore.map.getView().setCenter(coordinate)
 			coreStore.map.getView().setZoom(configuration.value.zoomLevel)