From fe64861cfa91e1cbd5e452ff73299a01985d705e Mon Sep 17 00:00:00 2001
From: Ota Prokopec <otaprokopec@gmail.com>
Date: Sat, 10 Dec 2022 18:54:41 +0100
Subject: [PATCH] map fix

---
 src/lib/Components/Map/Erantmap.svelte | 14 ++++++++++++--
 src/lib/Components/Map/Map.svelte      |  4 +++-
 src/routes/game/game.svelte            |  1 -
 src/routes/map.svelte                  | 16 ++--------------
 4 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/lib/Components/Map/Erantmap.svelte b/src/lib/Components/Map/Erantmap.svelte
index bc4864e..cb23aea 100644
--- a/src/lib/Components/Map/Erantmap.svelte
+++ b/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"
diff --git a/src/lib/Components/Map/Map.svelte b/src/lib/Components/Map/Map.svelte
index 34fdbc4..c2e7f48 100644
--- a/src/lib/Components/Map/Map.svelte
+++ b/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;
 	}
diff --git a/src/routes/game/game.svelte b/src/routes/game/game.svelte
index 0993082..fbc5558 100644
--- a/src/routes/game/game.svelte
+++ b/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'
diff --git a/src/routes/map.svelte b/src/routes/map.svelte
index 6be47ca..cfc599d 100644
--- a/src/routes/map.svelte
+++ b/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>