Update site
This commit is contained in:
Brandon Tilley
parent
66b52ec602
commit
5cad239577
@ -71,9 +71,13 @@
|
||||
<a class='item ' href='/documentation/builtin_drag.html'>Drag</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class='red item ' href='/documentation/faq.html'>
|
||||
FAQ
|
||||
<i class='icon help'></i>
|
||||
</a>
|
||||
<a class='green item ' href='/documentation/help.html'>
|
||||
Getting Help
|
||||
<i class='icon help'></i>
|
||||
<i class='icon phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -71,9 +71,13 @@
|
||||
<a class='item ' href='/documentation/builtin_drag.html'>Drag</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class='red item ' href='/documentation/faq.html'>
|
||||
FAQ
|
||||
<i class='icon help'></i>
|
||||
</a>
|
||||
<a class='green item ' href='/documentation/help.html'>
|
||||
Getting Help
|
||||
<i class='icon help'></i>
|
||||
<i class='icon phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -71,9 +71,13 @@
|
||||
<a class='item active' href='/documentation/builtin_drag.html'>Drag</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class='red item ' href='/documentation/faq.html'>
|
||||
FAQ
|
||||
<i class='icon help'></i>
|
||||
</a>
|
||||
<a class='green item ' href='/documentation/help.html'>
|
||||
Getting Help
|
||||
<i class='icon help'></i>
|
||||
<i class='icon phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -71,9 +71,13 @@
|
||||
<a class='item ' href='/documentation/builtin_drag.html'>Drag</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class='red item ' href='/documentation/faq.html'>
|
||||
FAQ
|
||||
<i class='icon help'></i>
|
||||
</a>
|
||||
<a class='green item ' href='/documentation/help.html'>
|
||||
Getting Help
|
||||
<i class='icon help'></i>
|
||||
<i class='icon phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -71,9 +71,13 @@
|
||||
<a class='item ' href='/documentation/builtin_drag.html'>Drag</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class='red item ' href='/documentation/faq.html'>
|
||||
FAQ
|
||||
<i class='icon help'></i>
|
||||
</a>
|
||||
<a class='green item ' href='/documentation/help.html'>
|
||||
Getting Help
|
||||
<i class='icon help'></i>
|
||||
<i class='icon phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -71,9 +71,13 @@
|
||||
<a class='item ' href='/documentation/builtin_drag.html'>Drag</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class='red item ' href='/documentation/faq.html'>
|
||||
FAQ
|
||||
<i class='icon help'></i>
|
||||
</a>
|
||||
<a class='green item ' href='/documentation/help.html'>
|
||||
Getting Help
|
||||
<i class='icon help'></i>
|
||||
<i class='icon phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -71,9 +71,13 @@
|
||||
<a class='item ' href='/documentation/builtin_drag.html'>Drag</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class='red item ' href='/documentation/faq.html'>
|
||||
FAQ
|
||||
<i class='icon help'></i>
|
||||
</a>
|
||||
<a class='green item ' href='/documentation/help.html'>
|
||||
Getting Help
|
||||
<i class='icon help'></i>
|
||||
<i class='icon phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -71,9 +71,13 @@
|
||||
<a class='item ' href='/documentation/builtin_drag.html'>Drag</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class='red item ' href='/documentation/faq.html'>
|
||||
FAQ
|
||||
<i class='icon help'></i>
|
||||
</a>
|
||||
<a class='green item ' href='/documentation/help.html'>
|
||||
Getting Help
|
||||
<i class='icon help'></i>
|
||||
<i class='icon phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -71,9 +71,13 @@
|
||||
<a class='item ' href='/documentation/builtin_drag.html'>Drag</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class='red item ' href='/documentation/faq.html'>
|
||||
FAQ
|
||||
<i class='icon help'></i>
|
||||
</a>
|
||||
<a class='green item ' href='/documentation/help.html'>
|
||||
Getting Help
|
||||
<i class='icon help'></i>
|
||||
<i class='icon phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -71,9 +71,13 @@
|
||||
<a class='item ' href='/documentation/builtin_drag.html'>Drag</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class='red item ' href='/documentation/faq.html'>
|
||||
FAQ
|
||||
<i class='icon help'></i>
|
||||
</a>
|
||||
<a class='green item ' href='/documentation/help.html'>
|
||||
Getting Help
|
||||
<i class='icon help'></i>
|
||||
<i class='icon phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
114
documentation/faq.html
Normal file
114
documentation/faq.html
Normal file
@ -0,0 +1,114 @@
|
||||
<!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 ' href='/examples/'>
|
||||
<i class='laptop icon'></i><span class='hide-on-mobile'>Examples</span>
|
||||
</a>
|
||||
<a class='item minor active' 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='four wide column'>
|
||||
<div class='ui fluid vertical menu'>
|
||||
<a class='red item ' href='/documentation/index.html'>
|
||||
Introduction
|
||||
<i class='icon home'></i>
|
||||
</a>
|
||||
<a class='blue item ' href='/documentation/core.html'>
|
||||
Core API
|
||||
<i class='icon setting'></i>
|
||||
</a>
|
||||
<a class='orange item ' href='/documentation/planet.html'>
|
||||
Planet API
|
||||
<i class='icon globe'></i>
|
||||
</a>
|
||||
<a class='teal item ' href='/documentation/plugins.html'>
|
||||
Plugins
|
||||
<i class='icon edit'></i>
|
||||
</a>
|
||||
<a class='purple item with-subitems ' href='/documentation/builtin.html'>
|
||||
Built-In Plugins
|
||||
<i class='icon bolt'></i>
|
||||
</a>
|
||||
<div class='item contains-subitems'>
|
||||
<div class='menu'>
|
||||
<a class='item ' href='/documentation/builtin_earth.html'>Earth</a>
|
||||
<a class='item ' href='/documentation/builtin_topojson.html'>TopoJSON</a>
|
||||
<a class='item ' href='/documentation/builtin_oceans.html'>Oceans</a>
|
||||
<a class='item ' href='/documentation/builtin_land.html'>Land</a>
|
||||
<a class='item ' href='/documentation/builtin_borders.html'>Borders</a>
|
||||
<a class='item ' href='/documentation/builtin_pings.html'>Pings</a>
|
||||
<a class='item ' href='/documentation/builtin_zoom.html'>Zoom</a>
|
||||
<a class='item ' href='/documentation/builtin_drag.html'>Drag</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class='red item active' href='/documentation/faq.html'>
|
||||
FAQ
|
||||
<i class='icon help'></i>
|
||||
</a>
|
||||
<a class='green item ' href='/documentation/help.html'>
|
||||
Getting Help
|
||||
<i class='icon phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='twelve wide column'>
|
||||
<h1>FAQ</h1>
|
||||
<p><strong>Q:</strong> Why can't I access my DOM element?</p>
|
||||
<p><strong>A:</strong> Planetary.js provides no methods for DOM access or for waiting for the DOM ready event; you'll need to handle this on your own or use a third-party library.</p>
|
||||
<div class="ui horizontal icon divider">
|
||||
<i class="globe icon"></i>
|
||||
</div>
|
||||
|
||||
<p><strong>Q:</strong> Why doesn't my <code>canvas</code> element work with Planetary.js?</p>
|
||||
<p><strong>A:</strong> Planetary.js asks for raw DOM elements; if you have an element wrapped with jQuery, D3, or a similar library, you'll need to unwrap it to pass to your
|
||||
planet's <code>draw</code> method.</p>
|
||||
<div class="ui horizontal icon divider">
|
||||
<i class="globe icon"></i>
|
||||
</div>
|
||||
|
||||
<p><strong>Q:</strong> How do I manipulate my globe?</p>
|
||||
<p><strong>A:</strong> The planet object has methods and properties for manipulating the globe; most notable is the <code>projection</code> property. See the <a href="/documentation/planet.html">Planet API</a> for more information.</p>
|
||||
<div class="ui horizontal icon divider">
|
||||
<i class="globe icon"></i>
|
||||
</div>
|
||||
|
||||
<p><strong>Q:</strong> I'm getting "Cannot read property 'geo' of undefined" or "Cannot call method 'feature' of undefined."</p>
|
||||
<p><strong>A:</strong> Ensure you're requiring the <a href="http://d3js.org/">D3</a> and <a href="https://github.com/mbostock/topojson">TopoJSON</a> libraries before Planetary.js</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -71,9 +71,13 @@
|
||||
<a class='item ' href='/documentation/builtin_drag.html'>Drag</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class='red item ' href='/documentation/faq.html'>
|
||||
FAQ
|
||||
<i class='icon help'></i>
|
||||
</a>
|
||||
<a class='green item active' href='/documentation/help.html'>
|
||||
Getting Help
|
||||
<i class='icon help'></i>
|
||||
<i class='icon phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -71,9 +71,13 @@
|
||||
<a class='item ' href='/documentation/builtin_drag.html'>Drag</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class='red item ' href='/documentation/faq.html'>
|
||||
FAQ
|
||||
<i class='icon help'></i>
|
||||
</a>
|
||||
<a class='green item ' href='/documentation/help.html'>
|
||||
Getting Help
|
||||
<i class='icon help'></i>
|
||||
<i class='icon phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -71,9 +71,13 @@
|
||||
<a class='item ' href='/documentation/builtin_drag.html'>Drag</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class='red item ' href='/documentation/faq.html'>
|
||||
FAQ
|
||||
<i class='icon help'></i>
|
||||
</a>
|
||||
<a class='green item ' href='/documentation/help.html'>
|
||||
Getting Help
|
||||
<i class='icon help'></i>
|
||||
<i class='icon phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -71,9 +71,13 @@
|
||||
<a class='item ' href='/documentation/builtin_drag.html'>Drag</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class='red item ' href='/documentation/faq.html'>
|
||||
FAQ
|
||||
<i class='icon help'></i>
|
||||
</a>
|
||||
<a class='green item ' href='/documentation/help.html'>
|
||||
Getting Help
|
||||
<i class='icon help'></i>
|
||||
<i class='icon phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
82
examples/basic.html
Normal file
82
examples/basic.html
Normal file
@ -0,0 +1,82 @@
|
||||
<!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 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'><canvas id='basicGlobe' width='400' height='400'></canvas></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>
|
||||
|
||||
<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/basic.js'></script>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
14
examples/basic.js
Normal file
14
examples/basic.js
Normal 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);
|
||||
})();
|
||||
@ -76,8 +76,10 @@
|
||||
borders: { stroke: '#001320' }
|
||||
}));
|
||||
planet.loadPlugin(planetaryjs.plugins.pings({}));
|
||||
planet.loadPlugin(zoom());
|
||||
planet.loadPlugin(drag({
|
||||
planet.loadPlugin(planetaryjs.plugins.zoom({
|
||||
scaleExtent: [50, 5000]
|
||||
}));
|
||||
planet.loadPlugin(planetaryjs.plugins.drag({
|
||||
onDragStart: function() {
|
||||
planet.plugins.autorotate.pause();
|
||||
},
|
||||
@ -274,58 +276,6 @@
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
// Plugin to allow zooming with the mouse wheel
|
||||
function zoom(options) {
|
||||
return function(planet) {
|
||||
planet.onInit(function() {
|
||||
var zoom = d3.behavior.zoom()
|
||||
.scale(planet.projection.scale())
|
||||
.scaleExtent([50, 5000])
|
||||
.on('zoom', function() {
|
||||
planet.projection.scale(d3.event.scale);
|
||||
});
|
||||
d3.select(planet.canvas).call(zoom);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
// Plugin to allow rotating the globe by dragging with the mouse
|
||||
function drag(options) {
|
||||
var options = options || {};
|
||||
var noop = function() {};
|
||||
var onDragStart = options.onDragStart || noop;
|
||||
var onDragEnd = options.onDragEnd || noop;
|
||||
var onDrag = options.onDrag || noop;
|
||||
return function(planet) {
|
||||
planet.onInit(function() {
|
||||
var drag = d3.behavior.drag()
|
||||
.on('dragstart', onDragStart)
|
||||
.on('dragend', onDragEnd)
|
||||
.on('drag', function() {
|
||||
onDrag();
|
||||
var dx = d3.event.dx;
|
||||
var dy = d3.event.dy;
|
||||
var rotation = planet.projection.rotate();
|
||||
var radius = planet.projection.scale();
|
||||
// Dragging from the center of the planet to the edge
|
||||
// of the planet should rotate it 90 degrees
|
||||
var scale = d3.scale.linear()
|
||||
.domain([-1 * radius, radius])
|
||||
.range([-90, 90]);
|
||||
var degX = scale(dx);
|
||||
var degY = scale(dy);
|
||||
rotation[0] += degX;
|
||||
rotation[1] -= degY;
|
||||
if (rotation[1] > 90) rotation[1] = 90;
|
||||
if (rotation[1] < -90) rotation[1] = -90;
|
||||
if (rotation[0] >= 180) rotation[0] -= 360;
|
||||
planet.projection.rotate(rotation);
|
||||
});
|
||||
d3.select(planet.canvas).call(drag);
|
||||
});
|
||||
};
|
||||
};
|
||||
})();</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
156
examples/rotating.html
Normal file
156
examples/rotating.html
Normal file
@ -0,0 +1,156 @@
|
||||
<!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>
|
||||
84
examples/rotating.js
Normal file
84
examples/rotating.js
Normal 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;
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
})();
|
||||
11
index.html
11
index.html
@ -53,9 +53,13 @@
|
||||
<i class='move icon'></i>
|
||||
<div class='content'>Mouse drag + zoom support</div>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<!-- <div class='item'>
|
||||
<i class='lightbulb icon'></i>
|
||||
<div class='content'><a href='angular.html'>AngularJS integration</a></div>
|
||||
</div> -->
|
||||
<div class='item'>
|
||||
<i class='puzzle piece icon'></i>
|
||||
<div class='content'>Extremely extensible via a plugin-based architecture</div>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<i class='fork code icon'></i>
|
||||
@ -77,10 +81,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>
|
||||
|
||||
2
js/lib/planetaryjs.min.js
vendored
2
js/lib/planetaryjs.min.js
vendored
@ -1,2 +1,2 @@
|
||||
/*! Planetary.js 0.2.0 | (c) 2013 Brandon Tilley | Released under MIT License */
|
||||
/*! Planetary.js 0.2.1 | (c) 2013 Brandon Tilley | Released under MIT License */
|
||||
!function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],t):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var i=null;o&&(i=o.planetaryjs);var e=[],r=function(t,o,i){n.timer(function(){t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<i.onDraw.length;n++)i.onDraw[n]()})},l=function(n,t){for(var o=0;o<e.length;o++)t.unshift(e[o]);0==t.length&&(c.plugins.earth&&n.loadPlugin(c.plugins.earth()),c.plugins.pings&&n.loadPlugin(c.plugins.pings()));for(var o=0;o<t.length;o++)t[o](n)},a=function(n,t,o){if(o.onInit.length){var i=0,e=function(n){var t=o.onInit[i];t.length?t(function(){i++,n()}):(t(),i++,setTimeout(n,0))},l=function(){i>=o.onInit.length?r(n,t,o):e(l)};e(l)}else r(n,t,o)},u=function(n,t,o,i){l(n,o),n.canvas=t,n.context=t.getContext("2d"),a(n,t,i)},c={plugins:{},noConflict:function(){return o.planetaryjs=i,c},loadPlugin:function(n){e.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[]},i={plugins:{},draw:function(n){u(i,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},loadPlugin:function(n){t.push(n)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return i.projection=n.geo.orthographic().clipAngle(90).precision(0),i.path=n.geo.path().projection(i.projection),i}};return c.plugins.topojson=function(t){return function(o){o.plugins.topojson={},o.onInit(function(i){if(t.world)o.plugins.topojson.world=t.world,setTimeout(i,0);else{var e=t.file||"world-110m.json";n.json(e,function(n,t){if(n)throw new Error("Could not load JSON "+e);o.plugins.topojson.world=t,i()})}})}},c.plugins.oceans=function(n){return function(t){t.onDraw(function(){t.withSavedContext(function(o){o.beginPath(),t.path.context(o)({type:"Sphere"}),o.fillStyle=n.fill||"black",o.fill()})})}},c.plugins.land=function(n){return function(o){var i=null;o.onInit(function(){var n=o.plugins.topojson.world;i=t.feature(n,n.objects.land)}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),0!=n.fill&&(t.fillStyle=n.fill||"white",t.fill()),n.stroke&&(n.lineWidth&&(t.lineWidth=n.lineWidth),t.strokeStyle=n.stroke,t.stroke())})})}},c.plugins.borders=function(n){return function(o){var i=null,e={internal:function(n,t){return n.id!==t.id},external:function(n,t){return n.id===t.id},both:function(){return!0}};o.onInit(function(){var r=o.plugins.topojson.world,l=r.objects.countries,a=n.type||"internal";i=t.mesh(r,l,e[a])}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),t.strokeStyle=n.stroke||"gray",n.lineWidth&&(t.lineWidth=n.lineWidth),t.stroke()})})}},c.plugins.earth=function(n){var n=n||{},t=n.topojson||{},o=n.oceans||{},i=n.land||{},e=n.borders||{};return function(n){c.plugins.topojson(t)(n),c.plugins.oceans(o)(n),c.plugins.land(i)(n),c.plugins.borders(e)(n)}},c.plugins.pings=function(t){var o=[],i=function(n,i,e){var e=e||{};e.color=e.color||t.color||"white",e.ttl=e.ttl||t.ttl||2e3,e.angle=e.angle||t.angle||5,o.push({lat:n,lng:i,time:new Date,options:e})},e=function(n,t,i){for(var e=[],l=0;l<o.length;l++){var a=o[l],u=i-a.time;u<a.options.ttl&&(e.push(a),r(n,t,i,u,a))}o=e},r=function(t,o,i,e,r){var l=1-e/r.options.ttl,a=n.rgb(r.options.color);a="rgba("+a.r+","+a.g+","+a.b+","+l+")",o.strokeStyle=a;var u=n.geo.circle().origin([r.lng,r.lat]).angle(e/r.options.ttl*r.options.angle)();o.beginPath(),t.path.context(o)(u),o.stroke()};return function(n){n.plugins.pings={add:i},n.onDraw(function(){var t=new Date;n.withSavedContext(function(o){e(n,o,t)})})}},c.plugins.zoom=function(t){var t=t||{},o=function(){},i=t.onZoomStart||o,e=t.onZoomEnd||o,r=t.onZoom||o,l=t.initialScale,a=t.scaleExtent||[50,2e3];return function(t){t.onInit(function(){var o=n.behavior.zoom().scaleExtent(a);l?o.scale(l):o.scale(t.projection.scale()),o.on("zoomstart",i).on("zoomend",e).on("zoom",function(){r(),t.projection.scale(n.event.scale)}),n.select(t.canvas).call(o)})}},c.plugins.drag=function(t){var t=t||{},o=function(){},i=t.onDragStart||o,e=t.onDragEnd||o,r=t.onDrag||o;return function(t){t.onInit(function(){var o=n.behavior.drag().on("dragstart",i).on("dragend",e).on("drag",function(){r();var o=n.event.dx,i=n.event.dy,e=t.projection.rotate(),l=t.projection.scale(),a=n.scale.linear().domain([-1*l,l]).range([-90,90]),u=a(o),c=a(i);e[0]+=u,e[1]-=c,e[1]>90&&(e[1]=90),e[1]<-90&&(e[1]=-90),e[0]>=180&&(e[0]-=360),t.projection.rotate(e)});n.select(t.canvas).call(o)})}},c});
|
||||
Loading…
Reference in New Issue
Block a user