fast, relyable maps/bettercode/trigger

src/__routes.svelte

@@ -54,6 +54,10 @@
 				path: '/profile/:erantId',
 				component: () => import('$routes/profile/profile.svelte'),
 			},
+			{
+				path: '/map',
+				component: () => import('$routes/map/map.svelte'),
+			},
 		].map((routes) => {
 			return { ...routes, layout: NavigationBarLayout }
 		}),
@@ -86,10 +90,7 @@
 			path: '/test',
 			component: () => import('$routes/test.svelte'),
 		},*/
-		{
-			path: '/map',
-			component: () => import('$root/src/routes/map/map.svelte'),
-		},
+
 		{
 			path: '/profile/',
 			component: () => import('$src/__error.svelte'),

src/lib/components/Map/Erantmap.svelte

@@ -43,8 +43,10 @@
 
 	const userCenter = () => {
 		// @ts-ignore
-		document.getElementsByClassName('mapboxgl-ctrl-geolocate')[0].click()
+		if (trigger) trigger()
 	}
+
+	let trigger
 </script>
 
 <LocationRequest />
@@ -54,6 +56,7 @@
 		<Map on:ready={() => setTimeout(() => userCenter(), 100)} {center} bind:mapComponent class={className} on:move>
 			<slot />
 			<GeolocateControl
+				on:trackuserlocationend={console.log}
 				options={{
 					trackUserLocation: true,
 					showUserHeading: true,
@@ -61,6 +64,7 @@
 						enableHighAccuracy: true,
 					},
 				}}
+				bind:trigger
 				on:trackuserlocationstart={() => {}}
 				on:geolocate={(e) => {
 					// @ts-ignore

src/routes/map/map.svelte

@@ -8,36 +8,20 @@
 	import { onMount } from 'svelte'
 
 	let userLocation: { lat: number; lng: number } = { lat: 0, lng: 0 }
-	let granted = false
 
-	const lastGame = localStorage.getItem('lastGame')
-
-	const handleLocationGranted = (position: GeolocationPosition) => {
+	/*const handleLocationGranted = (position: GeolocationPosition) => {
 		userLocation = { lat: position.coords.latitude, lng: position.coords.longitude }
 		granted = true
-	}
+	}*/
 
-	navigator.geolocation.getCurrentPosition(handleLocationGranted)
+	//navigator.geolocation.getCurrentPosition(handleLocationGranted)
 
 	$: [experiences] = getExperiencesAsStore()
 </script>
 
-<NavigationBarLayout>
-	{#if granted}
-		<!-- Conditionally center on current location if granted is true. -->
-		<Erantmap class="w-full h-full" center={{ lng: userLocation.lng, lat: userLocation.lat }}>
+<!-- Conditionally center on current location if granted is true. -->
+<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]}
-					{userLocation}
-				/>
+		<Marker popup={experience.ExpName} on:click={() => navigate(`/${experience.ExpURL}`)} lat={experience.ExpLocation[0]} lng={experience.ExpLocation[1]} {userLocation} />
 	{/each}
-		</Erantmap>
-	{:else}
-		<!--If not granted, the LocationRequest component is displayed and when it is granted center map. -->
-		<LocationRequest on:locationGranted={() => (granted = true)} />
-	{/if}
-</NavigationBarLayout>
+</Erantmap>