fix globe height

src/globe/index.js

@@ -31,7 +31,8 @@ class WebglGlobe {
         this.options                   = options
         this.options.autoRotationSpeed = this.options.autoRotationSpeed || 0
         this.options.scrollSmoothing   = this.options.scrollSmoothing   || 0.5 // Smooth the globe position to avoid janks on scroll (lower == smoother)
-        this.options.cameraDistance    = this.options.cameraDistance    || 1 // A multiplier to move camera backward or forward
+        this.options.cameraDistance    = 1//this.options.cameraDistance    || 1 // A multiplier to move camera backward or forward
+        
         this.cities                    = options.markers // List of cities with their options
         this._canUpdate                = false
         this.hasUpdateCameraPos        = false
@@ -233,6 +234,9 @@ class WebglGlobe {
         this.width  = window ? window.innerWidth : 0
         this.height = window ? window.innerHeight : 0
 
+        //fit globe to container height
+        this.options.cameraDistance = this.height / this.$el.clientHeight;
+
         // Remove retina on small screen (aka mobile) to boost perfs
         this.renderer.setPixelRatio( window.innerWidth < 768 ? 1 : window.devicePixelRatio)
         this.renderer.resize(this.width , this.height)
@@ -283,10 +287,14 @@ class WebglGlobe {
      * This helps saving perfs and battery
      */
     enable () {
+        this.renderer.canvas.style.opacity = 1
+        this.$markerWrapper.style.opacity = 1
         this._canUpdate = true
     }
 
     disable () {        
+        this.renderer.canvas.style.opacity = 0
+        this.$markerWrapper.style.opacity = 0
         this._canUpdate = false
     }
 

src/style/molecules/_globe.scss

@@ -33,7 +33,6 @@
     // }
     // END DEBUG //
 
-
     /*
     ** Partial globe
     */
@@ -44,8 +43,6 @@
         opacity: 0.5;
     }
 
-
-
     /*
     ** Markers
     */