src/lib/components/Map/LocationRequest.svelte

@@ -1,34 +1,49 @@
 <script lang="ts">
-	import { Alert, Button } from 'flowbite-svelte'
+	import { Alert, Button } from 'flowbite-svelte';
-	import { createEventDispatcher, onMount } from 'svelte'
+	import { createEventDispatcher, onMount } from 'svelte';
   
-	const dispatch = createEventDispatcher()
+	const dispatch = createEventDispatcher();
-	let state: 'granted' | 'not-granted' | 'unknown' = 'unknown'; //state variable is used to determine whether the user has granted or denied location access.
+	let state: 'granted' | 'not-granted' | 'unknown' = 'unknown'; //state variable is used to determine whether the user has granted, denied or hasn't decided location access.
+  
+	const handlePermission = (status: PermissionState) => {
+	  if (status === 'granted') {
+		state = 'granted';
+		localStorage.setItem('locationPermission', 'granted');
+		document.cookie = 'locationPermission=granted; path=/';
+	  } else if (status === 'denied') {
+		state = 'not-granted';
+		localStorage.setItem('locationPermission', 'not-granted');
+		document.cookie = 'locationPermission=not-granted; path=/';
+	  }
+	};
   
-// checks if the navigator.permissions API is available
 	onMount(() => {
 	  if (navigator.permissions) {
-	//navigator.permissions.query method to check if the permission has already been granted.
+		navigator.permissions
-      navigator.permissions.query({ name: 'geolocation' }).then((result) => {
+		  .query({ name: 'geolocation' })
-        if (result.state === 'granted') {
+		  .then((permissionStatus) => {
-          state = 'granted';
+			handlePermission(permissionStatus.state);
-        } else if (result.state === 'prompt') {
+			permissionStatus.onchange = () => {
-          state = 'unknown'; //If the permission status is prompt, it means the user has not yet made a decision, so the state is set to unknown
+			  handlePermission(permissionStatus.state);
-        } else {
+			};
-          state = 'not-granted';
-        }
 		  });
 	  } else if (navigator.geolocation) {
 		navigator.geolocation.getCurrentPosition(
 		  () => {
 			state = 'granted';
+			localStorage.setItem('locationPermission', 'granted');
+			document.cookie = 'locationPermission=granted; path=/';
 		  },
 		  () => {
 			state = 'not-granted';
+			localStorage.setItem('locationPermission', 'not-granted');
+			document.cookie = 'locationPermission=not-granted; path=/';
 		  }
 		);
 	  } else {
 		state = 'not-granted';
+		localStorage.setItem('locationPermission', 'not-granted');
+		document.cookie = 'locationPermission=not-granted; path=/';
 	  }
 	});
   </script>
@@ -48,7 +63,6 @@
   {#if state === 'granted'}
 	<script>
 	  import { onMount } from 'svelte';
-
 	  onMount(() => {
 		const event = new CustomEvent('locationGranted', { detail: { granted: true } });
 		window.dispatchEvent(event);

src/routes/map.svelte

@@ -4,22 +4,26 @@
 	import LocationRequest from '$lib/components/Map/LocationRequest.svelte'
 	import { onMount } from 'svelte'
   
-	let user = { lat: 50.073658, lng: 14.41854 }
 	let granted = false
+	let user = null
+  
+	const handleLocationGranted = (position: GeolocationPosition) => {
+	  user = { lat: position.coords.latitude, lng: position.coords.longitude }
+	  granted = true
+	}
   
 	onMount(() => {
-	  navigator.permissions.query({ name: 'geolocation' })
+	  const storedPermission = localStorage.getItem('locationPermission')
-		.then(permissionStatus => {
+	  if (storedPermission === 'granted') {
-		  if (permissionStatus.state === 'granted') {
+		navigator.geolocation.getCurrentPosition(
-			granted = true
+		  (position) => {
-		  } else {
+			handleLocationGranted(position)
-			granted = false
+		  },
+		  (error) => {
+			console.log(error)
+		  }
+		)
 	  }
-		})
-		.catch(error => {
-		  console.error(error)
-		  granted = false
-		})
 	})
   </script>
   
@@ -27,6 +31,6 @@
 	{#if granted}
 	  <Erantmap class="w-full h-full" center={{ lng: user.lng, lat: user.lat }} bind:user />
 	{:else}
-	  <LocationRequest on:locationGranted={() => (granted = true)} />
+	  <LocationRequest on:locationGranted={handleLocationGranted} />
 	{/if}
   </NavigationBarLayout>