location attempt to fix

src/lib/components/Map/Erantmap.svelte

@@ -54,7 +54,13 @@
 		<Map on:ready={() => setTimeout(() => userCenter(), 100)} {center} bind:mapComponent class={className} on:move>
 			<slot />
 			<GeolocateControl
-				options={{ trackUserLocation: true }}
+				options={{
+					trackUserLocation: true,
+					showUserHeading: true,
+					positionOptions: {
+						enableHighAccuracy: true,
+					},
+				}}
 				on:trackuserlocationstart={() => {}}
 				on:geolocate={(e) => {
 					// @ts-ignore

src/routes/map/map.svelte

@@ -7,13 +7,13 @@
 	import { getExperiencesAsStore } from '$lib/utils/database/experience'
 	import { onMount } from 'svelte'
 
-	let user: { lat: number; lng: number } = { lat: 0, lng: 0 }
+	let userLocation: { lat: number; lng: number } = { lat: 0, lng: 0 }
 	let granted = false
 
 	const lastGame = localStorage.getItem('lastGame')
 
 	const handleLocationGranted = (position: GeolocationPosition) => {
-		user = { lat: position.coords.latitude, lng: position.coords.longitude }
+		userLocation = { lat: position.coords.latitude, lng: position.coords.longitude }
 		granted = true
 	}
 
@@ -25,9 +25,15 @@
 <NavigationBarLayout>
 	{#if granted}
 		<!-- Conditionally center on current location if granted is true. -->
-		<Erantmap class="w-full h-full" center={{ lng: user.lng, lat: user.lat }} bind:user>
+		<Erantmap class="w-full h-full" center={{ lng: userLocation.lng, lat: userLocation.lat }}>
 			{#each $experiences as experience}
-				<Marker popup={experience.ExpName} on:click={() => navigate(`/${experience.ExpURL}`)} lat={experience.ExpLocation[0]} lng={experience.ExpLocation[1]} {user} />
+				<Marker
+					popup={experience.ExpName}
+					on:click={() => navigate(`/${experience.ExpURL}`)}
+					lat={experience.ExpLocation[0]}
+					lng={experience.ExpLocation[1]}
+					{userLocation}
+				/>
 			{/each}
 		</Erantmap>
 	{:else}