157 lines
6.1 KiB
HTML
157 lines
6.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Planetary.js: Awesome interactive globes for the web</title>
|
|
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
|
|
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
|
|
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">
|
|
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
|
|
|
<link href="/css/prism.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class='ui fixed inverted large menu main-menu'>
|
|
<div class='items'>
|
|
<a class='item title' href='/index.html'>
|
|
<i class='globe icon'></i>Planetary.js
|
|
</a>
|
|
<span class='spacer hide-on-mobile'></span>
|
|
<a class='item minor' href='https://github.com/BinaryMuse/planetary.js/releases'>
|
|
<i class='download icon'></i><span class='hide-on-mobile'>Download</span>
|
|
</a>
|
|
<a class='item minor active' href='/examples/'>
|
|
<i class='laptop icon'></i><span class='hide-on-mobile'>Examples</span>
|
|
</a>
|
|
<a class='item minor ' href='/documentation/'>
|
|
<i class='book icon'></i><span class='hide-on-mobile'>Documentation</span>
|
|
</a>
|
|
<a class='item minor' href='https://github.com/BinaryMuse/planetary.js'>
|
|
<i class='github alternate icon'></i><span class='hide-on-mobile'>Fork on GitHub</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class='content container'>
|
|
<div class='page ui slim stackable grid'>
|
|
<div class='sixteen wide column'>
|
|
<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 my 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;"></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;'></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 shoud 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(lat, lng, { 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>
|
|
|
|
<script type='text/javascript' src="/js/lib/d3.v3.min.js"></script>
|
|
<script type='text/javascript' src="/js/lib/topojson.v1.min.js"></script>
|
|
<script type="text/javascript" src="/js/lib/planetaryjs.min.js"></script>
|
|
|
|
<script type='text/javascript' src='/examples/rotating.js'></script>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type='text/javascript' src='/js/prism.js'></script>
|
|
</body>
|
|
</html>
|