[wip] Add width, speed and pane options for Globe

src/components/organisms/InteractiveGlobe2.svelte

@@ -13,6 +13,9 @@
 
     export let type: string = undefined
     export let enableMarkers: boolean = true
+    export let speed: number = 0.003
+    export let pane: boolean = import.meta.env.DEV
+    export let width: number = undefined
 
     let innerWidth: number
     let globeParentEl: HTMLElement, globeEl: HTMLElement
@@ -42,11 +45,11 @@
             mapFile: `/images/globe-map-${globeResolution}.png`,
             dpr: Math.min(Math.round(window.devicePixelRatio), 2),
             autoRotate: true,
-            speed: 0.003,
+            speed,
             rotationStart: randomContinent.rotation,
             enableMarkers,
             markers,
-            pane: import.meta.env.DEV,
+            pane,
         })
 
         // TODO: Define cluster locations and position it
@@ -112,11 +115,13 @@
 
 <div class="globe" bind:this={globeParentEl}
     class:is-cropped={type === 'cropped'}
+    style:--width="{width}px"
 >
     <div class="globe__inner">
         <div class="globe__canvas" bind:this={globeEl} />
     </div>
 
+    {#if enableMarkers}
         <ul class="globe__markers">
             {#each markers as { name, slug, country, lat, lng }}
                 <li class="globe__marker" data-location={slug} data-lat={lat} data-lng={lng}>
@@ -162,4 +167,5 @@
                 </button>
             </div>
         {/if}
+    {/if}
 </div>

src/modules/globe2/index.ts

@@ -125,7 +125,7 @@ export class Globe {
         this.addEvents()
 
         // Setup markers
-        if (this.markers) {
+        if (this.enableMarkers && this.markers) {
             this.setupMarkers()
         }
     }

src/style/modules/_globe2.scss

@@ -1,14 +1,14 @@
 // Globe
 .globe {
+    --width: clamp(700px, 100vw, 1315px);
     position: relative;
     z-index: 10;
     user-select: none;
 
-
     // Inner
     &__inner {
         position: relative;
-        width: clamp(700px, 100vw, 1315px);
+        width: var(--width);
         margin-left: auto;
         margin-right: auto;