andy/planetary.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement basic and rotating globe examples

Browse Source
This commit is contained in:
Brandon Tilley 2013-12-23 14:15:23 -08:00
parent 8c9848a492
commit 14a0b8fdf4
7 changed files with 239 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/public/examples/_scripts_basic.ejs Normal file
View File

@ -0,0 +1,2 @@
<%- partial('../_scripts') %>
<script type='text/javascript' src='/examples/basic.js'></script>

2
site/public/examples/_scripts_rotating.ejs Normal file
View File

@ -0,0 +1,2 @@
<%- partial('../_scripts') %>
<script type='text/javascript' src='/examples/rotating.js'></script>

30
site/public/examples/basic.ejs Normal file
View File

@ -0,0 +1,30 @@
<h1>Basic Globe</h1>
<p>This example shows the minimum code you need to render a basic representation of the planet Earth.</p>
<div style='text-align: center;'>
<canvas id='basicGlobe' width='400' height='400'></canvas>
</div>
<div class='ui raise segment'>
<div class='ui blue ribbon label'>HTML</div>
<pre><code class='language-html'>&lt;canvas id='basicGlobe' width='400' height='400'&gt;&lt;/canvas&gt;</code></pre>
<div class='ui red ribbon label'>JavaScript</div>
<pre><code class='language-javascript'>(function() {
var canvas = document.getElementById('basicGlobe');
var planet = planetaryjs.planet();
// Loading this plugin technically happens automatically,
// but we need to specify the path to the `world-110m.json` file.
planet.loadPlugin(planetaryjs.plugins.earth({
topojson: { file: '/world-110m.json' }
}));
// Scale the planet's radius to half the canvas' size...
planet.projection.scale(canvas.width / 2);
// ...and move the planet to the center of the canvas.
planet.projection.translate([canvas.width / 2, canvas.height / 2]);
planet.draw(canvas);
})();</code></pre>
</div>
<%- partial('_scripts_basic') %>

14
site/public/examples/basic.js Normal file
View File

@ -0,0 +1,14 @@
(function() {
var canvas = document.getElementById('basicGlobe');
var planet = planetaryjs.planet();
// Loading this plugin technically happens automatically,
// but we need to specify the path to the `world-110m.json` file.
planet.loadPlugin(planetaryjs.plugins.earth({
topojson: { file: '/world-110m.json' }
}));
// Scale the planet's radius to half the canvas' size...
planet.projection.scale(canvas.width / 2);
// ...and move the planet to the center of the canvas.
planet.projection.translate([canvas.width / 2, canvas.height / 2]);
planet.draw(canvas);
})();

104
site/public/examples/rotating.ejs Normal file
View File

@ -0,0 +1,104 @@
<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'>&lt;canvas id='basicGlobe' width='400' height='400'
style='width: 400px; height: 400px;'&gt;&lt;/canvas&gt;</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] &gt;= 180) rotation[0] -= 360;
planet.projection.rotate(rotation);
lastTick = now;
}
});
};
};
})();</code></pre>
</div>
<%- partial('_scripts_rotating') %>

84
site/public/examples/rotating.js Normal file
View File

@ -0,0 +1,84 @@
(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;
}
});
};
};
})();

5
site/public/index.ejs
View File

@ -40,10 +40,11 @@
<div class='eight wide column left floated'>
<div class='ui panel homepage-globe-canvas'>
<canvas height='350' width='350' style="width: 350px; height: 350px;" id="homepage-globe-canvas"></canvas>
<br>
<div style="width: 350px; text-align: center; display: inline-block;">
<div class='ui pointing dark blue label'>
<a href='https://github.com/BinaryMuse/planetary.js/blob/master/site/public/js/homepage.js#files'
class='detail no-underline'><i class='icon code'></i> View this example's source!</a>
<a href='/examples/rotating.html'
class='detail no-underline'><i class='icon code'></i> See how to build this example</a>
</div>
</div>
</div>