earth test
if ( location.protocol == 'file:' ) { alert( 'This demo does not work with the file protocol due to browser security restrictions.' ); }
var myearth; var sunAngle = 90; var activeHotspot;
var updateMapTimer = false; var lightMask, lightMaskCtx, lightGradient;
window.addEventListener( 'load', function() {
myearth = new Earth( document.getElementById('myearth'), {
light: 'sun', shadows: false, lightAmbience: 0.8, shininess: 0.14,
location: { lat: 10, lng : -74 }, sunLocation: { lat: 0, lng: 360 - sunAngle }, zoom: 0.925,
dragPolarLimit : 0.8,
autoRotate : true, autoRotateSpeed: 0.5, autoRotateDelay: 0, autoRotateStart: 2000,
} );
myearth.addEventListener( "ready", function() {
this.startAutoRotate();
// add random stars
var star_count = 200;
for ( var i=0; i < star_count; i++ ) {
this.addSprite( {
location : { lat: getRandomInt(-50,50), lng: getRandomInt(-180,180) },
offset: getRandomInt(40,50),
scale: 0.25,
opacity: getRandomInt(25,80)/100
} );
}
// equator
var equator = this.addLine( {
color : 0xffcd42,
offset: 0.05,
hairline: true,
clip: 0
} );
var equatorLabel= this.addOverlay( {
location : { lat: 1.5, lng: 0 },
offset: 0.1,
content : 'Equator
Length: 40,075 km',
depthScale : 0.4,
visible : false,
className : 'label',
} );
var equatorHotspot = this.addOverlay( { location : { lat: 0, lng: 0 }, depthScale : 0.4, events: true, transform: 'translate(-50%, -50%)', className : 'hotspot', } );
equatorHotspot.element.addEventListener( 'click', function() {
if ( activeHotspot ) activeHotspot.reverse();
equatorHotspot.visible = false;
equator.animate( 'clip', 1, { easing: 'linear', duration: 1000, complete: function(){ equatorLabel.visible = true; } } );
activeHotspot = equatorHotspot;
} );
equatorHotspot.reverse = function() {
equatorLabel.visible = false;
equator.animate( 'clip', 0, { easing: 'linear', duration: 500, complete: function(){ equatorHotspot.visible = true; } } );
};
// mount everrest
var lineOptions = { color : 0xf24e06, offsetFlow : 1, offsetEasing: 'in-quad', hairline: true, clip: 0 };
var everest1 = this.addLine( lineOptions );
var everestLabel= this.addOverlay( {
location : { lat: 27.991, lng: 86.892 },
offset: 1,
content : 'Mount Everest
Elevation: 8,848 m',
depthScale : 0.4,
visible : false,
className : 'label',
} );
var everestHotspot = this.addOverlay( { location : { lat: 27.991, lng: 86.892 }, offset: 0.8, depthScale : 0.4, events: true, transform: 'translate(-50%, -50%)', className : 'hotspot', } );
everestHotspot.element.addEventListener( 'click', function() {
if ( activeHotspot ) activeHotspot.reverse();
everestHotspot.visible = false;
everest1.animate( 'clip', 1, { duration: 700 } ); everest2.animate( 'clip', 1, { duration: 700 } ); everest3.animate( 'clip', 1, { duration: 700, complete: function(){ everestLabel.visible = true; } } );
activeHotspot = everestHotspot;
} );
everestHotspot.reverse = function() {
everestLabel.visible = false;
everest1.animate( 'clip', 0, { duration: 350 } ); everest2.animate( 'clip', 0, { duration: 350 } ); everest3.animate( 'clip', 0, { duration: 350, complete: function(){ everestHotspot.visible = true; } } );
};
// mariana trench
var mariana = this.addLine( { polyLine : true, color : 0x0066ff, hairline: true, clip: 0 } );
var marianaLabel= this.addOverlay( {
location : { lat: 18, lng: 158 },
offset: 0,
content : 'Mariana Trench
Depth: 11,034 m',
depthScale : 0.4,
visible : false,
className : 'label',
} );
var marianaHotspot = this.addOverlay( { location : { lat: 15.6, lng: 158 }, depthScale : 0.4, events: true, transform: 'translate(-50%, -50%)', className : 'hotspot', } );
marianaHotspot.element.addEventListener( 'click', function() {
if ( activeHotspot ) activeHotspot.reverse();
marianaHotspot.visible = false;
mariana.animate( 'clip', 1, { duration: 800, complete: function(){ marianaLabel.visible = true; } } );
activeHotspot = marianaHotspot;
} );
marianaHotspot.reverse = function() {
marianaLabel.visible = false;
mariana.animate( 'clip', 0, { duration: 400, complete: function(){ marianaHotspot.visible = true; } } );
};
// amazon
var amazon = this.addLine( { polyLine : true, color : 0x009ee5, hairline: true, clip: 0 } );
var amazonLabel= this.addOverlay( {
location : {lat: -8.5, lng: -61.4},
content : 'Amazon
Discharge: 206,000 m³/s',
depthScale : 0.4,
visible : false,
className : 'label',
} );
var amazonHotspot = this.addOverlay( { location : {lat: -15.518, lng: -71.765}, depthScale : 0.4, events: true, transform: 'translate(-50%, -50%)', className : 'hotspot', } );
amazonHotspot.element.addEventListener( 'click', function() {
if ( activeHotspot ) activeHotspot.reverse();
amazonHotspot.visible = false;
amazon.animate( 'clip', 1, { duration: 900, complete: function(){ amazonLabel.visible = true; } } );
activeHotspot = amazonHotspot;
} );
amazonHotspot.reverse = function() {
amazonLabel.visible = false;
amazon.animate( 'clip', 0, { duration: 450, complete: function(){ amazonHotspot.visible = true; } } );
};
prepareLightMask(); updateMapTexture();
} );
document.getElementById( "sun-slider" ).addEventListener( 'input', function() { sunAngle = this.value; myearth.sunLocation = { lat: 0, lng: 360 - this.value };
// limit redraws if ( updateMapTimer ) return; updateMapTimer = setTimeout( updateMapTexture, 100 );
} );
} );
function prepareLightMask() {
lightMask = document.createElement('canvas'); lightMaskCtx = lightMask.getContext('2d');
var w = myearth.mapCanvas.width, h = myearth.mapCanvas.height;
lightMask.width = w * 2; lightMask.height = h;
lightGradient = lightMaskCtx.createRadialGradient( w/2, h/2, h*0.38, w/2, h/2, w*0.28, );
lightGradient.addColorStop( 0, "RGBA(0,0,0,1)" ); lightGradient.addColorStop( 1, "RGBA(0,0,0,0)" );
}
function updateMapTexture() {
updateMapTimer = false;
var w = myearth.mapCanvas.width, h = myearth.mapCanvas.height;
// night background var nightImg = document.getElementById('night'); myearth.mapContext.drawImage( nightImg, 0, 0, nightImg.width, nightImg.height, 0, 0, w, h );
var offset = sunAngle / 360 * w;
lightMaskCtx.clearRect(0, 0, w*2, h); lightMaskCtx.globalCompositeOperation='source-over'; lightMaskCtx.fillStyle = lightGradient; lightMaskCtx.fillRect( 0, 0, w, h ); lightMaskCtx.drawImage( lightMask, 0, 0, w, h, w, 0, w, h );
var dayImg = document.getElementById('day'); lightMaskCtx.globalCompositeOperation='source-in'; lightMaskCtx.drawImage( dayImg, 0, 0, dayImg.width, dayImg.height, offset, 0, w, h );
myearth.mapContext.drawImage( lightMask, offset, 0, w, h, 0, 0, w, h );
myearth.mapTexture.needsUpdate = true;
}
function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; }

