Temporary Interactive globe

src/molecules/InteractiveGlobe.svelte

@@ -1,31 +1,88 @@
 <script>
-    export let type
-
     // 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 '../store'
+
+
+    // Props
+    export let type = ''
+
+    // 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 }
+        }
+    }
+
+
+    /*
+    ** Run code on browser only
+    */
+    onMount(() => {
+        // const globe = document.querySelector('.globe img')
+        // const places = document.querySelectorAll('.globe .pin--place')
+
+        // // Init function
+        // init = () => {
+        //     mapWidth = globe.getBoundingClientRect().width
+        //     mapHeight = globe.getBoundingClientRect().height
+
+        //     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()
+    })
 </script>
 
+<svelte:window on:resize={resizeWindow} on:load={init} />
+
 <div class="globe" class:globe--part={type === 'part'}>
     <div class="wrap">
-        <div class="pin-place">
+        <div class="globe__pins">
-            <a href="/location/australia/brisbane" rel="prefetch" class="pinplace__name">
+            {#if type !== 'part'}
-                <span>Brisbane</span>
+            {#each $locations as location}
-            </a>
+            <div class="pin pin--place" data-lat="{location.coordinates.lat}" data-lng="{location.coordinates.lng}">
-            <a href="/location/australia/brisbane" rel="prefetch" class="">
+                <a href="/location/{location.country.slug}/{location.slug}" class="pin__dot" rel="prefetch">
-                <i class="pin-place__dot"></i>
+                    <i class="pin__dot"></i>
-            </a>
+                </a>
-        </div>
+                <a href="/location/{location.country.slug}/{location.slug}" class="pin__name" rel="prefetch">
-        <div class="pin-place">
+                    <span>{location.name}</span>
-            <a href="/location/australia/brisbane" rel="prefetch" class="pinplace__name">
+                </a>
-                <span>Montpellier</span>
+            </div>
-            </a>
+            {/each}
-            <a href="/location/australia/brisbane" rel="prefetch" class="">
-                <i class="pin-place__dot"></i>
-            </a>
-        </div>
 
-        <span class="pin-country">France</span>
+            <!-- <span class="pin pin--country">France</span> -->
+            {/if}
+        </div>
 
         <img src="/img/globe.png" alt="">
     </div>

src/style/molecules/_globe.scss

@@ -1,7 +1,7 @@
 // Globe
 .globe {
-    z-index: 2;
     position: relative;
+    z-index: 2;
 
     .wrap {
         @include breakpoint (xs) {
@@ -9,16 +9,83 @@
         }
     }
 
-    // Image (for now)
+    // Image (temp)
     img {
+        position: relative;
+        z-index: 2;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 150%;
+        max-width: 1400px;
         display: inline-block;
-        margin: 0 auto;
         pointer-events: none;
         user-select: none;
     }
+
+    // Pins (temp)
+    &__pins {
+        position: absolute;
+        z-index: 3;
+        top: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        min-height: 100%;
+
+        .pin {
+            margin: 16px 0;
+
+            &__name {
+                margin-left: 16px;
+            }
+        }
+    }
+
+    // Pin
+    .pin {
+        display: flex;
+        align-items: center;
+        // position: absolute;
+        // z-index: 2;
+
+        // Name
+        &__name {
+            padding: 8px 0;
+        }
+
+        // Dot
+        &__dot {
+            display: block;
+            width: 8px;
+            height: 8px;
+            background-color: $color-secondary;
+            border-radius: 100%;
+        }
+    }
+
+    // Place
+    .pin--place {
+        font-family: $font-serif;
+
+        a {
+            color: $color-secondary;
+            text-decoration: none;
+        }
+    }
+
+    // Country
+    .pin--country {
+        font-family: $font-sans;
+        font-size: rem(10px);
+        color: rgba(#fff, 0.5);
+        text-transform: uppercase;
+        letter-spacing: 1px;
+    }
 }
 
-// Pin
 
 // Part globe
 .globe--part {