commit
c4fec72a6b
|
@ -10,6 +10,7 @@
|
||||||
import Circle from '../Game/Map/Circle.svelte'
|
import Circle from '../Game/Map/Circle.svelte'
|
||||||
import Map from '../Game/Map/Map.svelte'
|
import Map from '../Game/Map/Map.svelte'
|
||||||
import { data } from '$lib/stores/game'
|
import { data } from '$lib/stores/game'
|
||||||
|
import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
|
||||||
|
|
||||||
const components = {
|
const components = {
|
||||||
TEXT: TextForm,
|
TEXT: TextForm,
|
||||||
|
@ -69,8 +70,15 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if !startQuestion}
|
{#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} />
|
<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>
|
</Map>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
|
@ -5,7 +5,6 @@
|
||||||
export let lat = 0
|
export let lat = 0
|
||||||
export let lng = 0
|
export let lng = 0
|
||||||
export let round = (1 / 110.574 / 1000) * 12 //cca 12m nutno pozměnit!!!!!!!!!! tento komentář nemazat
|
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 }
|
export let user = { lat: 0, lng: 0 }
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
|
@ -1,9 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { Map, controls } from '@beyonk/svelte-mapbox'
|
import { Map, controls } from '@beyonk/svelte-mapbox'
|
||||||
import { createEventDispatcher } from 'svelte'
|
import { createEventDispatcher } from 'svelte'
|
||||||
import { loop_guard } from 'svelte/internal'
|
export let mapComponent
|
||||||
const { GeolocateControl } = controls
|
|
||||||
let mapComponent
|
|
||||||
let geolocateControl
|
let geolocateControl
|
||||||
let className = ''
|
let className = ''
|
||||||
export { className as class }
|
export { className as class }
|
||||||
|
@ -15,19 +13,17 @@
|
||||||
export let radius = false
|
export let radius = false
|
||||||
export let center = { lng: 0, lat: 0 }
|
export let center = { lng: 0, lat: 0 }
|
||||||
export const geo = (e) => {
|
export const geo = (e) => {
|
||||||
|
|
||||||
geolocateControl.dispatchEvent('geolocate')
|
geolocateControl.dispatchEvent('geolocate')
|
||||||
if (navigator.geolocation) {
|
if (navigator.geolocation) {
|
||||||
navigator.geolocation.getCurrentPosition((position)=>{
|
navigator.geolocation.getCurrentPosition((position) => {
|
||||||
const { latitude, longitude } = position.coords
|
const { latitude, longitude } = position.coords
|
||||||
user = { lat: latitude, lng: longitude }
|
user = { lat: latitude, lng: longitude }
|
||||||
dispatch('move', user)
|
dispatch('move', user)
|
||||||
});
|
})
|
||||||
} else {
|
} else {
|
||||||
alert("Can't load your location!")
|
alert("Can't load your location!")
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={className} class:radius>
|
<div class={className} class:radius>
|
||||||
|
@ -39,20 +35,10 @@
|
||||||
on:ready={() => {
|
on:ready={() => {
|
||||||
mapComponent.resize()
|
mapComponent.resize()
|
||||||
mapComponent.setCenter([center.lng, center.lat], 14)
|
mapComponent.setCenter([center.lng, center.lat], 14)
|
||||||
|
|
||||||
}}
|
}}
|
||||||
zoom={14}
|
zoom={14}
|
||||||
>
|
>
|
||||||
<slot {user} />
|
<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>
|
</Map>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -16,6 +16,7 @@
|
||||||
import { data } from '../lib/stores/game'
|
import { data } from '../lib/stores/game'
|
||||||
import Renderer from '$lib/Components/Forms/Renderer.svelte'
|
import Renderer from '$lib/Components/Forms/Renderer.svelte'
|
||||||
import FullWidthRow from '$lib/Components/FullWidthRow.svelte'
|
import FullWidthRow from '$lib/Components/FullWidthRow.svelte'
|
||||||
|
import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
|
||||||
|
|
||||||
export let gameurl
|
export let gameurl
|
||||||
|
|
||||||
|
@ -72,6 +73,13 @@
|
||||||
{#each $gameData.data.questions as { lat, lng }}
|
{#each $gameData.data.questions as { lat, lng }}
|
||||||
<Circle {lat} {lng} />
|
<Circle {lat} {lng} />
|
||||||
{/each}
|
{/each}
|
||||||
|
<GeolocateControl
|
||||||
|
on:geolocate={(e) => {
|
||||||
|
const { latitude, longitude } = e.detail.coords
|
||||||
|
const user = { lat: latitude, lng: longitude }
|
||||||
|
console.log(user)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</Map>
|
</Map>
|
||||||
</div>
|
</div>
|
||||||
</FullWidthRow>
|
</FullWidthRow>
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { navigate } from 'svelte-routing'
|
||||||
import Map from '../lib/Components/Game/Map/Map.svelte'
|
import Map from '../lib/Components/Game/Map/Map.svelte'
|
||||||
import NavigationBar from '../lib/Components/NavigationBar.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} />
|
<Map center={{ lat, lng }} bind:mapComponent class="w-full h-full" on:move={console.log} />
|
||||||
|
|
||||||
<div class="on">
|
<div class="on">
|
||||||
<button>
|
<button on:click={() => navigate('/scanner')}>
|
||||||
<svg viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
|
@ -65,7 +66,6 @@
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button on:click={() => mapComponent.flyTo({ center: [lng, lat] })}>
|
<button on:click={() => mapComponent.flyTo({ center: [lng, lat] })}>
|
||||||
<svg viewBox="0 0 29 39" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg viewBox="0 0 29 39" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path
|
<path
|
||||||
|
|
Loading…
Reference in New Issue