Merge pull request #31 from Erant-s-r-o/ota/mapfix

fixes

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,
@@ -69,8 +70,15 @@
 </script>
 
 {#if !startQuestion}
-	<Map center={{ lat, lng }} class="w-full h-full" on:move={console.log} let:user>
+	<Map center={{ lat, lng }} class="w-full h-full" 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 }
+				console.log(user)
+			}}
+		/>
 	</Map>
 {/if}
 

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

@@ -5,7 +5,6 @@
 	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

@@ -1,9 +1,7 @@
 <script>
 	import { Map, controls } from '@beyonk/svelte-mapbox'
 	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 +13,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!")
 		}
-		};
-
+	}
 </script>
 
 <div class={className} class:radius>
@@ -39,20 +35,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)
-		}}
-	/>
 	</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>

src/routes/map.svelte

@@ -1,4 +1,5 @@
 <script>
+	import { navigate } from 'svelte-routing'
 	import Map from '../lib/Components/Game/Map/Map.svelte'
 	import NavigationBar from '../lib/Components/NavigationBar.svelte'
 
@@ -55,7 +56,7 @@
 <Map center={{ lat, lng }} bind:mapComponent class="w-full h-full" on:move={console.log} />
 
 <div class="on">
-	<button>
+	<button on:click={() => navigate('/scanner')}>
 		<svg viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
 				fill-rule="evenodd"
@@ -65,7 +66,6 @@
 			/>
 		</svg>
 	</button>
-
 	<button on:click={() => mapComponent.flyTo({ center: [lng, lat] })}>
 		<svg viewBox="0 0 29 39" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path