flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

⚠️ The interactive globe has arrived (WIP but pretty good)

Browse Source 
- Control the width/height of the globe via CSS
This commit is contained in:
Félix Péault
2020-04-09 20:22:10 +02:00
parent 08c541c37a
commit 7a44d5b0ed
11 changed files with 208 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/molecules/InteractiveGlobe.svelte
View File

@@ -8,7 +8,10 @@
let globe
// Functions
const resize = () => globe.resize()
const resize = () => {
globe.resize()
globe.update()
}
const update = () => {
requestAnimationFrame(update)
globe.update()
@@ -20,37 +23,36 @@
*/
onMount(async () => {
// For browser only
// if (process.browser) {
// // Import libraries and code
// let WebglGlobe
// await import('globe').then(module => WebglGlobe = module.default)
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,
// countrySlug: location.country.slug,
// lat: location.coordinates.lat,
// lng: location.coordinates.lng
// }
// })]
// })
// Init the globe from library
globe = new WebglGlobe({
el: scope,
texture: '/img/globe/map-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
}
})],
onLinkClicked: () => {},
cameraDistance: 3
})
// // Run the globe
// resize()
// update()
// }
// Run the globe
resize()
update()
}
})
</script>
<!-- <svelte:window on:resize={resize} /> -->
<svelte:window on:resize={resize} />
<div class="globe" class:globe--part={type === 'part'} bind:this={scope}>
<div class="wrap">
</div>
</div>
<div class="globe" bind:this={scope} />