map error fix

src/App.svelte

@@ -55,6 +55,5 @@
 		width: 100%;
 		position: relative;
 		max-width: var(--max-viewport-width);
-		padding: 10px;
 	}
 </style>

src/lib/components/Layouts/NavigationBarLayout.svelte

@@ -44,7 +44,7 @@
 	<div class={'section w-full h-[calc(100%-100px)] overflow-auto ' + className}><slot /></div>
 	<div class="footer">
 		{#each items as { name, url, image_url }}
-			{#if location.pathname === url || location.pathname.includes("/" + url.split("/")[0] + '/')}
+			{#if location.pathname === url || location.pathname.includes('/' + url.split('/')[0] + '/')}
 				<FooterItem on:click={() => navigate(url)} active={true} {name} {url}>
 					<img alt="" style="filter: invert(44%) sepia(66%) saturate(6619%) hue-rotate(222deg) brightness(98%) contrast(88%);" src={image_url} />
 				</FooterItem>

src/lib/components/Map/Map.svelte

@@ -10,6 +10,8 @@
 
 	export let radius = false
 	export let center: { lng: number; lat: number } = { lng: 0, lat: 0 }
+	$: console.log(center)
+
 	/*export const geo = (e) => {
 		geolocateControl.dispatchEvent('geolocate')
 		if (navigator.geolocation) {

src/routes/map.svelte

@@ -1,43 +1,43 @@
 <script lang="ts">
-	import NavigationBarLayout from '$lib/components/Layouts/NavigationBarLayout.svelte';
+	import NavigationBarLayout from '$lib/components/Layouts/NavigationBarLayout.svelte'
-	import Erantmap from '$lib/components/Map/Erantmap.svelte';
+	import Erantmap from '$lib/components/Map/Erantmap.svelte'
-	import LocationRequest from '$lib/components/Map/LocationRequest.svelte';
+	import LocationRequest from '$lib/components/Map/LocationRequest.svelte'
-	import { onMount } from 'svelte';
+	import { onMount } from 'svelte'
-  
+
-	let user: { lat: number, lng: number } = null;
+	let user: { lat: number; lng: number } = { lat: 0, lng: 0 }
-	let granted = false;
+	let granted = false
 
 	const lastGame = localStorage.getItem('lastGame')
 
 	const handleLocationGranted = (position: GeolocationPosition) => {
-	  user = { lat: position.coords.latitude, lng: position.coords.longitude };
+		user = { lat: position.coords.latitude, lng: position.coords.longitude }
-	  granted = true;
+		granted = true
 	}
-  
+
 	onMount(() => {
-	  if ('permissions' in navigator) {
+		if ('permissions' in navigator) {
-		navigator.permissions.query({ name: 'geolocation' }).then((permissionStatus) => {
+			navigator.permissions.query({ name: 'geolocation' }).then((permissionStatus) => {
-		  if (permissionStatus.state === 'granted') {
+				if (permissionStatus.state === 'granted') {
-			navigator.geolocation.getCurrentPosition(
+					navigator.geolocation.getCurrentPosition(
-			  (position) => {
+						(position) => {
-				handleLocationGranted(position);
+							handleLocationGranted(position)
-			  },
+						},
-			  (error) => {
+						(error) => {
-				console.log(error);
+							console.log(error)
-			  }
+						},
-			);
+					)
-		  }
+				}
-		});
+			})
-	  }
+		}
-	});
+	})
-  </script>
+</script>
-  
+
-  <NavigationBarLayout>
+<NavigationBarLayout>
 	{#if granted}
-	<!-- Conditionally center on current location if granted is true. -->
+		<!-- 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: user.lng, lat: user.lat }} bind:user />
 	{:else}
-	<!--If not granted, the LocationRequest component is displayed and when it is granted center map. -->
+		<!--If not granted, the LocationRequest component is displayed and when it is granted center map. -->
-	<LocationRequest on:locationGranted={() => granted = true} />
+		<LocationRequest on:locationGranted={() => (granted = true)} />
 	{/if}
-  </NavigationBarLayout>
+</NavigationBarLayout>