mapfix
This commit is contained in:
parent
aec8bce5c1
commit
ce1b515d10
|
@ -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}
|
||||
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue