diff --git a/src/globe/index.js b/src/globe/index.js index e3c54de..5aa07fd 100644 --- a/src/globe/index.js +++ b/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 - this.globeAutoRotation += this.options.autoRotationSpeed - this.globeMesh.rotation[1] = this.globeAutoRotation + // 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()