MVP #7 #84
|
@ -54,6 +54,10 @@
|
|||
path: '/profile/:erantId',
|
||||
component: () => import('$routes/profile/profile.svelte'),
|
||||
},
|
||||
{
|
||||
path: '/map',
|
||||
component: () => import('$routes/map/map.svelte'),
|
||||
},
|
||||
].map((routes) => {
|
||||
return { ...routes, layout: NavigationBarLayout }
|
||||
}),
|
||||
|
@ -86,10 +90,7 @@
|
|||
path: '/test',
|
||||
component: () => import('$routes/test.svelte'),
|
||||
},*/
|
||||
{
|
||||
path: '/map',
|
||||
component: () => import('$root/src/routes/map/map.svelte'),
|
||||
},
|
||||
|
||||
{
|
||||
path: '/profile/',
|
||||
component: () => import('$src/__error.svelte'),
|
||||
|
|
|
@ -43,8 +43,10 @@
|
|||
|
||||
const userCenter = () => {
|
||||
// @ts-ignore
|
||||
document.getElementsByClassName('mapboxgl-ctrl-geolocate')[0].click()
|
||||
if (trigger) trigger()
|
||||
}
|
||||
|
||||
let trigger
|
||||
</script>
|
||||
|
||||
<LocationRequest />
|
||||
|
@ -54,6 +56,7 @@
|
|||
<Map on:ready={() => setTimeout(() => userCenter(), 100)} {center} bind:mapComponent class={className} on:move>
|
||||
<slot />
|
||||
<GeolocateControl
|
||||
on:trackuserlocationend={console.log}
|
||||
options={{
|
||||
trackUserLocation: true,
|
||||
showUserHeading: true,
|
||||
|
@ -61,6 +64,7 @@
|
|||
enableHighAccuracy: true,
|
||||
},
|
||||
}}
|
||||
bind:trigger
|
||||
on:trackuserlocationstart={() => {}}
|
||||
on:geolocate={(e) => {
|
||||
// @ts-ignore
|
||||
|
|
|
@ -8,36 +8,20 @@
|
|||
import { onMount } from 'svelte'
|
||||
|
||||
let userLocation: { lat: number; lng: number } = { lat: 0, lng: 0 }
|
||||
let granted = false
|
||||
|
||||
const lastGame = localStorage.getItem('lastGame')
|
||||
|
||||
const handleLocationGranted = (position: GeolocationPosition) => {
|
||||
/*const handleLocationGranted = (position: GeolocationPosition) => {
|
||||
userLocation = { lat: position.coords.latitude, lng: position.coords.longitude }
|
||||
granted = true
|
||||
}
|
||||
}*/
|
||||
|
||||
navigator.geolocation.getCurrentPosition(handleLocationGranted)
|
||||
//navigator.geolocation.getCurrentPosition(handleLocationGranted)
|
||||
|
||||
$: [experiences] = getExperiencesAsStore()
|
||||
</script>
|
||||
|
||||
<NavigationBarLayout>
|
||||
{#if granted}
|
||||
<!-- Conditionally center on current location if granted is true. -->
|
||||
<Erantmap class="w-full h-full" center={{ lng: userLocation.lng, lat: userLocation.lat }}>
|
||||
<!-- Conditionally center on current location if granted is true. -->
|
||||
<Erantmap class="w-full h-full" center={{ lng: userLocation.lng, lat: userLocation.lat }}>
|
||||
{#each $experiences as experience}
|
||||
<Marker
|
||||
popup={experience.ExpName}
|
||||
on:click={() => navigate(`/${experience.ExpURL}`)}
|
||||
lat={experience.ExpLocation[0]}
|
||||
lng={experience.ExpLocation[1]}
|
||||
{userLocation}
|
||||
/>
|
||||
<Marker popup={experience.ExpName} on:click={() => navigate(`/${experience.ExpURL}`)} lat={experience.ExpLocation[0]} lng={experience.ExpLocation[1]} {userLocation} />
|
||||
{/each}
|
||||
</Erantmap>
|
||||
{:else}
|
||||
<!--If not granted, the LocationRequest component is displayed and when it is granted center map. -->
|
||||
<LocationRequest on:locationGranted={() => (granted = true)} />
|
||||
{/if}
|
||||
</NavigationBarLayout>
|
||||
</Erantmap>
|
||||
|
|
Loading…
Reference in New Issue