map fix

src/lib/Components/Map/Erantmap.svelte

@@ -1,8 +1,11 @@
 <script>
+	import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
 	import Map from './Map.svelte'
 	import { navigate } from 'svelte-routing'
 
-	export let center = { lat: null, lng: null }
+	export let center
+	$: console.log(center)
+
 	export let mapComponent
 	export let user = { lat: null, lng: null }
 
@@ -22,6 +25,13 @@
 
 <Map {center} bind:mapComponent class={className} on:move>
 	<slot />
+	<GeolocateControl
+		on:geolocate={(e) => {
+			const { latitude, longitude } = e.detail.coords
+			const user = { lat: latitude, lng: longitude }
+			console.log(user)
+		}}
+	/>
 </Map>
 
 <div class="on">
@@ -35,7 +45,7 @@
 			/>
 		</svg>
 	</button>
-	<button on:click={() => mapComponent.setCenter([user.lng, user.lat], 14)}>
+	<button on:click={() => document.getElementsByClassName('mapboxgl-ctrl-geolocate')[0].click()}>
 		<svg viewBox="0 0 29 39" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
 				fill-rule="evenodd"

src/lib/Components/Map/Map.svelte

@@ -46,7 +46,9 @@
 			border-radius: 25px;
 		}
 	}
-
+	:global(.mapboxgl-ctrl-top-left) {
+		display: none;
+	}
 	:global(.mapboxgl-marker) {
 		cursor: pointer;
 	}

src/routes/game/game.svelte

@@ -11,7 +11,6 @@
 	import { data } from '../../lib/stores/game'
 	import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
 	import Map from '../../lib/Components/Map/Map.svelte'
-	import FullWidthRow from '../../lib/Components/common/FullWidthRow.svelte'
 	import Renderer from './Forms/Renderer.svelte'
 	import Redirect from '../../lib/Components/common/Redirect.svelte'
 	import ImageSlider from '../../lib/Components/common/ImageSlider.svelte'

src/routes/map.svelte

@@ -2,21 +2,9 @@
 	import Erantmap from '$lib/Components/Map/Erantmap.svelte'
 	import NavigationBarLayout from '$lib/Components/Layouts/NavigationBarLayout.svelte'
 
-	let center = { lat: null, lng: null }
-
-	if (navigator.geolocation) {
-		navigator.geolocation.getCurrentPosition(showPosition)
-	} else {
-		alert("Can't load your location!")
-	}
-	function showPosition(position) {
-		center.lat = position.coords.latitude
-		center.lng = position.coords.longitude
-	}
+	let user = { lat: null, lng: null }
 </script>
 
 <NavigationBarLayout>
-	{#if center}
-		<Erantmap {center} />
-	{/if}
+	<Erantmap class="w-full h-full" center={{ lng: user.lng, lat: user.lat }} bind:user />
 </NavigationBarLayout>