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