WIP Interactive globe from Nico's sources

- 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>`

src/molecules/InteractiveGlobe.svelte

@@ -1,89 +1,55 @@
 <script>
-    // Lead 1: https://codepen.io/edankwan/pen/emqgpr
-    // Lead 2: ThreeJS globe: https://github.com/vasturiano/globe.gl
-    // Lead 3: https://www.bypeople.com/css-js-webgl-rotating-3d-globe-effect/
-
     import { onMount } from 'svelte'
     import { locations } from 'utils/store'
 
-
     // Props
     export let type = ''
+    let scope
+    let globe
 
-    // Variable
-    let mapWidth
-    let mapHeight
-    let resizeWindow
-    let init
-
-    // Get positions from lat/long
-    const getPosition = coordinates => {
-        if (mapWidth && mapHeight) {
-            const x = (coordinates.lng + 180) * (mapWidth / 360)
-            const rad = coordinates.lat * Math.PI / 180
-            const mercN = Math.log(Math.tan((Math.PI / 4) + (rad / 2)))
-            const y = (mapHeight / 2) - (mapWidth * mercN / (2 * Math.PI))
-
-            console.log(coordinates.lng)
-            console.log(x, y)
-            return { x, y }
-        } else {
-            return { x: 0, y: 0 }
-        }
+    // Functions
+    const resize = () => globe.resize()
+    const update = () => {
+        requestAnimationFrame(update)
+        globe.update()
     }
 
 
     /*
-    ** Run code on browser only
+    ** Run code when mounted
     */
-    onMount(() => {
-        // const globe = document.querySelector('.globe img')
-        // const places = document.querySelectorAll('.globe .pin--place')
+    onMount(async () => {
+        // For browser only
+        if (process.browser) {
+            // Import libraries and code
+            let WebglGlobe
+            await import('globe').then(module => WebglGlobe = module.default)
 
-        // Init function
-        // init = () => {
-        //     mapWidth = globe.getBoundingClientRect().width
-        //     mapHeight = globe.getBoundingClientRect().height
+            // 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
+                    }
+                })]
+            })
 
-        //     places.forEach(place => {
-        //         const coordinates = { lat: place.dataset.lat, lng: place.dataset.lng }
-        //         place.style.left = getPosition(coordinates).x + 'px'
-        //         place.style.top = getPosition(coordinates).y + 'px'
-        //     })
-        // }
-
-        // resizeWindow = () => {
-        //     mapWidth = globe.offsetWidth
-        //     mapHeight = globe.offsetHeight
-
-        //     init()
-        // }
-
-        // init()
+            // Run the globe
+            resize()
+            update()
+        }
     })
 </script>
 
-<svelte:window on:resize={resizeWindow} on:load={init} />
+<svelte:window on:resize={resize} />
 
-<div class="globe" class:globe--part={type === 'part'}>
+<div class="globe" class:globe--part={type === 'part'} bind:this={scope}>
     <div class="wrap">
-        <div class="globe__pins">
-            {#if type !== 'part'}
-            {#each $locations as { name, slug, coordinates, country }}
-            <div class="pin pin--place" data-lat="{coordinates.lat}" data-lng="{coordinates.lng}">
-                <a href="/location/{country.slug}/{slug}" class="pin__dot" rel="prefetch">
-                    <i class="pin__dot"></i>
-                </a>
-                <a href="/location/{country.slug}/{slug}" class="pin__name" rel="prefetch">
-                    <span>{name}</span>
-                </a>
-            </div>
-            {/each}
 
-            <!-- <span class="pin pin--country">France</span> -->
-            {/if}
-        </div>
-
-        <img src="/img/globe.png" alt="">
     </div>
 </div>