src/lib/Components/Layouts/NavigationBarLayout.svelte

@@ -40,24 +40,14 @@
 				"data:image/svg+xml,%3Csvg width='19' height='24' viewBox='0 0 19 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='14' width='19' height='10'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.166626 14.9121H18.6465V23.5151H0.166626V14.9121Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40767 16.6621C4.4365 16.6621 1.9165 17.5161 1.9165 19.2019C1.9165 20.9029 4.4365 21.7651 9.40767 21.7651C14.3777 21.7651 16.8965 20.9111 16.8965 19.2253C16.8965 17.5243 14.3777 16.6621 9.40767 16.6621ZM9.40767 23.5151C7.12217 23.5151 0.166504 23.5151 0.166504 19.2019C0.166504 15.3566 5.441 14.9121 9.40767 14.9121C11.6932 14.9121 18.6465 14.9121 18.6465 19.2253C18.6465 23.0706 13.3732 23.5151 9.40767 23.5151Z' fill='%2361646B'/%3E%3C/g%3E%3Cmask id='mask1_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='3' y='0' width='13' height='13'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.21143 0.333008H15.6015V12.7214H3.21143V0.333008Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask1_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40763 1.99901C6.9098 1.99901 4.87746 4.03017 4.87746 6.52801C4.8693 9.01767 6.88646 11.0477 9.3738 11.057L9.40763 11.89V11.057C11.9043 11.057 13.9355 9.02467 13.9355 6.52801C13.9355 4.03017 11.9043 1.99901 9.40763 1.99901ZM9.40763 12.7218H9.3703C5.9613 12.7113 3.1998 9.93117 3.21146 6.52451C3.21146 3.11201 5.99046 0.333008 9.40763 0.333008C12.8236 0.333008 15.6015 3.11201 15.6015 6.52801C15.6015 9.94401 12.8236 12.7218 9.40763 12.7218Z' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E ",
 		},
 	]
-	$: console.log(items)
 </script>
 
 <div class="h-full w-full absolute">
 	<div class="section w-full h-[calc(100%-100px)] overflow-auto"><slot /></div>
 	<div class="footer">
 		{#each items as { active, name, url, image_url }}
-			<FooterItem
+			<FooterItem on:click={() => navigate(url)} {active} {name} {url}>
-				on:click={() => {
+				{#if location.pathname === url}
-					navigate(url)
-					items.forEach((i) => (i.active = false))
-					active = true
-				}}
-				{active}
-				{name}
-				{url}
-			>
-				{#if active}
 					<img alt="" style="filter: invert(44%) sepia(66%) saturate(6619%) hue-rotate(222deg) brightness(98%) contrast(88%);" src={image_url} />
 				{:else}
 					<img alt="" src={image_url} />

src/lib/Components/Map/Erantmap.svelte

@@ -1,20 +1,30 @@
 <script>
 	import Map from './Map.svelte'
 	import { navigate } from 'svelte-routing'
-	import NavigationBarLayout from '../Layouts/NavigationBarLayout.svelte'
 
 	export let center = { lat: null, lng: null }
-
 	export let mapComponent
-	export let user
+	export let user = { lat: null, lng: null }
+
+	let className = ''
+	export { className as class }
+
+	if (navigator.geolocation) {
+		navigator.geolocation.getCurrentPosition(showPosition)
+	} else {
+		alert("Can't load your location!")
+	}
+	function showPosition(position) {
+		user.lat = position.coords.latitude
+		user.lng = position.coords.longitude
+	}
 </script>
 
-<NavigationBarLayout>
+<Map {center} bind:mapComponent class={className} on:move>
-	<Map {center} bind:mapComponent bind:user class="w-full h-full" on:move={console.log}>
+	<slot />
-		<slot name="mapslot" />
+</Map>
-	</Map>
 
-	<div class="on">
+<div class="on">
 	<button on:click={() => navigate('/scanner')}>
 		<svg viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -25,7 +35,7 @@
 			/>
 		</svg>
 	</button>
-		<button on:click={() => mapComponent.flyTo({ center: [center.lng, center.lat] })}>
+	<button on:click={() => mapComponent.setCenter([user.lng, user.lat], 14)}>
 		<svg viewBox="0 0 29 39" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
 				fill-rule="evenodd"
@@ -35,8 +45,7 @@
 			/>
 		</svg>
 	</button>
-	</div>
+</div>
-</NavigationBarLayout>
 
 <style>
 	.on {

src/lib/Components/Map/Map.svelte

@@ -6,13 +6,9 @@
 	let className = ''
 	export { className as class }
 
-	export let user = { lat: 0, lng: 0 }
-
-	const dispatch = createEventDispatcher()
-
 	export let radius = false
 	export let center = { lng: 0, lat: 0 }
-	export const geo = (e) => {
+	/*export const geo = (e) => {
 		geolocateControl.dispatchEvent('geolocate')
 		if (navigator.geolocation) {
 			navigator.geolocation.getCurrentPosition((position) => {
@@ -23,7 +19,7 @@
 		} else {
 			alert("Can't load your location!")
 		}
-	}
+	}*/
 </script>
 
 <div class={className} class:radius>
@@ -38,7 +34,7 @@
 		}}
 		zoom={14}
 	>
-		<slot {user} />
+		<slot />
 	</Map>
 </div>
 

src/routes/game/Forms/Renderer.svelte

@@ -9,8 +9,7 @@
 	import QrCode from './QrCode.svelte'
 	import Finish from './Finish.svelte'
 	import { data } from '$lib/stores/game'
-	import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
+	import Erantmap from '$src/lib/Components/Map/Erantmap.svelte'
-	import Map from '$lib/Components/Map/Map.svelte'
 
 	const components = {
 		TEXT: TextForm,
@@ -67,19 +66,14 @@
 
 	let lat = Number.parseFloat($data.questions[clientAnswers.pos].lat)
 	let lng = Number.parseFloat($data.questions[clientAnswers.pos].lng)
+
+	export let user = { lat: 0, lng: 0 }
 </script>
 
 {#if !startQuestion}
-	<Map center={{ lat, lng }} class="w-full h-full" let:user>
+	<Erantmap center={{ lat, lng }} bind:user class="w-full h-full">
 		<Circle on:enter={() => (startQuestion = true)} {lat} {lng} {user} />
-		<GeolocateControl
+	</Erantmap>
-			on:geolocate={(e) => {
-				const { latitude, longitude } = e.detail.coords
-				const user = { lat: latitude, lng: longitude }
-				console.log(user)
-			}}
-		/>
-	</Map>
 {/if}
 
 {#if page && startQuestion}

src/routes/game/game.svelte

@@ -10,7 +10,7 @@
 	import * as api from '../../lib/utils/api'
 	import { data } from '../../lib/stores/game'
 	import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
-	import Map from '../../lib/Components/Map/Erantmap.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'
@@ -59,14 +59,14 @@
 			</Section>
 
 			<Section title="Fotky">
-				<FullWidthRow>
+				<div class="w-full relative">
 					<div class="px-4 m-auto" style="max-width: var(--max-viewport-width);">
 						<ImageSlider images={assets} />
 					</div>
-				</FullWidthRow>
+				</div>
 			</Section>
 
-			<FullWidthRow>
+			<div class="w-full relative">
 				<div class="px-4 m-auto" style="max-width: var(--max-viewport-width);">
 					<Map radius class="w-full h-44" center={{ lng: $gameData.data.lng, lat: $gameData.data.lat }}>
 						{#each $gameData.data.questions as { lat, lng }}
@@ -81,7 +81,7 @@
 						/>
 					</Map>
 				</div>
-			</FullWidthRow>
+			</div>
 
 			<Button on:click={() => (view = 'game-play')} primary>Hrát</Button>
 		</Overlay>

src/routes/map.svelte

@@ -1,17 +1,22 @@
 <script>
 	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!")
 	}
-
-	let lat = null
-	let lng = null
 	function showPosition(position) {
-		lat = position.coords.latitude
+		center.lat = position.coords.latitude
-		lng = position.coords.longitude
+		center.lng = position.coords.longitude
 	}
 </script>
 
-<Erantmap center={{ lat, lng }} />
+<NavigationBarLayout>
+	{#if center}
+		<Erantmap {center} />
+	{/if}
+</NavigationBarLayout>