map fix
This commit is contained in:
parent
4b1bd3c5dd
commit
fe64861cfa
|
@ -1,8 +1,11 @@
|
|||
<script>
|
||||
import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
|
||||
import Map from './Map.svelte'
|
||||
import { navigate } from 'svelte-routing'
|
||||
|
||||
export let center = { lat: null, lng: null }
|
||||
export let center
|
||||
$: console.log(center)
|
||||
|
||||
export let mapComponent
|
||||
export let user = { lat: null, lng: null }
|
||||
|
||||
|
@ -22,6 +25,13 @@
|
|||
|
||||
<Map {center} bind:mapComponent class={className} on:move>
|
||||
<slot />
|
||||
<GeolocateControl
|
||||
on:geolocate={(e) => {
|
||||
const { latitude, longitude } = e.detail.coords
|
||||
const user = { lat: latitude, lng: longitude }
|
||||
console.log(user)
|
||||
}}
|
||||
/>
|
||||
</Map>
|
||||
|
||||
<div class="on">
|
||||
|
@ -35,7 +45,7 @@
|
|||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button on:click={() => mapComponent.setCenter([user.lng, user.lat], 14)}>
|
||||
<button on:click={() => document.getElementsByClassName('mapboxgl-ctrl-geolocate')[0].click()}>
|
||||
<svg viewBox="0 0 29 39" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
|
|
|
@ -46,7 +46,9 @@
|
|||
border-radius: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.mapboxgl-ctrl-top-left) {
|
||||
display: none;
|
||||
}
|
||||
:global(.mapboxgl-marker) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
@ -11,7 +11,6 @@
|
|||
import { data } from '../../lib/stores/game'
|
||||
import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.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'
|
||||
import ImageSlider from '../../lib/Components/common/ImageSlider.svelte'
|
||||
|
|
|
@ -2,21 +2,9 @@
|
|||
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!")
|
||||
}
|
||||
function showPosition(position) {
|
||||
center.lat = position.coords.latitude
|
||||
center.lng = position.coords.longitude
|
||||
}
|
||||
let user = { lat: null, lng: null }
|
||||
</script>
|
||||
|
||||
<NavigationBarLayout>
|
||||
{#if center}
|
||||
<Erantmap {center} />
|
||||
{/if}
|
||||
<Erantmap class="w-full h-full" center={{ lng: user.lng, lat: user.lat }} bind:user />
|
||||
</NavigationBarLayout>
|
||||
|
|
Loading…
Reference in New Issue