Add zoom level as parameter

src/modules/globe2/index.ts

@@ -19,6 +19,7 @@ export class Globe {
         this.params = {
             autoRotate: options.autoRotate,
             speed: options.speed,
+            zoom: 1.305,
         }
 
         // Misc
@@ -59,7 +60,7 @@ export class Globe {
         // Create camera
         this.camera = new Camera(this.gl)
         // TODO: Why 1.315? Is there a way to calculate this number?
-        this.camera.position.set(0, 0, 1.315)
+        this.camera.position.set(0, 0, this.params.zoom)
 
         // Create controls
         this.controls = new Orbit(this.camera, {
@@ -163,6 +164,17 @@ export class Globe {
         this.markers.forEach((marker: Marker) => {
             const markerEl = this.getMarker(marker.slug)
 
+            // Define position
+            const position = lonlatVec3(marker.lng, marker.lat)
+
+            // Scale marker position to fit globe size
+            marker.position = [position[0] *= 0.5, position[1] *= 0.5, position[2] *= 0.5]
+
+            // Position marker
+            const posX = (marker.position[0] + 1) * (this.width / this.params.zoom)
+            const posY = (1 - marker.position[1]) * (this.height / this.params.zoom)
+            markerEl.style.transform = `translate3d(${posX}px, ${posY}px, 0)`
+
             // Entering marker
             markerEl.addEventListener('mouseenter', () => {
                 this.hoveringMarker = true
@@ -172,17 +184,6 @@ export class Globe {
                 this.hoveringMarker = false
             }, false)
 
-            // Define position
-            const position = lonlatVec3(marker.lng, marker.lat)
-
-            // Scale marker position to fit globe size
-            marker.position = [position[0] *= 0.5, position[1] *= 0.5, position[2] *= 0.5]
-
-            // Position marker
-            const posX = (marker.position[0] + 1) * (this.width / 1.315)
-            const posY = (1 - marker.position[1]) * (this.height / 1.315)
-            markerEl.style.transform = `translate3d(${posX}px, ${posY}px, 0)`
-
             console.log(marker)
             return marker
         })
@@ -197,9 +198,9 @@ export class Globe {
             // this.camera.project(screenVector)
 
 
-            // let posX = (screenVector.x + 1) * (this.options.width / 1.315)
+            // let posX = (screenVector.x + 1) * (this.options.width / this.params.zoom)
             // // // posX /= this.mesh.rotation.y
-            // let posY = (1 - screenVector.y) * (this.options.height / 1.315)
+            // let posY = (1 - screenVector.y) * (this.options.height / this.params.zoom)
             // markerEl.style.transform = `translate3d(${posX}px, ${posY}px, 0)`
         })
     }