mapfix

src/lib/Components/Forms/Renderer.svelte

@@ -10,6 +10,7 @@
 	import Circle from '../Game/Map/Circle.svelte'
 	import Map from '../Game/Map/Map.svelte'
 	import { data } from '$lib/stores/game'
+	import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
 
 	const components = {
 		TEXT: TextForm,
@@ -71,6 +72,12 @@
 {#if !startQuestion}
 	<Map center={{ lat, lng }} class="w-full h-full" on:move={console.log} let:user>
 		<Circle on:enter={() => (startQuestion = true)} {lat} {lng} {user} />
+		<GeolocateControl
+			on:geolocate={(e) => {
+				const { latitude, longitude } = e.detail.coords
+				const user = { lat: latitude, lng: longitude }
+			}}
+		/>
 	</Map>
 {/if}
 

src/lib/Components/game/Map/Circle.svelte

@@ -5,7 +5,7 @@
 	export let lat = 0
 	export let lng = 0
 	export let round = (1 / 110.574 / 1000) * 12 //cca 12m nutno pozměnit!!!!!!!!!! tento komentář nemazat
-	console.log({ round, lat, lng })
+
 	export let user = { lat: 0, lng: 0 }
 
 	const dispatch = createEventDispatcher()

src/lib/Components/game/Map/Map.svelte

@@ -3,7 +3,7 @@
 	import { createEventDispatcher } from 'svelte'
 	import { loop_guard } from 'svelte/internal'
 	const { GeolocateControl } = controls
-	let mapComponent
+	export let mapComponent
 	let geolocateControl
 	let className = ''
 	export { className as class }
@@ -15,19 +15,17 @@
 	export let radius = false
 	export let center = { lng: 0, lat: 0 }
 	export const geo = (e) => {
-			
-			geolocateControl.dispatchEvent('geolocate')
-			if (navigator.geolocation) {
-				navigator.geolocation.getCurrentPosition((position)=>{
-					const { latitude, longitude } = position.coords
-					user = { lat: latitude, lng: longitude }
-					dispatch('move', user)
-				});
-			} else {
-				alert("Can't load your location!")
-			}
-		};
-
+		geolocateControl.dispatchEvent('geolocate')
+		if (navigator.geolocation) {
+			navigator.geolocation.getCurrentPosition((position) => {
+				const { latitude, longitude } = position.coords
+				user = { lat: latitude, lng: longitude }
+				dispatch('move', user)
+			})
+		} else {
+			alert("Can't load your location!")
+		}
+	}
 </script>
 
 <div class={className} class:radius>
@@ -39,20 +37,10 @@
 		on:ready={() => {
 			mapComponent.resize()
 			mapComponent.setCenter([center.lng, center.lat], 14)
-
 		}}
 		zoom={14}
 	>
-	<slot {user} />
-	<GeolocateControl
-		bind:this={geolocateControl}
-		on:geolocate={(e) => {
-			console.log(e)
-			const { latitude, longitude } = e.detail.coords
-			user = { lat: latitude, lng: longitude }
-			dispatch('move', user)
-		}}
-	/>
+		<slot {user} />
 	</Map>
 </div>
 

src/routes/game.svelte

@@ -16,6 +16,7 @@
 	import { data } from '../lib/stores/game'
 	import Renderer from '$lib/Components/Forms/Renderer.svelte'
 	import FullWidthRow from '$lib/Components/FullWidthRow.svelte'
+	import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
 
 	export let gameurl
 
@@ -72,6 +73,13 @@
 						{#each $gameData.data.questions as { lat, lng }}
 							<Circle {lat} {lng} />
 						{/each}
+						<GeolocateControl
+							on:geolocate={(e) => {
+								const { latitude, longitude } = e.detail.coords
+								const user = { lat: latitude, lng: longitude }
+								console.log(user)
+							}}
+						/>
 					</Map>
 				</div>
 			</FullWidthRow>