stop globe trotation on marker hover

src/globe/index.js

@@ -41,7 +41,7 @@ class WebglGlobe {
         this.markersScrollOffset       = 0
         this.globeScrollOffset         = 0
         this.globeAutoRotation         =  degToRad(this.options.rotationStart * -1) || 0
-
+        this._isHoverMarker            = false
 
         let gl
         let canvas = document.createElement('canvas')
@@ -199,8 +199,16 @@ class WebglGlobe {
             })
 
             // Add class on hover
-            el.addEventListener('mouseenter', () => el.classList.add('hover'))
-            el.addEventListener('animationend', () => el.classList.remove('hover'))
+            el.addEventListener('mouseenter', () => {
+                this._isHoverMarker = true
+                el.classList.add('hover')
+            })
+            el.addEventListener('mouseleave', () => {
+                this._isHoverMarker = false
+            })
+            el.addEventListener('animationend', () => {
+                el.classList.remove('hover')
+            })
 
             // Append marker to HTML
             this.$markerWrapper.appendChild(el)
@@ -297,9 +305,12 @@ class WebglGlobe {
         mat4.copy(this.viewProjectionMatrix, this.camera.projectionMatrix)
         mat4.multiply(this.viewProjectionMatrix, this.viewProjectionMatrix, this.camera.inverseWorldMatrix)
 
-        // Auto rotate the globe
+        // Auto rotate the globe if not hover a marker
+        if (!this._isHoverMarker) {
             this.globeAutoRotation += this.options.autoRotationSpeed
             this.globeMesh.rotation[1] = this.globeAutoRotation
+        }
+
         this.globeMesh.updateMatrix()
         this.globeMesh.updateWorldMatrix()