105 lines
4.2 KiB
Plaintext
105 lines
4.2 KiB
Plaintext
<h1>Basic Globe</h1>
|
|
|
|
<p>This code shows the example from the homepage, which rotates, shows randomly positioned, colored, and sized pings on the globe, and supports mouse-based dragging and zooming. It also shows the creation and use of a plugin, which powers the automatic rotation and exposes a public API.</p>
|
|
|
|
<p>The demo also shows how you can keep your globe from looking pixelated on high density displays by changing the canvas' width and height but keeping its <em>displayed</em> width and height the same via CSS styling.</p>
|
|
|
|
<div style='text-align: center;'>
|
|
<canvas id='rotatingGlobe' width='400' height='400'
|
|
style="width: 400px; height: 400px; cursor: move;"></canvas>
|
|
</div>
|
|
|
|
<div class='ui raise segment'>
|
|
<div class='ui blue ribbon label'>HTML</div>
|
|
<pre><code class='language-html'><canvas id='basicGlobe' width='400' height='400'
|
|
style='width: 400px; height: 400px; cursor: move;'></canvas></code></pre>
|
|
|
|
<div class='ui red ribbon label'>JavaScript</div>
|
|
<pre><code class='language-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));
|
|
// The `zoom` and `drag` plugins enable
|
|
// manipulating the globe with the mouse.
|
|
globe.loadPlugin(planetaryjs.plugins.zoom({
|
|
scaleExtent: [100, 300]
|
|
}));
|
|
globe.loadPlugin(planetaryjs.plugins.drag({
|
|
// Dragging the globe should pause the
|
|
// automatic rotation until we release the mouse.
|
|
onDragStart: function() {
|
|
globe.plugins.autorotate.pause();
|
|
},
|
|
onDragEnd: function() {
|
|
globe.plugins.autorotate.resume();
|
|
}
|
|
}))
|
|
// 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', 'green', 'cyan', 'pink'];
|
|
setInterval(function() {
|
|
var lat = Math.random() * 170 - 85;
|
|
var lng = Math.random() * 360 - 180;
|
|
var color = colors[Math.floor(Math.random() * colors.length)];
|
|
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 10 });
|
|
}, 250);
|
|
|
|
var canvas = document.getElementById('rotatingGlobe');
|
|
// 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 = 800;
|
|
canvas.height = 800;
|
|
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;
|
|
var paused = false;
|
|
planet.plugins.autorotate = {
|
|
pause: function() { paused = true; },
|
|
resume: function() { paused = false; }
|
|
};
|
|
// ...and configure hooks into certain pieces of its lifecycle.
|
|
planet.onDraw(function() {
|
|
if (paused || !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;
|
|
}
|
|
});
|
|
};
|
|
};
|
|
})();</code></pre>
|
|
</div>
|
|
|
|
<%- partial('_scripts_rotating') %>
|