Félix Péault
7f3f2ac3ba
All checks were successful
continuous-integration/drone/push Build is passing
61 lines
1.5 KiB
Svelte
61 lines
1.5 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte'
|
|
import { locations } from 'utils/store'
|
|
|
|
// Props
|
|
export let type = ''
|
|
let scope
|
|
let globe
|
|
|
|
// Functions
|
|
const resize = () => {
|
|
globe.resize()
|
|
globe.update()
|
|
}
|
|
const update = () => {
|
|
requestAnimationFrame(update)
|
|
globe.update()
|
|
}
|
|
|
|
|
|
/*
|
|
** Run code when mounted
|
|
*/
|
|
onMount(async () => {
|
|
// Import libraries and code
|
|
let InteractiveGlobe
|
|
await import('globe/index').then(module => InteractiveGlobe = module.default)
|
|
// Init the globe from library
|
|
globe = new InteractiveGlobe({
|
|
el: scope,
|
|
texture: `/img/globe/map-${window.innerWidth >= 992 ? '3k' : '2k'}.png`,
|
|
markers: [...$locations.map(location => {
|
|
return {
|
|
name: location.name,
|
|
slug: location.slug,
|
|
countryName: location.country.name,
|
|
countrySlug: location.country.slug,
|
|
lat: location.coordinates.lat,
|
|
lng: location.coordinates.lng
|
|
}
|
|
})],
|
|
cameraDistance: 3,
|
|
onLinkClicked: () => {}
|
|
})
|
|
|
|
// Run the globe
|
|
resize()
|
|
update()
|
|
})
|
|
</script>
|
|
|
|
<svelte:window on:resize={resize} />
|
|
|
|
{#if type === 'part'}
|
|
<div class="globe__cut">
|
|
<div class="globe" bind:this={scope} />
|
|
</div>
|
|
{:else}
|
|
<div class="globe" bind:this={scope} />
|
|
{/if}
|