65 lines
2.5 KiB
JavaScript
65 lines
2.5 KiB
JavaScript
(function() {
|
|
var globe = planetaryjs.planet();
|
|
// The `earth` plugin draws the oceans and the land; it's actually
|
|
// a combination of several separate built-in plugins.
|
|
globe.loadPlugin(planetaryjs.plugins.earth({
|
|
topojson: { file: 'world-110m.json' },
|
|
oceans: { fill: '#000080' },
|
|
land: { fill: '#339966' },
|
|
borders: { stroke: '#008000' }
|
|
}));
|
|
// The `pings` plugin draws animated pings on the globe.
|
|
globe.loadPlugin(planetaryjs.plugins.pings());
|
|
// Load our custom `autorotate` plugin; see below.
|
|
globe.loadPlugin(autorotate(10));
|
|
// Set up the globe's initial scale, offset, and rotation.
|
|
globe.projection.scale(175).translate([175, 175]).rotate([0, -10, 0]);
|
|
|
|
// Every few hundred milliseconds, we'll draw another random ping.
|
|
var colors = ['red', 'yellow', 'white', 'orange', 'purple', 'cyan'];
|
|
setInterval(function() {
|
|
var lat = Math.random() * 170 - 85;
|
|
var lng = Math.random() * 360 - 180;
|
|
var color = colors[Math.floor(Math.random() * colors.length)];
|
|
globe.addPing(lat, lng, { color: color, ttl: 2000, angle: Math.random() * 10 });
|
|
}, 250);
|
|
|
|
var canvas = document.getElementById('homepage-globe-canvas');
|
|
// Special code to handle high-density displays (e.g. retina, some phones)
|
|
// In the future, Planetary.js will handle this by itself (or via a plugin).
|
|
if (window.devicePixelRatio == 2) {
|
|
canvas.width = 700;
|
|
canvas.height = 700;
|
|
context = canvas.getContext('2d');
|
|
context.scale(2, 2);
|
|
}
|
|
// Draw that globe!
|
|
globe.draw(canvas);
|
|
|
|
// This plugin will automatically rotate the globe around its vertical
|
|
// axis a configured number of degrees every second.
|
|
function autorotate(degPerSec) {
|
|
// Planetary.js plugins are functions that take a `planet` instance
|
|
// as an argument...
|
|
return function(planet) {
|
|
var lastTick = null;
|
|
// ...and configure hooks into certain pieces of its lifecycle.
|
|
planet.onDraw(function() {
|
|
if (!lastTick) {
|
|
lastTick = new Date();
|
|
} else {
|
|
var now = new Date();
|
|
var delta = now - lastTick;
|
|
// This plugin uses the built-in projection (provided by D3)
|
|
// to rotate the globe each time we draw it.
|
|
var rotation = planet.projection.rotate();
|
|
rotation[0] += degPerSec * delta / 1000;
|
|
if (rotation[0] >= 180) rotation[0] -= 360;
|
|
planet.projection.rotate(rotation);
|
|
lastTick = now;
|
|
}
|
|
});
|
|
};
|
|
};
|
|
})();
|