Félix Péault
2064885997
- The globe is a bit small? Ability to control the max-min size potentially
- Is there a reason why `globe.update()` runs every second? Sounds like a lot of resources?
- Have the ability to control the `addEventListener` of the markers to do whatever (in this case, going to a route by clicking on a link with a sapper-noscroll attribute + changing the href attribute on click - the method `goto` from Sapper scrolls back to top / maybe something to fix with the current transition issues?)
- Edited in `./index.js`:
1. Using the class as `export default WebglGlobe` instead of Window (as Svelte or Sapper doesn't likayt)
- Edited in `Camera.js`:
1. Commented line 218: `e.preventDefault();` would cause this error: `[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>`
56 lines
1.3 KiB
Svelte
56 lines
1.3 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()
|
|
const update = () => {
|
|
requestAnimationFrame(update)
|
|
globe.update()
|
|
}
|
|
|
|
|
|
/*
|
|
** Run code when mounted
|
|
*/
|
|
onMount(async () => {
|
|
// For browser only
|
|
if (process.browser) {
|
|
// Import libraries and code
|
|
let WebglGlobe
|
|
await import('globe').then(module => WebglGlobe = module.default)
|
|
|
|
// Init the globe from library
|
|
globe = new WebglGlobe({
|
|
el: scope,
|
|
texture: '/img/globe/map-4k.png',
|
|
markers: [...$locations.map(location => {
|
|
return {
|
|
name: location.name,
|
|
slug: location.slug,
|
|
lat: location.coordinates.lat,
|
|
lng: location.coordinates.lng
|
|
}
|
|
})]
|
|
})
|
|
|
|
// Run the globe
|
|
resize()
|
|
update()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<svelte:window on:resize={resize} />
|
|
|
|
<div class="globe" class:globe--part={type === 'part'} bind:this={scope}>
|
|
<div class="wrap">
|
|
|
|
</div>
|
|
</div>
|