Compare commits
No commits in common. "gh-pages" and "master" have entirely different histories.
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
/node_modules/
|
||||
78
CHANGELOG.md
Normal file
78
CHANGELOG.md
Normal file
@ -0,0 +1,78 @@
|
||||
v1.1.2 (2015/11/22)
|
||||
-------------------
|
||||
|
||||
* Update LICENSE and copyright notices
|
||||
|
||||
v1.1.1 (2014/05/18)
|
||||
-------------------
|
||||
|
||||
* Set `planetaryjs` on root when using AMD
|
||||
|
||||
v1.1.0 (2014/02/03)
|
||||
-------------------
|
||||
|
||||
**Core**
|
||||
|
||||
* Add `stop` method
|
||||
* Add `onStop` hooks
|
||||
|
||||
v1.0.3 (2014/01/23)
|
||||
-------------------
|
||||
|
||||
* Don't disable adaptive resampling on the projection
|
||||
|
||||
v1.0.2 (2014/01/16)
|
||||
-------------------
|
||||
|
||||
* Update version dependencies for D3 and TopoJSON
|
||||
|
||||
v1.0.1 (2013/01/02)
|
||||
-------------------
|
||||
|
||||
* Add D3 and TopoJSON as dependencies in `package.json`
|
||||
|
||||
v1.0.0 (2013/12/31)
|
||||
-------------------
|
||||
|
||||
First stable release
|
||||
|
||||
v1.0.0-rc.2 (2013/12/26)
|
||||
------------------------
|
||||
|
||||
* Fix load order of global plugins
|
||||
* Expose planet instance as `this` in event callbacks
|
||||
|
||||
v1.0.0-rc.1 (2013/12/24)
|
||||
------------------------
|
||||
|
||||
* `zoom` plugin's `initialScale` can be set to `0`
|
||||
|
||||
v0.3.0
|
||||
------
|
||||
|
||||
* Reverse the order of `lat` and `lng` parameters of the `add` method of the `pings` plugin
|
||||
|
||||
v0.2.2
|
||||
------
|
||||
|
||||
* Add `afterZoom` and `afterDrag` hooks to the `zoom` and `drag` plugins
|
||||
|
||||
v0.2.1
|
||||
------
|
||||
|
||||
* Implement the `drag` and `zoom` plugins
|
||||
|
||||
v0.2.0
|
||||
------
|
||||
|
||||
* Convert the built-in `topojson` plugin to store data on `planet.plugins.topojson.world` instead of `planet.world`
|
||||
* Convert the built-in `land` and `borders` plugins to read world data from `planet.plugins.topojson.world`
|
||||
* Remove the `stroke` configuration option from the `oceans` plugin
|
||||
* Add the `lineWidth` configuration option to the `land` and `borders` plugins
|
||||
* Add the `type` configuration option to the `borders` plugin
|
||||
* Allow default configuration options to be passed to the `pings` plugin
|
||||
|
||||
v0.1.1
|
||||
------
|
||||
|
||||
* Initial pre-release version
|
||||
22
LICENSE
Normal file
22
LICENSE
Normal file
@ -0,0 +1,22 @@
|
||||
Copyright (c) 2013 Michelle Tilley
|
||||
|
||||
Permission is hereby granted, free of charge, to any person
|
||||
obtaining a copy of this software and associated documentation
|
||||
files (the "Software"), to deal in the Software without
|
||||
restriction, including without limitation the rights to use,
|
||||
copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the
|
||||
Software is furnished to do so, subject to the following
|
||||
conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
74
README.md
Normal file
74
README.md
Normal file
@ -0,0 +1,74 @@
|
||||
Planetary.js
|
||||
============
|
||||
|
||||
Planetary.js is a JavaScript library for building awesome interactive globes, like this one:
|
||||
|
||||
|
||||
|
||||
Planetary.js is based on [D3.js](http://d3js.org/) and [TopoJSON](https://github.com/mbostock/topojson). It has built-in support for zoom, rotation, mouse interaction, and displaying animated "pings" at any coordinate. Via plugins, Planetary.js can be extended to do whatever you want!
|
||||
|
||||
Examples, documentation, and more can be found at [planetaryjs.com](http://planetaryjs.com/).
|
||||
|
||||
Requirements
|
||||
------------
|
||||
|
||||
* [D3](http://d3js.org/) version 3
|
||||
* [TopoJSON](https://github.com/mbostock/topojson) version 1
|
||||
|
||||
Download
|
||||
--------
|
||||
|
||||
Download Planetary.js from the [Planetary.js web site](http://planetaryjs.com/download/).
|
||||
|
||||
Quick Start
|
||||
-----------
|
||||
|
||||
You'll need to run this page from a web server of some kind so that Planetary.js can load the TopoJSON data via Ajax.
|
||||
|
||||
HTML:
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
|
||||
<script type='text/javascript' src='http://d3js.org/topojson.v1.min.js'></script>
|
||||
<script type='text/javascript' src='planetaryjs.min.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='globe' width='500' height='500'></canvas>
|
||||
<script type='text/javascript' src='yourApp.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
JavaScript (`yourApp.js`):
|
||||
|
||||
```javascript
|
||||
var planet = planetaryjs.planet();
|
||||
// You can remove this statement if `world-110m.json`
|
||||
// is in the same path as the HTML page:
|
||||
planet.loadPlugin(planetaryjs.plugins.earth({
|
||||
topojson: { file: 'http/path/to/world-110m.json' }
|
||||
}));
|
||||
// Make the planet fit well in its canvas
|
||||
planet.projection.scale(250).translate([250, 250]);
|
||||
var canvas = document.getElementById('globe');
|
||||
planet.draw(canvas);
|
||||
```
|
||||
|
||||
Congratulations! You've rendered your first globe.
|
||||
|
||||
Documentation
|
||||
-------------
|
||||
|
||||
In-depth documentation can be found at [planetaryjs.com](http://planetaryjs.com).
|
||||
|
||||
Building
|
||||
--------
|
||||
|
||||
Building the project requires [Node.js](http://nodejs.org/). Once you've installed the project's dependencies with `npm install`, you can build the JavaScript to the `dist` directory with `npm run build`.
|
||||
|
||||
License
|
||||
-------
|
||||
|
||||
Planetary.js is licensed under the MIT license. See the `LICENSE` file for more information.
|
||||
33
bower.json
Normal file
33
bower.json
Normal file
@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "planetary.js",
|
||||
"version": "1.1.2",
|
||||
"main": "dist/planetaryjs.min.js",
|
||||
"description": "Awesome interactive globes for the web",
|
||||
"homepage": "http://planetaryjs.com",
|
||||
"authors": [
|
||||
"Michelle Tilley <michelle@michelletilley.net>"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
".git",
|
||||
".gitignore",
|
||||
"site",
|
||||
"src",
|
||||
"node_modules",
|
||||
"gulpfile.js",
|
||||
"package.json",
|
||||
"screenshot.png"
|
||||
],
|
||||
"dependencies": {
|
||||
"d3": "3.x",
|
||||
"topojson": "1.x"
|
||||
},
|
||||
"keywords": [
|
||||
"globe",
|
||||
"globes",
|
||||
"planet",
|
||||
"planets",
|
||||
"d3",
|
||||
"topojson"
|
||||
]
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
html,body{font-size:15px;font-family:"Open Sans","Helvetica Neue","Helvetica","Arial",sans-serif}body{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-family:"Source Sans Pro","Helvetica Neue","Helvetica","Arial",sans-serif}h1.subheader,h2.subheader,h3.subheader,h4.subheader,h5.subheader,h6.subheader{font-weight:300}h1.title-header,h2.title-header{margin-top:0px;margin-bottom:10px}.content.container{padding-top:50px}.content.container .slim{max-width:1108px;padding:0 20px;margin:0 auto}.centered{text-align:center}.feature-list,.download-list{font-size:17px}.feature-list .icon,.download-list .icon{margin-right:5px !important}.ui.label.bower{text-transform:none}a.ui.icon.header{text-decoration:none;color:black}a.ui.icon.header:hover{color:blue}.section-description{min-height:40px}.divider .icon.huge{font-size:2em}.footer .text{text-align:center}canvas#homepage-globe-canvas{width:350px;height:350px;cursor:move}@media screen and (max-width:768px){.hide-on-mobile{display:none !important}.ui.grid>.wide.column{width:auto !important;min-width:100%}}.column h1:first-child{padding-top:0;margin-top:0}@media screen and (min-width:769px){.hide-on-non-mobile{display:none !important}.main-menu .items{text-align:center;max-width:900px}}@media screen and (min-width:1050px){.main-menu{padding-left:8%}}.spacer{display:inline-block;width:50px}.ui.large.menu .item.minor{font-size:14px}.homepage-globe-canvas{text-align:right}@media screen and (max-width:998px){.homepage-globe-canvas{text-align:center}}.ui.dark.blue.label{background-color:#000080 !important;margin-top:5px}.ui.dark.blue.label:before{background-color:#000080 !important}.no-underline{text-decoration:none}.example-segment .horizontal.label{margin-top:5px}.example-segment img{width:200px;height:200px;float:left;margin-right:20px}@media screen and (max-width:768px){.example-segment img{display:block;float:none}}.ui.menu .item.contains-subitems{padding-top:0;padding-bottom:0;margin-top:0}.ui.menu .item.contains-subitems:before{width:0;height:0}pre{font-size:14px;overflow-x:auto}.ui.items.examples a.item{text-decoration:none}
|
||||
166
dist/planetaryjs-noplugins.js
vendored
Normal file
166
dist/planetaryjs-noplugins.js
vendored
Normal file
@ -0,0 +1,166 @@
|
||||
/*! Planetary.js v1.1.3
|
||||
* Copyright (c) 2013 Michelle Tilley
|
||||
*
|
||||
* Released under the MIT license
|
||||
* Date: 2018-10-30T18:49:58.804Z
|
||||
*/
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['d3', 'topojson'], function(d3, topojson) {
|
||||
return (root.planetaryjs = factory(d3, topojson, root));
|
||||
});
|
||||
} else if (typeof exports === 'object') {
|
||||
module.exports = factory(require('d3'), require('topojson'));
|
||||
} else {
|
||||
root.planetaryjs = factory(root.d3, root.topojson, root);
|
||||
}
|
||||
}(this, function(d3, topojson, window) {
|
||||
'use strict';
|
||||
|
||||
var originalPlanetaryjs = null;
|
||||
if (window) originalPlanetaryjs = window.planetaryjs;
|
||||
var plugins = [];
|
||||
|
||||
var doDrawLoop = function(planet, canvas, hooks) {
|
||||
d3.timer(function() {
|
||||
if (planet.stopped) {
|
||||
return true;
|
||||
}
|
||||
|
||||
planet.context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
for (var i = 0; i < hooks.onDraw.length; i++) {
|
||||
hooks.onDraw[i]();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var initPlugins = function(planet, localPlugins) {
|
||||
// Add the global plugins to the beginning of the local ones
|
||||
for (var i = plugins.length - 1; i >= 0; i--) {
|
||||
localPlugins.unshift(plugins[i]);
|
||||
}
|
||||
|
||||
// Load the default plugins if none have been loaded so far
|
||||
if (localPlugins.length === 0) {
|
||||
if (planetaryjs.plugins.earth)
|
||||
planet.loadPlugin(planetaryjs.plugins.earth());
|
||||
if (planetaryjs.plugins.pings)
|
||||
planet.loadPlugin(planetaryjs.plugins.pings());
|
||||
}
|
||||
|
||||
for (i = 0; i < localPlugins.length; i++) {
|
||||
localPlugins[i](planet);
|
||||
}
|
||||
};
|
||||
|
||||
var runOnInitHooks = function(planet, canvas, hooks) {
|
||||
// onInit hooks can be asynchronous if they take a parameter;
|
||||
// iterate through them one at a time
|
||||
if (hooks.onInit.length) {
|
||||
var completed = 0;
|
||||
var doNext = function(callback) {
|
||||
var next = hooks.onInit[completed];
|
||||
if (next.length) {
|
||||
next(function() {
|
||||
completed++;
|
||||
callback();
|
||||
});
|
||||
} else {
|
||||
next();
|
||||
completed++;
|
||||
setTimeout(callback, 0);
|
||||
}
|
||||
};
|
||||
var check = function() {
|
||||
if (completed >= hooks.onInit.length) doDrawLoop(planet, canvas, hooks);
|
||||
else doNext(check);
|
||||
};
|
||||
doNext(check);
|
||||
} else {
|
||||
doDrawLoop(planet, canvas, hooks);
|
||||
}
|
||||
};
|
||||
|
||||
var startDraw = function(planet, canvas, localPlugins, hooks) {
|
||||
planet.canvas = canvas;
|
||||
planet.context = canvas.getContext('2d');
|
||||
|
||||
if (planet.stopped !== true) {
|
||||
initPlugins(planet, localPlugins);
|
||||
}
|
||||
|
||||
planet.stopped = false;
|
||||
runOnInitHooks(planet, canvas, hooks);
|
||||
};
|
||||
|
||||
var planetaryjs = {
|
||||
plugins: {},
|
||||
|
||||
noConflict: function() {
|
||||
window.planetaryjs = originalPlanetaryjs;
|
||||
return planetaryjs;
|
||||
},
|
||||
|
||||
loadPlugin: function(plugin) {
|
||||
plugins.push(plugin);
|
||||
},
|
||||
|
||||
planet: function() {
|
||||
var localPlugins = [];
|
||||
var hooks = {
|
||||
onInit: [],
|
||||
onDraw: [],
|
||||
onStop: []
|
||||
};
|
||||
|
||||
var planet = {
|
||||
plugins: {},
|
||||
|
||||
draw: function(canvas) {
|
||||
startDraw(planet, canvas, localPlugins, hooks);
|
||||
},
|
||||
|
||||
onInit: function(fn) {
|
||||
hooks.onInit.push(fn);
|
||||
},
|
||||
|
||||
onDraw: function(fn) {
|
||||
hooks.onDraw.push(fn);
|
||||
},
|
||||
|
||||
onStop: function(fn) {
|
||||
hooks.onStop.push(fn);
|
||||
},
|
||||
|
||||
loadPlugin: function(plugin) {
|
||||
localPlugins.push(plugin);
|
||||
},
|
||||
|
||||
stop: function() {
|
||||
planet.stopped = true;
|
||||
for (var i = 0; i < hooks.onStop.length; i++) {
|
||||
hooks.onStop[i](planet);
|
||||
}
|
||||
},
|
||||
|
||||
withSavedContext: function(fn) {
|
||||
if (!this.context) {
|
||||
throw new Error("No canvas to fetch context for");
|
||||
}
|
||||
|
||||
this.context.save();
|
||||
fn(this.context);
|
||||
this.context.restore();
|
||||
}
|
||||
};
|
||||
|
||||
planet.projection = d3.geo.orthographic()
|
||||
.clipAngle(90);
|
||||
planet.path = d3.geo.path().projection(planet.projection);
|
||||
|
||||
return planet;
|
||||
}
|
||||
};
|
||||
|
||||
return planetaryjs;
|
||||
}));
|
||||
2
dist/planetaryjs-noplugins.min.js
vendored
Normal file
2
dist/planetaryjs-noplugins.min.js
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/*! Planetary.js 1.1.3 | (c) 2013 Michelle Tilley | Released under MIT License */
|
||||
!function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],function(o,e){return n.planetaryjs=t(o,e,n)}):"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 e=null;o&&(e=o.planetaryjs);var i=[],r=function(t,o,e){n.timer(function(){if(t.stopped)return!0;t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<e.onDraw.length;n++)e.onDraw[n]()})},u=function(n,t){for(var o=i.length-1;o>=0;o--)t.unshift(i[o]);for(0===t.length&&(s.plugins.earth&&n.loadPlugin(s.plugins.earth()),s.plugins.pings&&n.loadPlugin(s.plugins.pings())),o=0;o<t.length;o++)t[o](n)},p=function(n,t,o){if(o.onInit.length){var e=0,i=function(n){var t=o.onInit[e];t.length?t(function(){e++,n()}):(t(),e++,setTimeout(n,0))},u=function(){e>=o.onInit.length?r(n,t,o):i(u)};i(u)}else r(n,t,o)},c=function(n,t,o,e){n.canvas=t,n.context=t.getContext("2d"),n.stopped!==!0&&u(n,o),n.stopped=!1,p(n,t,e)},s={plugins:{},noConflict:function(){return o.planetaryjs=e,s},loadPlugin:function(n){i.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[],onStop:[]},e={plugins:{},draw:function(n){c(e,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},onStop:function(n){o.onStop.push(n)},loadPlugin:function(n){t.push(n)},stop:function(){e.stopped=!0;for(var n=0;n<o.onStop.length;n++)o.onStop[n](e)},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 e.projection=n.geo.orthographic().clipAngle(90),e.path=n.geo.path().projection(e.projection),e}};return s});
|
||||
410
dist/planetaryjs.js
vendored
Normal file
410
dist/planetaryjs.js
vendored
Normal file
@ -0,0 +1,410 @@
|
||||
/*! Planetary.js v1.1.3
|
||||
* Copyright (c) 2013 Michelle Tilley
|
||||
*
|
||||
* Released under the MIT license
|
||||
* Date: 2018-10-30T18:49:58.667Z
|
||||
*/
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['d3', 'topojson'], function(d3, topojson) {
|
||||
return (root.planetaryjs = factory(d3, topojson, root));
|
||||
});
|
||||
} else if (typeof exports === 'object') {
|
||||
module.exports = factory(require('d3'), require('topojson'));
|
||||
} else {
|
||||
root.planetaryjs = factory(root.d3, root.topojson, root);
|
||||
}
|
||||
}(this, function(d3, topojson, window) {
|
||||
'use strict';
|
||||
|
||||
var originalPlanetaryjs = null;
|
||||
if (window) originalPlanetaryjs = window.planetaryjs;
|
||||
var plugins = [];
|
||||
|
||||
var doDrawLoop = function(planet, canvas, hooks) {
|
||||
d3.timer(function() {
|
||||
if (planet.stopped) {
|
||||
return true;
|
||||
}
|
||||
|
||||
planet.context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
for (var i = 0; i < hooks.onDraw.length; i++) {
|
||||
hooks.onDraw[i]();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var initPlugins = function(planet, localPlugins) {
|
||||
// Add the global plugins to the beginning of the local ones
|
||||
for (var i = plugins.length - 1; i >= 0; i--) {
|
||||
localPlugins.unshift(plugins[i]);
|
||||
}
|
||||
|
||||
// Load the default plugins if none have been loaded so far
|
||||
if (localPlugins.length === 0) {
|
||||
if (planetaryjs.plugins.earth)
|
||||
planet.loadPlugin(planetaryjs.plugins.earth());
|
||||
if (planetaryjs.plugins.pings)
|
||||
planet.loadPlugin(planetaryjs.plugins.pings());
|
||||
}
|
||||
|
||||
for (i = 0; i < localPlugins.length; i++) {
|
||||
localPlugins[i](planet);
|
||||
}
|
||||
};
|
||||
|
||||
var runOnInitHooks = function(planet, canvas, hooks) {
|
||||
// onInit hooks can be asynchronous if they take a parameter;
|
||||
// iterate through them one at a time
|
||||
if (hooks.onInit.length) {
|
||||
var completed = 0;
|
||||
var doNext = function(callback) {
|
||||
var next = hooks.onInit[completed];
|
||||
if (next.length) {
|
||||
next(function() {
|
||||
completed++;
|
||||
callback();
|
||||
});
|
||||
} else {
|
||||
next();
|
||||
completed++;
|
||||
setTimeout(callback, 0);
|
||||
}
|
||||
};
|
||||
var check = function() {
|
||||
if (completed >= hooks.onInit.length) doDrawLoop(planet, canvas, hooks);
|
||||
else doNext(check);
|
||||
};
|
||||
doNext(check);
|
||||
} else {
|
||||
doDrawLoop(planet, canvas, hooks);
|
||||
}
|
||||
};
|
||||
|
||||
var startDraw = function(planet, canvas, localPlugins, hooks) {
|
||||
planet.canvas = canvas;
|
||||
planet.context = canvas.getContext('2d');
|
||||
|
||||
if (planet.stopped !== true) {
|
||||
initPlugins(planet, localPlugins);
|
||||
}
|
||||
|
||||
planet.stopped = false;
|
||||
runOnInitHooks(planet, canvas, hooks);
|
||||
};
|
||||
|
||||
var planetaryjs = {
|
||||
plugins: {},
|
||||
|
||||
noConflict: function() {
|
||||
window.planetaryjs = originalPlanetaryjs;
|
||||
return planetaryjs;
|
||||
},
|
||||
|
||||
loadPlugin: function(plugin) {
|
||||
plugins.push(plugin);
|
||||
},
|
||||
|
||||
planet: function() {
|
||||
var localPlugins = [];
|
||||
var hooks = {
|
||||
onInit: [],
|
||||
onDraw: [],
|
||||
onStop: []
|
||||
};
|
||||
|
||||
var planet = {
|
||||
plugins: {},
|
||||
|
||||
draw: function(canvas) {
|
||||
startDraw(planet, canvas, localPlugins, hooks);
|
||||
},
|
||||
|
||||
onInit: function(fn) {
|
||||
hooks.onInit.push(fn);
|
||||
},
|
||||
|
||||
onDraw: function(fn) {
|
||||
hooks.onDraw.push(fn);
|
||||
},
|
||||
|
||||
onStop: function(fn) {
|
||||
hooks.onStop.push(fn);
|
||||
},
|
||||
|
||||
loadPlugin: function(plugin) {
|
||||
localPlugins.push(plugin);
|
||||
},
|
||||
|
||||
stop: function() {
|
||||
planet.stopped = true;
|
||||
for (var i = 0; i < hooks.onStop.length; i++) {
|
||||
hooks.onStop[i](planet);
|
||||
}
|
||||
},
|
||||
|
||||
withSavedContext: function(fn) {
|
||||
if (!this.context) {
|
||||
throw new Error("No canvas to fetch context for");
|
||||
}
|
||||
|
||||
this.context.save();
|
||||
fn(this.context);
|
||||
this.context.restore();
|
||||
}
|
||||
};
|
||||
|
||||
planet.projection = d3.geo.orthographic()
|
||||
.clipAngle(90);
|
||||
planet.path = d3.geo.path().projection(planet.projection);
|
||||
|
||||
return planet;
|
||||
}
|
||||
};
|
||||
|
||||
planetaryjs.plugins.topojson = function(config) {
|
||||
return function(planet) {
|
||||
planet.plugins.topojson = {};
|
||||
|
||||
planet.onInit(function(done) {
|
||||
if (config.world) {
|
||||
planet.plugins.topojson.world = config.world;
|
||||
setTimeout(done, 0);
|
||||
} else {
|
||||
var file = config.file || 'world-110m.json';
|
||||
d3.json(file, function(err, world) {
|
||||
if (err) {
|
||||
throw new Error("Could not load JSON " + file);
|
||||
}
|
||||
planet.plugins.topojson.world = world;
|
||||
done();
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
planetaryjs.plugins.oceans = function(config) {
|
||||
return function(planet) {
|
||||
planet.onDraw(function() {
|
||||
planet.withSavedContext(function(context) {
|
||||
context.beginPath();
|
||||
planet.path.context(context)({type: 'Sphere'});
|
||||
|
||||
context.fillStyle = config.fill || 'black';
|
||||
context.fill();
|
||||
});
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
planetaryjs.plugins.land = function(config) {
|
||||
return function(planet) {
|
||||
var land = null;
|
||||
|
||||
planet.onInit(function() {
|
||||
var world = planet.plugins.topojson.world;
|
||||
land = topojson.feature(world, world.objects.land);
|
||||
});
|
||||
|
||||
planet.onDraw(function() {
|
||||
planet.withSavedContext(function(context) {
|
||||
context.beginPath();
|
||||
planet.path.context(context)(land);
|
||||
|
||||
if (config.fill !== false) {
|
||||
context.fillStyle = config.fill || 'white';
|
||||
context.fill();
|
||||
}
|
||||
|
||||
if (config.stroke) {
|
||||
if (config.lineWidth) context.lineWidth = config.lineWidth;
|
||||
context.strokeStyle = config.stroke;
|
||||
context.stroke();
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
planetaryjs.plugins.borders = function(config) {
|
||||
return function(planet) {
|
||||
var borders = null;
|
||||
var borderFns = {
|
||||
internal: function(a, b) {
|
||||
return a.id !== b.id;
|
||||
},
|
||||
external: function(a, b) {
|
||||
return a.id === b.id;
|
||||
},
|
||||
both: function(a, b) {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
planet.onInit(function() {
|
||||
var world = planet.plugins.topojson.world;
|
||||
var countries = world.objects.countries;
|
||||
var type = config.type || 'internal';
|
||||
borders = topojson.mesh(world, countries, borderFns[type]);
|
||||
});
|
||||
|
||||
planet.onDraw(function() {
|
||||
planet.withSavedContext(function(context) {
|
||||
context.beginPath();
|
||||
planet.path.context(context)(borders);
|
||||
context.strokeStyle = config.stroke || 'gray';
|
||||
if (config.lineWidth) context.lineWidth = config.lineWidth;
|
||||
context.stroke();
|
||||
});
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
planetaryjs.plugins.earth = function(config) {
|
||||
config = config || {};
|
||||
var topojsonOptions = config.topojson || {};
|
||||
var oceanOptions = config.oceans || {};
|
||||
var landOptions = config.land || {};
|
||||
var bordersOptions = config.borders || {};
|
||||
|
||||
return function(planet) {
|
||||
planetaryjs.plugins.topojson(topojsonOptions)(planet);
|
||||
planetaryjs.plugins.oceans(oceanOptions)(planet);
|
||||
planetaryjs.plugins.land(landOptions)(planet);
|
||||
planetaryjs.plugins.borders(bordersOptions)(planet);
|
||||
};
|
||||
};
|
||||
|
||||
planetaryjs.plugins.pings = function(config) {
|
||||
var pings = [];
|
||||
config = config || {};
|
||||
|
||||
var addPing = function(lng, lat, options) {
|
||||
options = options || {};
|
||||
options.color = options.color || config.color || 'white';
|
||||
options.angle = options.angle || config.angle || 5;
|
||||
options.ttl = options.ttl || config.ttl || 2000;
|
||||
var ping = { time: new Date(), options: options };
|
||||
if (config.latitudeFirst) {
|
||||
ping.lat = lng;
|
||||
ping.lng = lat;
|
||||
} else {
|
||||
ping.lng = lng;
|
||||
ping.lat = lat;
|
||||
}
|
||||
pings.push(ping);
|
||||
};
|
||||
|
||||
var drawPings = function(planet, context, now) {
|
||||
var newPings = [];
|
||||
for (var i = 0; i < pings.length; i++) {
|
||||
var ping = pings[i];
|
||||
var alive = now - ping.time;
|
||||
if (alive < ping.options.ttl) {
|
||||
newPings.push(ping);
|
||||
drawPing(planet, context, now, alive, ping);
|
||||
}
|
||||
}
|
||||
pings = newPings;
|
||||
};
|
||||
|
||||
var drawPing = function(planet, context, now, alive, ping) {
|
||||
var alpha = 1 - (alive / ping.options.ttl);
|
||||
var color = d3.rgb(ping.options.color);
|
||||
color = "rgba(" + color.r + "," + color.g + "," + color.b + "," + alpha + ")";
|
||||
context.strokeStyle = color;
|
||||
var circle = d3.geo.circle().origin([ping.lng, ping.lat])
|
||||
.angle(alive / ping.options.ttl * ping.options.angle)();
|
||||
context.beginPath();
|
||||
planet.path.context(context)(circle);
|
||||
context.stroke();
|
||||
};
|
||||
|
||||
return function (planet) {
|
||||
planet.plugins.pings = {
|
||||
add: addPing
|
||||
};
|
||||
|
||||
planet.onDraw(function() {
|
||||
var now = new Date();
|
||||
planet.withSavedContext(function(context) {
|
||||
drawPings(planet, context, now);
|
||||
});
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
planetaryjs.plugins.zoom = function (options) {
|
||||
options = options || {};
|
||||
var noop = function() {};
|
||||
var onZoomStart = options.onZoomStart || noop;
|
||||
var onZoomEnd = options.onZoomEnd || noop;
|
||||
var onZoom = options.onZoom || noop;
|
||||
var afterZoom = options.afterZoom || noop;
|
||||
var startScale = options.initialScale;
|
||||
var scaleExtent = options.scaleExtent || [50, 2000];
|
||||
|
||||
return function(planet) {
|
||||
planet.onInit(function() {
|
||||
var zoom = d3.behavior.zoom()
|
||||
.scaleExtent(scaleExtent);
|
||||
|
||||
if (startScale !== null && startScale !== undefined) {
|
||||
zoom.scale(startScale);
|
||||
} else {
|
||||
zoom.scale(planet.projection.scale());
|
||||
}
|
||||
|
||||
zoom
|
||||
.on('zoomstart', onZoomStart.bind(planet))
|
||||
.on('zoomend', onZoomEnd.bind(planet))
|
||||
.on('zoom', function() {
|
||||
onZoom.call(planet);
|
||||
planet.projection.scale(d3.event.scale);
|
||||
afterZoom.call(planet);
|
||||
});
|
||||
d3.select(planet.canvas).call(zoom);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
planetaryjs.plugins.drag = function(options) {
|
||||
options = options || {};
|
||||
var noop = function() {};
|
||||
var onDragStart = options.onDragStart || noop;
|
||||
var onDragEnd = options.onDragEnd || noop;
|
||||
var onDrag = options.onDrag || noop;
|
||||
var afterDrag = options.afterDrag || noop;
|
||||
|
||||
return function(planet) {
|
||||
planet.onInit(function() {
|
||||
var drag = d3.behavior.drag()
|
||||
.on('dragstart', onDragStart.bind(planet))
|
||||
.on('dragend', onDragEnd.bind(planet))
|
||||
.on('drag', function() {
|
||||
onDrag.call(planet);
|
||||
var dx = d3.event.dx;
|
||||
var dy = d3.event.dy;
|
||||
var rotation = planet.projection.rotate();
|
||||
var radius = planet.projection.scale();
|
||||
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);
|
||||
afterDrag.call(planet);
|
||||
});
|
||||
d3.select(planet.canvas).call(drag);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
return planetaryjs;
|
||||
}));
|
||||
2
dist/planetaryjs.min.js
vendored
Normal file
2
dist/planetaryjs.min.js
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/*! Planetary.js 1.1.3 | (c) 2013 Michelle Tilley | Released under MIT License */
|
||||
!function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],function(o,e){return n.planetaryjs=t(o,e,n)}):"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 e=null;o&&(e=o.planetaryjs);var i=[],r=function(t,o,e){n.timer(function(){if(t.stopped)return!0;t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<e.onDraw.length;n++)e.onDraw[n]()})},l=function(n,t){for(var o=i.length-1;o>=0;o--)t.unshift(i[o]);for(0===t.length&&(c.plugins.earth&&n.loadPlugin(c.plugins.earth()),c.plugins.pings&&n.loadPlugin(c.plugins.pings())),o=0;o<t.length;o++)t[o](n)},a=function(n,t,o){if(o.onInit.length){var e=0,i=function(n){var t=o.onInit[e];t.length?t(function(){e++,n()}):(t(),e++,setTimeout(n,0))},l=function(){e>=o.onInit.length?r(n,t,o):i(l)};i(l)}else r(n,t,o)},u=function(n,t,o,e){n.canvas=t,n.context=t.getContext("2d"),n.stopped!==!0&&l(n,o),n.stopped=!1,a(n,t,e)},c={plugins:{},noConflict:function(){return o.planetaryjs=e,c},loadPlugin:function(n){i.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[],onStop:[]},e={plugins:{},draw:function(n){u(e,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},onStop:function(n){o.onStop.push(n)},loadPlugin:function(n){t.push(n)},stop:function(){e.stopped=!0;for(var n=0;n<o.onStop.length;n++)o.onStop[n](e)},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 e.projection=n.geo.orthographic().clipAngle(90),e.path=n.geo.path().projection(e.projection),e}};return c.plugins.topojson=function(t){return function(o){o.plugins.topojson={},o.onInit(function(e){if(t.world)o.plugins.topojson.world=t.world,setTimeout(e,0);else{var i=t.file||"world-110m.json";n.json(i,function(n,t){if(n)throw new Error("Could not load JSON "+i);o.plugins.topojson.world=t,e()})}})}},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 e=null;o.onInit(function(){var n=o.plugins.topojson.world;e=t.feature(n,n.objects.land)}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(e),n.fill!==!1&&(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 e=null,i={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";e=t.mesh(r,l,i[a])}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(e),t.strokeStyle=n.stroke||"gray",n.lineWidth&&(t.lineWidth=n.lineWidth),t.stroke()})})}},c.plugins.earth=function(n){n=n||{};var t=n.topojson||{},o=n.oceans||{},e=n.land||{},i=n.borders||{};return function(n){c.plugins.topojson(t)(n),c.plugins.oceans(o)(n),c.plugins.land(e)(n),c.plugins.borders(i)(n)}},c.plugins.pings=function(t){var o=[];t=t||{};var e=function(n,e,i){i=i||{},i.color=i.color||t.color||"white",i.angle=i.angle||t.angle||5,i.ttl=i.ttl||t.ttl||2e3;var r={time:new Date,options:i};t.latitudeFirst?(r.lat=n,r.lng=e):(r.lng=n,r.lat=e),o.push(r)},i=function(n,t,e){for(var i=[],l=0;l<o.length;l++){var a=o[l],u=e-a.time;u<a.options.ttl&&(i.push(a),r(n,t,e,u,a))}o=i},r=function(t,o,e,i,r){var l=1-i/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(i/r.options.ttl*r.options.angle)();o.beginPath(),t.path.context(o)(u),o.stroke()};return function(n){n.plugins.pings={add:e},n.onDraw(function(){var t=new Date;n.withSavedContext(function(o){i(n,o,t)})})}},c.plugins.zoom=function(t){t=t||{};var o=function(){},e=t.onZoomStart||o,i=t.onZoomEnd||o,r=t.onZoom||o,l=t.afterZoom||o,a=t.initialScale,u=t.scaleExtent||[50,2e3];return function(t){t.onInit(function(){var o=n.behavior.zoom().scaleExtent(u);null!==a&&void 0!==a?o.scale(a):o.scale(t.projection.scale()),o.on("zoomstart",e.bind(t)).on("zoomend",i.bind(t)).on("zoom",function(){r.call(t),t.projection.scale(n.event.scale),l.call(t)}),n.select(t.canvas).call(o)})}},c.plugins.drag=function(t){t=t||{};var o=function(){},e=t.onDragStart||o,i=t.onDragEnd||o,r=t.onDrag||o,l=t.afterDrag||o;return function(t){t.onInit(function(){var o=n.behavior.drag().on("dragstart",e.bind(t)).on("dragend",i.bind(t)).on("drag",function(){r.call(t);var o=n.event.dx,e=n.event.dy,i=t.projection.rotate(),a=t.projection.scale(),u=n.scale.linear().domain([-1*a,a]).range([-90,90]),c=u(o),s=u(e);i[0]+=c,i[1]-=s,i[1]>90&&(i[1]=90),i[1]<-90&&(i[1]=-90),i[0]>=180&&(i[0]-=360),t.projection.rotate(i),l.call(t)});n.select(t.canvas).call(o)})}},c});
|
||||
0
world-110m.json → dist/world-110m.json
vendored
0
world-110m.json → dist/world-110m.json
vendored
@ -1,123 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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='purple item ' href='/documentation/installation.html'>
|
||||
Installation
|
||||
<i class='icon download'></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 active' 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 ' 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>Built-In Plugins</h1>
|
||||
<p>Planetary.js comes with several built-in plugins that provide a base set of functionality. (Note that the <code>planetaryjs-noplugins.js</code> file, as its name suggests, does not include the plugins). They are described in detail on their own pages, but are:</p>
|
||||
<ul>
|
||||
<li><a href="/documentation/builtin_earth.html">Earth</a> - a combination of the <code>topojson</code>, <code>oceans</code>, <code>land</code>, and <code>borders</code> plugins.</li>
|
||||
<li><a href="/documentation/builtin_topojson.html">TopoJSON</a> - loads TopoJSON data via Ajax (or via configuration) and makes it available for use by other plugins</li>
|
||||
<li><a href="/documentation/builtin_oceans.html">Oceans</a> - fills in the globe with a solid color</li>
|
||||
<li><a href="/documentation/builtin_land.html">Land</a> - uses data from the <code>topojson</code> plugin to draw Earth's land masses</li>
|
||||
<li><a href="/documentation/builtin_borders.html">Borders</a> - uses data from the <code>topojson</code> plugin to draw borders between Earth's countries</li>
|
||||
<li><a href="/documentation/builtin_pings.html">Pings</a> - draws animated, circular pings on the globe</li>
|
||||
<li><a href="/documentation/builtin_zoom.html">Zoom</a> - enables mouse-based zooming of the globe via the mouse wheel</li>
|
||||
<li><a href="/documentation/builtin_drag.html">Drag</a> - enables mouse-based rotation of the globe via dragging</li>
|
||||
</ul>
|
||||
<p>Built-in plugins are exposed as properties on <code>planetaryjs.plugins</code>.</p>
|
||||
<p>If you do not specify any plugins (globally or per-instance), Planetary.js will use the <code>earth</code> and <code>pings</code> plugins with their default settings.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,131 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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='purple item ' href='/documentation/installation.html'>
|
||||
Installation
|
||||
<i class='icon download'></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 active' 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 ' 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>Borders Plugin</h1>
|
||||
<p>The <code>borders</code> plugin renders the borders around (and between) countries. It uses TopoJSON data published to <code>planet.plugins.topojson.world</code> by the <a href="/documentation/builtin_topojson.html">TopoJSON plugin</a>. It uses the feature at <code>objects.countries</code> in the TopoJSON object to calculate the borders.</p>
|
||||
<h2>API</h2>
|
||||
<p><strong><code>planetaryjs.plugins.borders([config])</code></strong></p>
|
||||
<p>Valid keys for <code>config</code> are:</p>
|
||||
<ul>
|
||||
<li><code>stroke</code>: the <code>strokeStyle</code> to use for the context; defaults to <code>"gray"</code></li>
|
||||
<li><code>lineWidth</code> the <code>lineWidth</code> to set on the context; defaults to no value, and the context's <code>lineWidth</code> is not modified</li>
|
||||
<li><code>type</code>: valid options are <code>"internal"</code>, <code>"external"</code>, or <code>"both"</code>. <code>"internal"</code> draws borders between countries but not coastlines; <code>"external"</code> does the opposite. <code>"both"</code>, unsurprisingly, draws both. Defaults to <code>"internal"</code>.</li>
|
||||
</ul>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">planetaryjs.plugins.borders({
|
||||
stroke: '#008000', lineWidth: 0.25, type: 'both'
|
||||
});</code></pre>
|
||||
<p></div></p>
|
||||
<p>See also:</p>
|
||||
<ul>
|
||||
<li><a href="/documentation/builtin_earth.html">Earth Plugin</a></li>
|
||||
<li><a href="/documentation/builtin_topojson.html">TopoJSON Plugin</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,126 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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='purple item ' href='/documentation/installation.html'>
|
||||
Installation
|
||||
<i class='icon download'></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 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 phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='twelve wide column'>
|
||||
<h1>Drag Plugin</h1>
|
||||
<p>The <code>drag</code> plugin allows for modifying the planet's projection's rotation with the mouse. It supports dragging vertically with hard stops at the north and south poles, and dragging horizontally without restriction.</p>
|
||||
<h2>API</h2>
|
||||
<p><strong><code>planetaryjs.plugins.drag([config])</code></strong></p>
|
||||
<p>Valid keys for <code>config</code> are:</p>
|
||||
<ul>
|
||||
<li><code>onDragStart</code>, <code>onDragEnd</code>, <code>onDrag</code>, <code>afterDrag</code>: hooks to the <code>d3.behavior.drag</code> object's <code>dragstart</code>, <code>dragend</code>, and <code>drag</code> events; each defaults to a no-op. <code>onDrag</code> fires at the start of the <code>drag</code> event, <code>afterDrag</code> at the end. The planet instance is available as <code>this</code> inside the each of the functions.</li>
|
||||
</ul>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">planetaryjs.plugins.drag({
|
||||
onDrag: function() {
|
||||
console.log("The planet was dragged!", this, d3.event);
|
||||
}
|
||||
});</code></pre>
|
||||
<p></div></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,137 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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='purple item ' href='/documentation/installation.html'>
|
||||
Installation
|
||||
<i class='icon download'></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 active' 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 ' 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>Earth Plugin</h1>
|
||||
<p>The <code>earth</code> plugin is simply a wrapper around the <code>topojson</code>, <code>oceans</code>, <code>land</code>, and <code>borders</code> plugins. It parses its configuration and passes pieces of it to the individual plugins.</p>
|
||||
<h2>API</h2>
|
||||
<p><strong><code>planetaryjs.plugins.earth([config])</code></strong></p>
|
||||
<p>Valid keys for <code>config</code> are:</p>
|
||||
<ul>
|
||||
<li><code>topojson</code>: options to pass to the <code>topojson</code> plugin</li>
|
||||
<li><code>oceans</code>: options to pass to the <code>oceans</code> plugin</li>
|
||||
<li><code>land</code>: options to pass to the <code>land</code> plugin</li>
|
||||
<li><code>borders</code>: options to pass to the <code>borders</code> plugin</li>
|
||||
</ul>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">planetaryjs.plugins.earth({
|
||||
topojson: { file: 'world-110m.json' },
|
||||
oceans: { fill: '#000080' },
|
||||
land: { fill: '#339966' },
|
||||
borders: { stroke: '#008000' }
|
||||
});</code></pre>
|
||||
<p></div></p>
|
||||
<p>See also:</p>
|
||||
<ul>
|
||||
<li><a href="/documentation/builtin_topojson.html">TopoJSON Plugin</a></li>
|
||||
<li><a href="/documentation/builtin_oceans.html">Oceans Plugin</a></li>
|
||||
<li><a href="/documentation/builtin_land.html">Land Plugin</a></li>
|
||||
<li><a href="/documentation/builtin_borders.html">Borders Plugin</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,131 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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='purple item ' href='/documentation/installation.html'>
|
||||
Installation
|
||||
<i class='icon download'></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 active' 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 ' 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>Land Plugin</h1>
|
||||
<p>The <code>land</code> plugin renders Earth's landmasses. It uses TopoJSON data published to <code>planet.plugins.topojson.world</code> by the <a href="/documentation/builtin_topojson.html">TopoJSON plugin</a>. It uses the feature at <code>objects.land</code> in the TopoJSON object.</p>
|
||||
<h2>API</h2>
|
||||
<p><strong><code>planetaryjs.plugins.land([config])</code></strong></p>
|
||||
<p>Valid keys for <code>config</code> are:</p>
|
||||
<ul>
|
||||
<li><code>fill</code>: the <code>fillStyle</code> to use for the context; defaults to <code>"white"</code></li>
|
||||
<li><code>stroke</code>: the <code>strokeStyle</code> to use for the context; defaults to no value, resulting in no stroke around the landmasses</li>
|
||||
<li><code>lineWidth</code> the <code>lineWidth</code> to set on the context; only effective if <code>stroke</code> is set. Defaults to no value, resulting in no change to the context's <code>lineWidth</code></li>
|
||||
</ul>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">planetaryjs.plugins.land({
|
||||
fill: '#339966', stroke: '#000000'
|
||||
});</code></pre>
|
||||
<p></div></p>
|
||||
<p>See also:</p>
|
||||
<ul>
|
||||
<li><a href="/documentation/builtin_earth.html">Earth Plugin</a></li>
|
||||
<li><a href="/documentation/builtin_topojson.html">TopoJSON Plugin</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,128 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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='purple item ' href='/documentation/installation.html'>
|
||||
Installation
|
||||
<i class='icon download'></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 active' 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 ' 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>Oceans Plugin</h1>
|
||||
<p>The <code>oceans</code> plugin simply renders the main shape of the globe, filling it in with a solid color.</p>
|
||||
<h2>API</h2>
|
||||
<p><strong><code>planetaryjs.plugins.oceans([config])</code></strong></p>
|
||||
<p>Valid keys for <code>config</code> are:</p>
|
||||
<ul>
|
||||
<li><code>fill</code>: the <code>fillStyle</code> to use for the globe; defaults to <code>"black"</code></li>
|
||||
</ul>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">planetaryjs.plugins.oceans({
|
||||
fill: '#000080'
|
||||
});</code></pre>
|
||||
<p></div></p>
|
||||
<p>See also:</p>
|
||||
<ul>
|
||||
<li><a href="/documentation/builtin_earth.html">Earth Plugin</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,151 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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='purple item ' href='/documentation/installation.html'>
|
||||
Installation
|
||||
<i class='icon download'></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 active' 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 ' 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>Pings Plugin</h1>
|
||||
<p>The <code>pings</code> plugin allows you to display animated "pings" at any location on the planet. It publishes a method to create pings at <code>planet.plugins.pings.add</code>.</p>
|
||||
<h2>API</h2>
|
||||
<p><strong><code>planetaryjs.plugins.pings([config])</code></strong></p>
|
||||
<p>Valid keys for <code>config</code> are:</p>
|
||||
<ul>
|
||||
<li><code>color</code>: the default color for pings; defaults to <code>"white"</code></li>
|
||||
<li><code>ttl</code>: the default TTL for pings in milliseconds (how long they take to fade out); defaults to 2000</li>
|
||||
<li><code>angle</code>: the maximum angle for the ping (it will grow to this size over the course of its TTL); defaults to <code>5</code></li>
|
||||
<li><code>latitudeFirst</code>: reverse the order of the latitudinal and longitudinal coordinates passed to the <code>add</code> function (so that the latitudinal coordinate comes first); defaults to false. See the note on <code>add</code>, below, for more information.</li>
|
||||
</ul>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">planetaryjs.plugins.pings({
|
||||
color: 'yellow', ttl: 5000, angle: 10
|
||||
});</code></pre>
|
||||
<p></div></p>
|
||||
<p><strong><code>planet.plugins.pings.add(lng, lat, [config])</code></strong></p>
|
||||
<p>Add a new ping to the globe at the longitudinal and latitudinal coordinates specified by <code>lng</code> and <code>lat</code>. Valid keys for <code>config</code> are:</p>
|
||||
<ul>
|
||||
<li><code>color</code>: the default color for pings; defaults to <code>"white"</code></li>
|
||||
<li><code>ttl</code>: the default TTL for pings in milliseconds (how long they take to fade out); defaults to 2000</li>
|
||||
<li><code>angle</code>: the maximum angle for the ping (it will grow to this size over the course of its TTL); defaults to <code>5</code></li>
|
||||
</ul>
|
||||
<p>Any values not set by <code>config</code> will default to the values specified in the plugin's configuration, if any were set.</p>
|
||||
<div class='ui red raised segment'>
|
||||
<i class='red icon warning'></i> <strong>Note that the longitudinal coordinate comes first, followed by the latitudinal coordinate, unless you pass <code>latitudeFirst</code> as an option to the plugin configuration function.</strong> This corresponds to the conventions used by D3 (which Planetary.js is based on); for more information on the problem of axis ordering in software, see <a href="http://docs.geotools.org/latest/userguide/library/referencing/order.html">this article at the GeoTools web site</a>.
|
||||
</div>
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">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)];
|
||||
var angle = Math.random() * 10;
|
||||
planet.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: angle });
|
||||
}, 250);</code></pre>
|
||||
<p></div></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,144 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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='purple item ' href='/documentation/installation.html'>
|
||||
Installation
|
||||
<i class='icon download'></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 active' 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 ' 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>TopoJSON Plugin</h1>
|
||||
<p>The <code>topojson</code> plugin parses <a href="https://github.com/mbostock/topojson">TopoJSON data</a> and publishes it on <code>planet.plugins.topojson.world</code> for other plugins to use (particularly for rendering geographical data using D3).</p>
|
||||
<p>The plugin can load data from a file using Ajax, or can be provided an object that has come from some other source.</p>
|
||||
<h2>API</h2>
|
||||
<p><strong><code>planetaryjs.plugins.topojson([config])</code></strong></p>
|
||||
<p>Valid keys for <code>config</code> are:</p>
|
||||
<ul>
|
||||
<li><code>world</code>: a JavaScript object representing TopoJSON data (not a JSON string); defaults to no value, which will cause the plugin to load data from the <code>file</code> configuration option</li>
|
||||
<li><code>file</code>: the path to a TopoJSON data file to be loaded via Ajax; defaults to <code>"world-110m.json"</code>, which can be downloaded with the Planetary.js library from the <a href="/download/">download page</a>.</li>
|
||||
</ul>
|
||||
<p>If you plan on creating more than one planet from the same TopoJSON data, you can load the data once before loading the plugin and pass the parsed data to the plugin via the <code>world</code> property rather than letting the plugin load the data via Ajax each time a new planet is created.</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">planetaryjs.plugins.topojson({
|
||||
file: '/data/world-110m.json'
|
||||
});</code></pre>
|
||||
<p></div></p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">d3.json('/data/world-110m.json', function(err, data) {
|
||||
planetaryjs.plugins.topojson({
|
||||
world: data
|
||||
});
|
||||
// Create planets inside this callback
|
||||
});</code></pre>
|
||||
<p></div></p>
|
||||
<p><strong><code>planet.plugins.topojson.world</code></strong></p>
|
||||
<p>The plugin will publish the TopoJSON data to this key once it has been initialized by the plugin.</p>
|
||||
<ul>
|
||||
<li><a href="/documentation/builtin_earth.html">Earth Plugin</a></li>
|
||||
<li><a href="/documentation/builtin_land.html">Land Plugin</a></li>
|
||||
<li><a href="/documentation/builtin_borders.html">Borders Plugin</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,129 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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='purple item ' href='/documentation/installation.html'>
|
||||
Installation
|
||||
<i class='icon download'></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 active' href='/documentation/builtin_zoom.html'>Zoom</a>
|
||||
<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 phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='twelve wide column'>
|
||||
<h1>Zoom Plugin</h1>
|
||||
<p>The <code>zoom</code> plugin allows for modifying the planet's projection's scale with the mouse wheel.</p>
|
||||
<h2>API</h2>
|
||||
<p><strong><code>planetaryjs.plugins.zoom([config])</code></strong></p>
|
||||
<p>Valid keys for <code>config</code> are:</p>
|
||||
<ul>
|
||||
<li><code>initialScale</code>: the value to initialize the <a href="https://github.com/mbostock/d3/wiki/Zoom-Behavior"><code>d3.behavior.zoom</code></a> object's scale to; defaults to the scale of the planet's projection at the time the planet is initialized</li>
|
||||
<li><code>scaleExtent</code>: the value to use for the <code>d3.behavior.zoom</code> object's <code>scaleExtent</code> property, which defines how far in and out the planet can be zoomed; defaults to <code>[50, 2000]</code></li>
|
||||
<li><code>onZoomStart</code>, <code>onZoomEnd</code>, <code>onZoom</code>, <code>afterZoom</code>: hooks to the <code>d3.behavior.zoom</code> object's <code>zoomstart</code>, <code>zoomend</code>, and <code>zoom</code> events; each defaults to a no-op. <code>onZoom</code> fires at the start of the <code>zoom</code> event, <code>afterZoom</code> at the end. The planet instance is available as <code>this</code> inside the each of the functions.</li>
|
||||
</ul>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">planetaryjs.plugins.zoom({
|
||||
scaleExtent: [200, 1000],
|
||||
onZoom: function() {
|
||||
console.log("The planet was zoomed!", this, d3.event);
|
||||
}
|
||||
});</code></pre>
|
||||
<p></div></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,134 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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='purple item ' href='/documentation/installation.html'>
|
||||
Installation
|
||||
<i class='icon download'></i>
|
||||
</a>
|
||||
<a class='blue item active' 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 ' 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>Core API</h1>
|
||||
<h2>Core API</h2>
|
||||
<p><strong><code>planetaryjs.noConflict()</code></strong></p>
|
||||
<p>In non-AMD and non-CommonJS environments, Planetary.js takes over the global <code>planetaryjs</code> namespace (in the browser, this means <code>window.planetaryjs</code>). If, for some reason, something else useful was there before you loaded Planetary.js, you can ask for it to be returned to that spot by calling <code>planetaryjs.noConflict()</code>. The Planetary.js library will be returned from the function, so you can continue to use the library.</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">var planetary = planetaryjs.noConflict();</code></pre>
|
||||
<p></div></p>
|
||||
<p><strong><code>planetaryjs.loadPlugin(plugin)</code></strong></p>
|
||||
<p>Planetary.js uses a plugin architecture for all its functionality. Calling <code>planetaryjs.loadPlugin</code> will cause that plugin to be loaded in <em>all</em> planets created from this library. If you only want to use a plugin in some of your planets, use the <code>planet.loadPlugin</code> method (from the <a href="/documentation/planet.html">Planet API</a>) instead.</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">planetaryjs.loadPlugin(somePlugin);
|
||||
planetaryjs.loadPlugin(somePluginGenerator());</code></pre>
|
||||
<p></div></p>
|
||||
<p>For more information on the plugin system and API, please see the <a href="/documentation/plugins.html">Plugins documentation</a>.</p>
|
||||
<p><strong><code>planetaryjs.planet()</code></strong></p>
|
||||
<p>The <code>planet</code> API call returns a new planet instance, which represents a single globe. It will be created with all the plugins registered with <code>planetaryjs.loadPlugin</code> active. It has various methods for manipulating the globe and drawing it to a canvas. The <a href="/documentation/planet.html">Planet API</a> covers these methods in considerably more detail.</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">var planet = planetaryjs.planet();</code></pre>
|
||||
<p></div></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,143 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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='purple item ' href='/documentation/installation.html'>
|
||||
Installation
|
||||
<i class='icon download'></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 are the pings I add from the <a href="/documentation/builtin_pings.html">Pings plugin</a> in the wrong place?</p>
|
||||
<p><strong>A:</strong> Like D3 on which it is based, Planetary.js accepts coordinates with the longitudinal coordinate first. You can set the <code>latitudeFirst</code> option in the plugin configuration to change this. There is some additional discussion on the subject in the <a href="/documentation/builtin_pings.html">Pings plugin documentation</a>.</p>
|
||||
<div class="ui horizontal icon divider">
|
||||
<i class="globe icon"></i>
|
||||
</div>
|
||||
|
||||
<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> Why can't I load the <code>world-110m.json</code> file with the TopoJSON plugin?</p>
|
||||
<p><strong>A:</strong> After checking to make sure you've specified the correct path to the file in the plugin's configuration options, ensure that you're viewing your page over HTTP. Your browser won't be able to make the necessary Ajax request to load the file if you're just viewing the page from your filesystem.</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>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,113 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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='purple item ' href='/documentation/installation.html'>
|
||||
Installation
|
||||
<i class='icon download'></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 ' 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 phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='twelve wide column'>
|
||||
<h1>Getting Help</h1>
|
||||
<p><a href="http://stackoverflow.com/">Stack Overflow</a> is a great place to get help when you're stuck on a particular issue. Tag your question with <code>planetary.js</code> when you post it.</p>
|
||||
<p>If you think you've found a bug, hop over to <a href="https://github.com/BinaryMuse/planetary.js/issues">the Planetary.js issues page</a> and file a bug (assuming the same bug hasn't already been reported).</p>
|
||||
<p>If you have an idea for an improvement or other change, feel free to open a GitHub pull request.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,151 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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 active' href='/documentation/index.html'>
|
||||
Introduction
|
||||
<i class='icon home'></i>
|
||||
</a>
|
||||
<a class='purple item ' href='/documentation/installation.html'>
|
||||
Installation
|
||||
<i class='icon download'></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 ' 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>Introduction</h1>
|
||||
<p>Planetary.js is a JavaScript library for building awesome interactive globes. It uses <a href="http://d3js.org/">D3</a> and <a href="https://github.com/mbostock/topojson">TopoJSON</a> to parse and render geographic data. Planetary.js uses a plugin-based architecture; even the default functionality is implemented as plugins! This makes Planetary.js extremely flexible.</p>
|
||||
<p>The documentation is split up into several sections:</p>
|
||||
<ul>
|
||||
<li><a href="/documentation/core.html">Core API</a> describes the top-level Planetary.js API, including installing and configuring the library and creating new planet instances.</li>
|
||||
<li><a href="/documentation/planet.html">Planet API</a> describes the API associated with a planet instance, including modifying its properties and accessing a special canvas context that allows you to draw on the globe.</li>
|
||||
<li><a href="/documentation/plugins.html">Plugins</a> describes the plugin architecture of Planetary.js and shows how you can easily build your own plugins to modify the behavior of Planetary.js.</li>
|
||||
<li><a href="/documentation/builtin.html">Built-In Plugins</a> describes each of the built-in plugins in turn, including their public API and how to use them in a project.</li>
|
||||
<li><a href="/documentation/faq.html">FAQ</a> answers some common question and addresses a few easy-to-miss gotchas.</li>
|
||||
<li><a href="/documentation/help.html">Getting Help</a> describes what to do if you still need help after reading this documentation.</li>
|
||||
</ul>
|
||||
<h2>Quick Start</h2>
|
||||
<p>If you want to get up-and-running quickly, or like to experiment and figure things out, you can use this HTML and JavaScript to get a very simple globe up and running (once you've <a href="/documentation/installation.html">installed Planetary.js</a>).</p>
|
||||
<p>Note that you'll need to run this page from a web server of some kind so that Planetary.js can load the TopoJSON data via Ajax (Ajax requests don't work when viewing a page directly from the filesystem).</p>
|
||||
<p>Be sure to check out <a href="/examples/">the examples</a> as well!</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui blue ribbon label'>HTML</div>
|
||||
|
||||
<pre><code class="language-html"><html>
|
||||
<head>
|
||||
<script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
|
||||
<script type='text/javascript' src='http://d3js.org/topojson.v1.min.js'></script>
|
||||
<script type='text/javascript' src='planetaryjs.min.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='globe' width='500' height='500'></canvas>
|
||||
<script type='text/javascript' src='yourApp.js'></script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">var planet = planetaryjs.planet();
|
||||
// You can remove this statement if `world-110m.json`
|
||||
// is in the same path as the HTML page:
|
||||
planet.loadPlugin(planetaryjs.plugins.earth({
|
||||
topojson: { file: 'http/path/to/world-110m.json' }
|
||||
}));
|
||||
// Make the planet fit well in its canvas
|
||||
planet.projection.scale(250).translate([250, 250]);
|
||||
var canvas = document.getElementById('globe');
|
||||
planet.draw(canvas);</code></pre>
|
||||
<p></div></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,175 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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='purple item active' href='/documentation/installation.html'>
|
||||
Installation
|
||||
<i class='icon download'></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 ' 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>Installation</h1>
|
||||
<p>Once you've <a href="/download/">downloaded Planetary.js</a>, you can include it via a <code>script</code> tag on your page <em>after</em> the inclusion of D3 and TopoJSON. This example uses the CDN URLs for those libraries:</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui blue ribbon label'>HTML</div>
|
||||
|
||||
<pre><code class="language-html"><html>
|
||||
<head>
|
||||
<script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
|
||||
<script type='text/javascript' src='http://d3js.org/topojson.v1.min.js'></script>
|
||||
<script type='text/javascript' src='path/to/planetaryjs.min.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
...</code></pre>
|
||||
<p></div></p>
|
||||
<p>If you use the default <code>topojson</code> plugin (most people will), you'll also need to make sure <code>world-110m.json</code> (or some other TopoJSON data file) is available on your server. This file is also available from <a href="/download/">the download page</a>. See the <a href="/documentation/builtin_topojson.html">TopoJSON Plugin documentation</a> for more information.</p>
|
||||
<p>Planetary.js also supports installation via AMD and CommonJS loaders.</p>
|
||||
<h2>AMD</h2>
|
||||
<p>This example uses <a href="http://requirejs.org/">RequireJS</a>. Since neither D3 nor TopoJSON support AMD, we will use RequireJS's <a href="http://requirejs.org/docs/api.html#config-shim">shim configuration</a>.</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui blue ribbon label'>HTML</div>
|
||||
|
||||
<pre><code class="language-html"><body>
|
||||
<canvas id='globe' width='500' height='500'></canavs>
|
||||
<script src='//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js'
|
||||
data-main='/app.js'></script>
|
||||
</body></code></pre>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">requirejs.config({
|
||||
// Tell RequireJS to use `window.d3` and `window.topojson`
|
||||
// for those libraries, respectively
|
||||
shim: {
|
||||
d3: { exports: 'd3' },
|
||||
topojson: { exports: 'topojson' }
|
||||
},
|
||||
paths: {
|
||||
'd3': 'path/to/d3.v3.min',
|
||||
'topojson': 'path/to/topojson.v1.min'
|
||||
}
|
||||
});
|
||||
|
||||
requirejs(['planetaryjs'], function(planetaryjs) {
|
||||
// Use Planetary.js here
|
||||
});</code></pre>
|
||||
<p></div></p>
|
||||
<h2>CommonJS</h2>
|
||||
<p>First, install <code>browserify</code> from npm (as well as <code>planetary.js</code> v1.0.2+, if you haven't already). Then, create your application (here referred to as <code>app.js</code>) and bundle it with browserify.</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">var planetaryjs = require('planetary.js');
|
||||
|
||||
var planet = planetaryjs.planet();
|
||||
var canvas = document.getElementById('canvas');
|
||||
planet.draw(canvas);</code></pre>
|
||||
<div class='ui purple ribbon label'>Shell</div>
|
||||
|
||||
<pre><code class="language-shell">$ npm install browserify
|
||||
$ ./node_modules/.bin/browserify app.js > bundle.js</code></pre>
|
||||
<p></div></p>
|
||||
<p><code>bundle.js</code> is now ready to use! You may need to set the <code>charset</code> option on your script tag:</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui blue ribbon label'>HTML</div>
|
||||
|
||||
<pre><code class="language-html"><script type='text/javascript' src='bundle.js' charset='utf-8'></script></code></pre>
|
||||
<p></div></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,226 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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='purple item ' href='/documentation/installation.html'>
|
||||
Installation
|
||||
<i class='icon download'></i>
|
||||
</a>
|
||||
<a class='blue item ' href='/documentation/core.html'>
|
||||
Core API
|
||||
<i class='icon setting'></i>
|
||||
</a>
|
||||
<a class='orange item active' 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 ' 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>Planet API</h1>
|
||||
<p>A "planet" represents a single globe and its rendering instructions. It is created from the <code>planetaryjs.planet</code> method; see the <a href="/documentation/core.html">Core API documentation</a> for more details.</p>
|
||||
<p><strong><code>planet.loadPlugin(plugin)</code></strong></p>
|
||||
<p>Planetary.js uses a plugin architecture for all its functionality. While you can load plugins at the global library level, Planetary.js also allows you to load plugins for specific planets. <strong>If a planet is drawn and no plugins have been loaded globally and no plugins have been loaded for the specific planet instance, it will use the default <code>earth</code> and <code>pings</code> plugins.</strong></p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">planet.loadPlugin(somePlugin);
|
||||
planet.loadPlugin(somePluginGenerator());</code></pre>
|
||||
<p></div></p>
|
||||
<p>For more information on the plugin system and API, please see the <a href="/documentation/plugins.html">Plugins documentation</a>.</p>
|
||||
<p><strong><code>planet.projection</code></strong></p>
|
||||
<p>The core of a planet's data model is an <a href="https://github.com/mbostock/d3/wiki/Geo-Projections"><code>d3.geo.projection</code></a> (specifically, an orthographic projection), which is exposed by a planet by <code>planet.projection</code>. You can use this object to control various aspects of the planet. The D3 documentation covers the methods in considerable detail, so <a href="https://github.com/mbostock/d3/wiki/Geo-Projections">be sure to check it out</a>; many of the examples on this site also use the projection object to operate.</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">planet.projection
|
||||
.scale(width / 2)
|
||||
.translate([width / 2, height / 2])
|
||||
.rotate([60, -10, 0]);</code></pre>
|
||||
<p></div></p>
|
||||
<p><strong><code>planet.path</code></strong></p>
|
||||
<p><code>planet.path</code> is a <a href="https://github.com/mbostock/d3/wiki/Geo-Paths"><code>d3.geo.path</code></a> which uses the planet's internal projection to generate path data for geographical features. Its <code>context</code> method is commonly used by internal plugins to take a canvas context and return a path generator that can be used to draw on the globe.</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">canvasContext.beginPath();
|
||||
planet.path.context(canvasContext)(geoFeature);
|
||||
canvasContext.fill();</code></pre>
|
||||
<p></div></p>
|
||||
<p><strong><code>planet.plugins</code></strong></p>
|
||||
<p>Planetary.js provides an empty object that plugins may use to store public data and methods. If a plugin is well-behaved, it will keep all its properties on the object under a single key (usually one that share's the plugin's name).</p>
|
||||
<p><strong><code>planet.canvas</code> and <code>planet.context</code></strong></p>
|
||||
<p>Once you call <code>draw</code> on a planet instance, Planetary.js will set the <code>canvas</code> and <code>context</code> properties to the canvas and its context, respectively.</p>
|
||||
<p><strong><code>planet.onInit( function([done]){} )</code></strong></p>
|
||||
<p>Registers a function to be called when the planet is initialized (which happens after a call to <code>draw</code> and after any registered plugins have been loaded). This is mostly used by plugins to initialize themselves when the planet "boots."</p>
|
||||
<p>If the provided callback function takes any parameters, it will be a "done" function that must be called once the initialization function finishes any asynchronous work before the planet will continue to initialize.</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">planet.onInit(function() {
|
||||
doSomeSetupStuff();
|
||||
});
|
||||
|
||||
planet.onInit(function(done) {
|
||||
doSomeAsynchronousSetupStuff(function() {
|
||||
done();
|
||||
});
|
||||
});</code></pre>
|
||||
<p></div></p>
|
||||
<p><strong><code>planet.onDraw( function(){} )</code></strong></p>
|
||||
<p>Registers a function to be called each time the globe redraws itself. This is mostly used by plugins to draw plugin-specific data or otherwise animate the globe.</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">planet.onDraw(function() {
|
||||
var rotation = planet.projection.rotate();
|
||||
rotation[0] += 1;
|
||||
if (rotation[0] >= 180) rotation[0] -= 360;
|
||||
planet.projection.rotate(rotation);
|
||||
});</code></pre>
|
||||
<p></div></p>
|
||||
<p><strong><code>planet.onStop( function(){} )</code></strong></p>
|
||||
<p>Registers a function to be called when the planet is stopped with the <code>stop</code> method. This can be used to clean up timers and remove references to internal planet properties and plugins, if necessary, so that it can be property garbage collected.</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">var interval = setInterval(function() {
|
||||
addRandomPing(planet); // uses `planet.plugins.pings`
|
||||
}, 150);
|
||||
|
||||
planet.onStop(function() {
|
||||
clearInterval(interval);
|
||||
});</code></pre>
|
||||
<p></div></p>
|
||||
<p><strong><code>planet.withSavedContext( function(context){} )</code></strong></p>
|
||||
<p>Calls the function with the current canvas context as a parameter, wrapping the function call in <code>context.save()</code> and <code>context.restore()</code>. Use this function any time you're going to modify the context to ensure it gets put back to the way it was.</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">planet.onDraw(function() {
|
||||
planet.withSavedContext(function(context) {
|
||||
context.beginPath();
|
||||
planet.path.context(context)({type: 'Sphere'});
|
||||
context.fillStyle = 'black';
|
||||
context.fill();
|
||||
});
|
||||
});</code></pre>
|
||||
<p></div></p>
|
||||
<p><strong><code>planet.draw(canvas)</code></strong></p>
|
||||
<p>Begins drawing the globe onto the given canvas. <code>canvas</code> should be a raw DOM element (e.g. as returned by <code>document.getElementById</code>). Specifically, if it is wrapped by D3 or jQuery, you need to unwrap it with something like <code>wrappedCanvas[0]</code>.</p>
|
||||
<p>Calling <code>draw</code> will perform the following operations:</p>
|
||||
<ol>
|
||||
<li>Initialize each loaded plugin by calling the plugin function (note: this only happens the first time you call <code>draw</code>).</li>
|
||||
<li>Set <code>planet.canvas</code> and <code>planet.context</code> to the canvas and the canvas' context, respectively.</li>
|
||||
<li>Run each registered <code>onInit</code> hook in the order it was registered (note that <code>onInit</code> calls made by plugins will not be made until step 1, after <code>draw</code> has been called).</li>
|
||||
<li>Start the animation loop, each tick clearing the canvas and calling any registered <code>onDraw</code> hooks in order.</li>
|
||||
</ol>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui blue ribbon label'>HTML</div>
|
||||
|
||||
<pre><code class="language-html"><canvas id='myCanvas' width='123' height='456'></canvas></code></pre>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">var canvas = document.getElementById('myCanvas');
|
||||
planet.draw(canvas);</code></pre>
|
||||
<p></div></p>
|
||||
<p>Once you've called <code>draw()</code> on a planet, you should not call it again unless you first call <code>stop()</code>.</p>
|
||||
<p><strong><code>planet.stop()</code></strong></p>
|
||||
<p>Stop drawing the planet to the canvas. This disables the internal draw loop. You can register functions to call when the planet is stopped using the <code>onStop</code> method; if you don't plan on reusing the planet, be sure to clean up timers and references to internal properties, if necessary, so that it can be garbage collected.</p>
|
||||
<p>You can draw the planet to a new (or the same) canvas using the <code>draw</code> method as normal. All your plugins' <code>onInit</code> functions will fire, although the plugin function itself will not be called again.</p>
|
||||
<p>Keep in mind that, since the internal draw loop is stopped, your plugins' <code>onDraw</code> functions are not being called. If you have timers or other mechanisms that continually push data into a data structure that an <code>onDraw</code> method cleans up, you should disable or pause it.</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">planet.stop();</code></pre>
|
||||
<p></div></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,249 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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='purple item ' href='/documentation/installation.html'>
|
||||
Installation
|
||||
<i class='icon download'></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 active' 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 ' 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>Plugins</h1>
|
||||
<p>Planetary.js uses a plugin-based architecture, and all the built-in functionality is built using this architecture. This makes Planetary.js extremely flexible.</p>
|
||||
<h2>Loading Plugins</h2>
|
||||
<p>Plugins are loaded either globally by <code>planetaryjs.loadPlugin</code> or for a specific planet instance by <code>planet.loadPlugin</code>. If you call <code>draw</code> on a planet and it has no plugins loaded at all (from either source), Planetary.js will use the default plugin stack, which consists of the <code>earth</code> and <code>pings</code> plugins.</p>
|
||||
<h2>Anatomy of a Plugin</h2>
|
||||
<p>A plugin is simply a JavaScript function that takes a planet instance as a parameter and performs some operation on it. <strong>The best plugins do one tiny thing.</strong> If you want a plugin to do a lot of things at once, you should build a plugin that wraps other, smaller plugins; in fact, this is exactly how the <code>earth</code> plugin is built. See the <a href="/documentation/builtin_earth.html">Earth Plugin documentation</a> for more details.</p>
|
||||
<p>Most of the time, a plugin will implement its behavior by registering callbacks into a planet's lifecycle hooks. For example, the following simple plugin increments the planet's projection's rotation by one degree every tick (this would make for a very fast spinning globe, but demonstrates the idea nicely enough):</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">var autorotate = function(planet) {
|
||||
planet.onDraw(function() {
|
||||
var rotation = planet.projection.rotate();
|
||||
rotation[0] += 1;
|
||||
if (rotation[0] >= 180) rotation[0] -= 360;
|
||||
planet.projection.rotate(rotation);
|
||||
});
|
||||
};
|
||||
|
||||
planet.loadPlugin(autorotate);</code></pre>
|
||||
<p></div></p>
|
||||
<h2>Configurable Plugins</h2>
|
||||
<p>Often, you'll want your plugin to be configurable with some user-defined values. In this case, you can create a higher-order function, which takes your configuration data and then <em>returns</em> the plugin function. You can then call this function to generate the plugin for use by <code>loadPlugin</code>.</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">var autorotate = function(degreesPerTick) {
|
||||
return function(planet) {
|
||||
planet.onDraw(function() {
|
||||
var rotation = planet.projection.rotate();
|
||||
rotation[0] += degreesPerTick;
|
||||
if (rotation[0] >= 180) rotation[0] -= 360;
|
||||
planet.projection.rotate(rotation);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
planet.loadPlugin(autorotate(5));</code></pre>
|
||||
<p></div></p>
|
||||
<h2>Setting Yourself Up</h2>
|
||||
<p>If you need to do some work before your plugin is ready to be used, you can add a hook to a planet's <code>onInit</code> hook to do the necessary setup.</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">var somePlugin = function(planet) {
|
||||
planet.onInit(function() {
|
||||
doSomeSetupWork();
|
||||
});
|
||||
};</code></pre>
|
||||
<p></div></p>
|
||||
<p>If you need to do some asynchronous setup--such as fetching data with an Ajax request--before your plugin is ready, you can accept an argument to your <code>onInit</code> function. This argument is a function that tells Planetary.js when you're done setting up; simply call this function after your asynchronous operations are complete and Planetary.js will continue to initialize the planet. <strong>If you accept the parameter but don't call it, the initialization process will stop</strong> (and your planet will not work).</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">var somePlugin = function(planet) {
|
||||
planet.onInit(function(done) {
|
||||
doSomeAsynchronousSetupWork(function() {
|
||||
done();
|
||||
});
|
||||
});
|
||||
};</code></pre>
|
||||
<p></div></p>
|
||||
<h2>Drawing on the Canvas</h2>
|
||||
<p>Many plugins will want to draw onto the globe's canvas; you can do so by registering a function to a planet's <code>onDraw</code> hook.</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">var somePlugin = function(planet) {
|
||||
planet.onDraw(function() {
|
||||
planet.withSavedContext(function(context) {
|
||||
context.beginPath();
|
||||
planet.path.context(context)({type: 'Sphere'});
|
||||
context.fillStyle = 'black';
|
||||
context.fill();
|
||||
});
|
||||
});
|
||||
};</code></pre>
|
||||
<p></div></p>
|
||||
<p>The planet exposes properties and methods, such as <code>context</code>, <code>path</code>, and <code>withSavedContext</code> to assist with drawing to the canvas. The <a href="/documentation/planet.html">Planet API documentation</a> goes into more detail on individual properties.</p>
|
||||
<h3>Drawing Geo Paths</h3>
|
||||
<p>As explained in the <code>planet.path</code> documentation on the <a href="/documentation/planet.html">Planet API page</a>, <code>planet.path</code> is a <a href="https://github.com/mbostock/d3/wiki/Geo-Paths"><code>d3.geo.path</code></a> object that can be used to draw geographical geometry onto the canvas. The path will take care of transforming the coordinates to be projected onto the orthographic view of the globe.</p>
|
||||
<p>As a demonstration of this technique, the following is a plugin that will take the land data from a TopoJSON data source (stored on <code>planet.plugins.topojson.world</code>), convert it to a GeoJSON feature, and draw it on the planet. This code is similar to (but slightly simplified from) the <a href="/documentation/builtin_land.html">Land plugin's</a> implementation.</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">var drawLand = function(planet) {
|
||||
planet.onDraw(function() {
|
||||
planet.withSavedContext(function(context) {
|
||||
var world = planet.plugins.topojson.world;
|
||||
var land = topojson.feature(world, world.objects.land);
|
||||
|
||||
context.beginPath();
|
||||
planet.path.context(context)(land);
|
||||
context.fillStyle = 'white';
|
||||
context.fill();
|
||||
});
|
||||
});
|
||||
};</code></pre>
|
||||
<p></div></p>
|
||||
<h2>Exposing Data and Methods</h2>
|
||||
<p>Obviously, you can use private internal variables to keep track of any data your plugin needs in order to operate. However, if you want to expose a public API to users of your plugin, you should avoid attaching them directly to the planet and instead attach them to the planet's <code>plugins</code> namespace. You should use a name specific to your plugin, and this name should be well documented in your plugin's documentation.</p>
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
<pre><code class="language-javascript">var autorotate = function(degreesPerTick) {
|
||||
return function(planet) {
|
||||
var paused = false;
|
||||
|
||||
// Attach our public API to `planet.plugins`
|
||||
// on the `autorotate` namespace.
|
||||
planet.plugins.autorotate = {
|
||||
pause: function() { paused = true; },
|
||||
resume: function() { paused = false; }
|
||||
};
|
||||
|
||||
planet.onDraw(function() {
|
||||
if (paused) return;
|
||||
|
||||
var rotation = planet.projection.rotate();
|
||||
rotation[0] += degreesPerTick;
|
||||
if (rotation[0] >= 180) rotation[0] -= 360;
|
||||
planet.projection.rotate(rotation);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
planet.loadPlugin(autorotate(5));
|
||||
planet.draw(canvas);
|
||||
setTimeout(function() {
|
||||
planet.plugins.autorotate.pause();
|
||||
}, 5000);</code></pre>
|
||||
<p></div></p>
|
||||
<h2>Best Practices</h2>
|
||||
<p>There are a few things you can do to make your plugin all it can be:</p>
|
||||
<ol>
|
||||
<li>Make your plugin very small; ideally, it should do only <em>one thing</em> very well. Be extremely liberal with splitting plugins into smaller plugins, which makes them easier to understand, test, and compose. It's easy to say "this plugin renders the Earth," but it really renders oceans, land masses, and borders.</li>
|
||||
<li>Use higher-order functions to generate your plugin (as described above in "Plugin Generators") instead of passing function references to <code>loadPlugin</code> directly, even if your plugin doesn't take any configuration options. It makes for a more consistent API, and allows you to more easily add the ability to specify configuration options in the future.</li>
|
||||
<li>Make configuration optional if at all possible. Write your plugin so that it checks for missing values and uses sensible defaults.</li>
|
||||
<li>Only publish public data and API methods to <code>planet.plugins.pluginName</code>, where <code>pluginName</code> is the name of your plugin.</li>
|
||||
</ol>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,162 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor active' href='/download/'>
|
||||
<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 ' 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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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><i class='icon download disk'></i> Download Planetary.js</h1>
|
||||
|
||||
<p>Download the core Planetary.js library and supporting files here.</p>
|
||||
|
||||
<p>Up-to-the-minute releases, archived versions, and full release notes can be found <a href='https://github.com/BinaryMuse/planetary.js/releases'>on the GitHub releases page</a>.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>Latest Stable Build: v1.1.2</h2>
|
||||
<p><a href="https://github.com/BinaryMuse/planetary.js/releases/tag/v1.1.2">Release notes</a>
|
||||
|
|
||||
<a href="https://github.com/BinaryMuse/planetary.js/tree/v1.1.2">GitHub tag</a></p>
|
||||
|
||||
<div class='ui list download-list'>
|
||||
<div class='item'>
|
||||
<i class='icon download'></i>
|
||||
Core library: [
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/releases/download/v1.1.2/planetaryjs.min.js'>minified</a>
|
||||
|
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/releases/download/v1.1.2/planetaryjs.js'>unminified</a>
|
||||
]
|
||||
</div>
|
||||
<div class='item'>
|
||||
<i class='icon download'></i>
|
||||
Core library (no plugins): [
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/releases/download/v1.1.2/planetaryjs-noplugins.min.js'>minified</a>
|
||||
|
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/releases/download/v1.1.2/planetaryjs-noplugins.js'>unminified</a>
|
||||
]
|
||||
</div>
|
||||
<div class='item'>
|
||||
<i class='icon globe'></i>
|
||||
Earth TopoJSON data ("land" and "countries" objects): [
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/releases/download/v1.1.2/world-110m.json'>download</a>
|
||||
]
|
||||
</div>
|
||||
<div class='item'>
|
||||
<i class='icon code'></i>
|
||||
Source code [
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/archive/v1.1.2.zip'>.zip</a>
|
||||
|
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/archive/v1.1.2.tar.gz'>.tar.gz</a>
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>Latest Unstable Build: v1.0.0-rc.2</h2>
|
||||
<p><a href="https://github.com/BinaryMuse/planetary.js/releases/tag/v1.0.0-rc.2">Release notes</a>
|
||||
|
|
||||
<a href="https://github.com/BinaryMuse/planetary.js/tree/v1.0.0-rc.2">GitHub tag</a></p>
|
||||
|
||||
<div class='ui list download-list'>
|
||||
<div class='item'>
|
||||
<i class='icon download'></i>
|
||||
Core library: [
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/releases/download/v1.0.0-rc.2/planetaryjs.min.js'>minified</a>
|
||||
|
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/releases/download/v1.0.0-rc.2/planetaryjs.js'>unminified</a>
|
||||
]
|
||||
</div>
|
||||
<div class='item'>
|
||||
<i class='icon download'></i>
|
||||
Core library (no plugins): [
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/releases/download/v1.0.0-rc.2/planetaryjs-noplugins.min.js'>minified</a>
|
||||
|
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/releases/download/v1.0.0-rc.2/planetaryjs-noplugins.js'>unminified</a>
|
||||
]
|
||||
</div>
|
||||
<div class='item'>
|
||||
<i class='icon globe'></i>
|
||||
Earth TopoJSON data ("land" and "countries" objects): [
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/releases/download/v1.0.0-rc.2/world-110m.json'>download</a>
|
||||
]
|
||||
</div>
|
||||
<div class='item'>
|
||||
<i class='icon code'></i>
|
||||
Source code [
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/archive/v1.0.0-rc.2.zip'>.zip</a>
|
||||
|
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/archive/v1.0.0-rc.2.tar.gz'>.tar.gz</a>
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,102 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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'>
|
||||
<div class="ui breadcrumb">
|
||||
<a href='/examples/' class="section">Examples</a>
|
||||
<i class="right arrow icon divider"></i>
|
||||
<div class="active section">Basic Globe</div>
|
||||
</div>
|
||||
|
||||
<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 raised segment'>
|
||||
<div class='ui blue ribbon label'>HTML</div>
|
||||
<pre class='line-numbers'><code class='language-html'><canvas id='basicGlobe' width='400' height='400'></canvas></code></pre>
|
||||
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
<pre class='line-numbers'><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
|
||||
// and move it to the center of the canvas.
|
||||
planet.projection
|
||||
.scale(canvas.width / 2)
|
||||
.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>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,95 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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>Examples</h1>
|
||||
|
||||
<p>Sometimes you just need to see some code to get an idea started; here are a few examples of what you can build with Planetary.js.</p>
|
||||
|
||||
<div class='ui top attached segment example-segment'>
|
||||
<div>
|
||||
<a href='/examples/basic.html'><img src='/images/ex-basic.png'></a>
|
||||
<a href='/examples/basic.html'><h2><i class='icon black globe'></i>Basic Globe</h2></a>
|
||||
<p>It doesn't get any simpler than this: just a static globe, built using built-in plugins with nothing up our sleeves!</p>
|
||||
<span class='ui red horizontal label'>plugins: earth</span>
|
||||
<span class='ui purple horizontal label'>d3: projections</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='ui attached segment example-segment'>
|
||||
<div>
|
||||
<a href='/examples/rotating.html'><img src='/images/ex-rotating.png'></a>
|
||||
<a href='/examples/rotating.html'><h2><i class='icon black basic desk globe'></i>Rotating Globe with Pings</h2></a>
|
||||
<p>If there's one thing that's better than a globe, it's a globe that rotates. This is the demo from the homepage of Planetaryjs.com, and so includes a custom auto-rotation plugin and zoom/drag integration.</p>
|
||||
<span class='ui red horizontal label'>plugins: earth, pings, drag, zoom</span>
|
||||
<span class='ui teal horizontal label'>custom plugins</span>
|
||||
<span class='ui purple horizontal label'>d3: projections</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='ui bottom attached segment example-segment'>
|
||||
<div>
|
||||
<a href='/examples/quake.html'><img src='/images/ex-quake.png'></a>
|
||||
<a href='/examples/quake.html'><h2><i class='icon black bullseye'></i>2013 Seismic Activity Visualization</h2></a>
|
||||
<p>A visualization of 2013 seismic activity. This demo shows the use of multiple custom plugins, D3 scales, fetching third party data, and DOM updates via D3.</p>
|
||||
<span class='ui red horizontal label'>plugins: earth, pings, drag, zoom</span>
|
||||
<span class='ui teal horizontal label'>custom plugins</span>
|
||||
<span class='ui purple horizontal label'>d3: projections, scales, selections, events, external data</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,121 +0,0 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<link href="/css/prism.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background-color: rgb(0, 26, 34);
|
||||
background: url('sky.jpg');
|
||||
color: white;
|
||||
}
|
||||
|
||||
ul#magnitudes {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 30px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
h1 {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 5px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
#controls {
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
bottom: 5px;
|
||||
left: 50%;
|
||||
margin-left: -200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class='ui fixed inverted large menu main-menu'>
|
||||
<div class='items'>
|
||||
<a class='item title' href='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<i class='github alternate icon'></i><span class='hide-on-mobile'>Fork on GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h1>Earthquakes: 2013</h1>
|
||||
<ul id='magnitudes'></ul>
|
||||
|
||||
<canvas id='quakeCanvas'></canvas>
|
||||
|
||||
<div id='controls'>
|
||||
<div>
|
||||
<input id='slider' type='range' min='0' max='100' step='0.1' value='0'>
|
||||
</div>
|
||||
<div>
|
||||
<span id='date'>Loading...</span>
|
||||
</div>
|
||||
</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='/js/lib/moment.min.js'></script>
|
||||
<script type='text/javascript' src='/examples/quake/quake.js'></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
46
gulpfile.js
Normal file
46
gulpfile.js
Normal file
@ -0,0 +1,46 @@
|
||||
var gulp = require('gulp');
|
||||
var uglify = require('gulp-uglify');
|
||||
var concat = require('gulp-concat');
|
||||
var rename = require('gulp-rename');
|
||||
var header = require('gulp-header');
|
||||
var jshint = require('gulp-jshint');
|
||||
var replace = require('gulp-replace');
|
||||
var metadata = require('./package.json');
|
||||
|
||||
var shortHeader = "/*! Planetary.js <%= version %> | (c) 2013 Michelle Tilley | Released under MIT License */\n"
|
||||
var fullHeader = [
|
||||
"/*! Planetary.js v<%= version %>",
|
||||
" * Copyright (c) 2013 Michelle Tilley",
|
||||
" *",
|
||||
" * Released under the MIT license",
|
||||
" * Date: <%= new Date().toISOString() %>",
|
||||
" */",
|
||||
""
|
||||
].join("\n");
|
||||
|
||||
var fullSource = gulp.src(['./src/_umd_header.js', './src/body.js', './src/plugins.js', './src/_umd_footer.js']);
|
||||
var nonPluginSource = gulp.src(['./src/_umd_header.js', './src/body.js', './src/_umd_footer.js']);
|
||||
|
||||
function build(source, name, headerText, minify) {
|
||||
var js = source.pipe(concat(name));
|
||||
if (minify) { js = js.pipe(uglify()); }
|
||||
js = js.pipe(header(headerText, { version: metadata.version }));
|
||||
js.pipe(replace("\r\n", "\n")).pipe(gulp.dest('./dist'));
|
||||
}
|
||||
|
||||
gulp.task('jshint', function() {
|
||||
gulp.src(['./src/body.js', './src/plugins.js'])
|
||||
.pipe(jshint())
|
||||
.pipe(jshint.reporter('default'));
|
||||
});
|
||||
|
||||
gulp.task('build', function() {
|
||||
build(fullSource, 'planetaryjs.js', fullHeader, false);
|
||||
build(fullSource, 'planetaryjs.min.js', shortHeader, true);
|
||||
build(nonPluginSource, 'planetaryjs-noplugins.js', fullHeader, false);
|
||||
build(nonPluginSource, 'planetaryjs-noplugins.min.js', shortHeader, true);
|
||||
|
||||
gulp.src('./src/world-110m.json').pipe(gulp.dest('./dist'));
|
||||
});
|
||||
|
||||
gulp.task('default', ['jshint', 'build']);
|
||||
4222
package-lock.json
generated
Normal file
4222
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
35
package.json
Normal file
35
package.json
Normal file
@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "planetary.js",
|
||||
"version": "1.1.3",
|
||||
"description": "Awesome interactive globes for the web",
|
||||
"main": "dist/planetaryjs",
|
||||
"scripts": {
|
||||
"build": "rm -r dist/ ; gulp && cp dist/planetaryjs.min.js site/public/js/lib",
|
||||
"jshint": "gulp jshint",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/BinaryMuse/planetary.js.git"
|
||||
},
|
||||
"author": "Michelle Tilley <michelle@michelletilley.net>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/BinaryMuse/planetary.js/issues"
|
||||
},
|
||||
"homepage": "http://planetaryjs.com",
|
||||
"devDependencies": {
|
||||
"gulp": "~3.6.2",
|
||||
"gulp-concat": "BinaryMuse/gulp-concat",
|
||||
"gulp-header": "~1.0.2",
|
||||
"gulp-uglify": "~0.3.0",
|
||||
"gulp-rename": "~1.2.0",
|
||||
"bower": "~1.2.8",
|
||||
"gulp-jshint": "~1.6.1",
|
||||
"gulp-replace": "~0.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"topojson": "^1.4.6",
|
||||
"d3": "^3.3.13"
|
||||
}
|
||||
}
|
||||
BIN
screenshot.png
Normal file
BIN
screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
39
script/set-version
Executable file
39
script/set-version
Executable file
@ -0,0 +1,39 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
var fs = require('fs');
|
||||
var spawn = require('child_process').spawn;
|
||||
|
||||
var type = process.argv[2];
|
||||
var version = process.argv[3];
|
||||
|
||||
if ("stable" !== type && "unstable" !== type) {
|
||||
console.log("You must specify 'stable' or 'unstable' version type.");
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (!version) {
|
||||
console.log("You must specify a version.");
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (version[0] === 'v') {
|
||||
version = version.replace(/^v/, '');
|
||||
}
|
||||
|
||||
var package = require("../package.json");
|
||||
var bower = require("../bower.json");
|
||||
var site = require("../site/public/download/_data.json");
|
||||
|
||||
package.version = version;
|
||||
bower.version = version;
|
||||
|
||||
site[type].latest = site[type].latest || {};
|
||||
site[type].latest.version = "v" + version;
|
||||
|
||||
fs.writeFileSync('package.json', JSON.stringify(package, null, ' ') + "\n");
|
||||
fs.writeFileSync('bower.json', JSON.stringify(bower, null, ' ') + "\n");
|
||||
fs.writeFileSync('site/public/download/_data.json', JSON.stringify(site, null, ' ') + "\n");
|
||||
|
||||
spawn('npm', ['run', 'build']);
|
||||
|
||||
console.log("Tasks:\n\n - Update CHANGELOG.md\n - Regenerate site\n - Create release on GH");
|
||||
2
site/.gitignore
vendored
Normal file
2
site/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
node_modules/
|
||||
www/
|
||||
11
site/README.md
Normal file
11
site/README.md
Normal file
@ -0,0 +1,11 @@
|
||||
Planetary.js Site
|
||||
=================
|
||||
|
||||
This is the source for the Planetary.js web site.
|
||||
|
||||
Building
|
||||
--------
|
||||
|
||||
1. Install [Node.js](http://nodejs.org/)
|
||||
2. Install the local dependencies with `npm install`
|
||||
3. Run the development server with `npm start` (starts on port 9000) or compile the site to `www` with `npm run compile`
|
||||
0
site/harp.json
Normal file
0
site/harp.json
Normal file
18
site/package.json
Normal file
18
site/package.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "planetaryjs-site",
|
||||
"version": "0.0.0",
|
||||
"description": "Web site for Planetary.js",
|
||||
"main": "index.js",
|
||||
"homepage": "http://planetaryjs.com",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"start": "harp server",
|
||||
"compile": "harp compile"
|
||||
},
|
||||
"author": "Michelle Tilley <michelle@michelletilley.net>",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"harp": "~0.10.1"
|
||||
}
|
||||
}
|
||||
9
site/public/_ga.ejs
Normal file
9
site/public/_ga.ejs
Normal file
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
10
site/public/_header.ejs
Normal file
10
site/public/_header.ejs
Normal file
@ -0,0 +1,10 @@
|
||||
<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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
17
site/public/_layout.ejs
Normal file
17
site/public/_layout.ejs
Normal file
@ -0,0 +1,17 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<%- partial("_header") %>
|
||||
</head>
|
||||
<body>
|
||||
<%- partial("_menu") %>
|
||||
|
||||
<div class='content container'>
|
||||
<%- yield %>
|
||||
</div>
|
||||
|
||||
<%- partial("_scripts") %>
|
||||
<script type="text/javascript" src="js/homepage.js"></script>
|
||||
<%- partial("_ga") %>
|
||||
</body>
|
||||
</html>
|
||||
21
site/public/_menu.ejs
Normal file
21
site/public/_menu.ejs
Normal file
@ -0,0 +1,21 @@
|
||||
<div class='ui fixed inverted large menu main-menu'>
|
||||
<div class='items'>
|
||||
<a class='item title' href='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor <%- current.path[0] == 'download' ? 'active' : '' %>' href='/download/'>
|
||||
<i class='download icon'></i><span class='hide-on-mobile'>Download</span>
|
||||
</a>
|
||||
<a class='item minor <%- current.path[0] == 'examples' ? 'active' : '' %>' href='/examples/'>
|
||||
<i class='laptop icon'></i><span class='hide-on-mobile'>Examples</span>
|
||||
</a>
|
||||
<a class='item minor <%- current.path[0] == 'documentation' ? '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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<i class='github alternate icon'></i><span class='hide-on-mobile'>Fork on GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
3
site/public/_scripts.ejs
Normal file
3
site/public/_scripts.ejs
Normal file
@ -0,0 +1,3 @@
|
||||
<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>
|
||||
0
site/public/amd/index.ejs
Normal file
0
site/public/amd/index.ejs
Normal file
185
site/public/css/planetaryjs.less
Normal file
185
site/public/css/planetaryjs.less
Normal file
@ -0,0 +1,185 @@
|
||||
html, body {
|
||||
font-size: 15px;
|
||||
font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
|
||||
&.subheader {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
h1.title-header, h2.title-header {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.content.container {
|
||||
padding-top: 50px;
|
||||
|
||||
.slim {
|
||||
max-width: 1108px;
|
||||
padding: 0 20px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-list, .download-list {
|
||||
font-size: 17px;
|
||||
|
||||
.icon {
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.label.bower {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
a.ui.icon.header {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
|
||||
&:hover {
|
||||
color: blue;
|
||||
}
|
||||
}
|
||||
|
||||
.section-description {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
.icon.huge {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
.text {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
canvas#homepage-globe-canvas {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.hide-on-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ui.grid > .wide.column {
|
||||
width: auto !important;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
h1:first-child {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
.hide-on-non-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.main-menu .items {
|
||||
text-align: center;
|
||||
max-width: 900px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1050px) {
|
||||
.main-menu {
|
||||
padding-left: 8%;
|
||||
}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.ui.large.menu .item.minor {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.homepage-globe-canvas {
|
||||
text-align: right;
|
||||
|
||||
@media screen and (max-width: 998px) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.dark.blue.label {
|
||||
background-color: #000080 !important;
|
||||
margin-top: 5px;
|
||||
|
||||
&:before {
|
||||
background-color: #000080 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.no-underline {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.example-segment {
|
||||
.horizontal.label {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui.menu .item.contains-subitems {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-top: 0;
|
||||
|
||||
&:before {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 14px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.ui.items.examples {
|
||||
a.item {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
69
site/public/documentation/_layout.ejs
Normal file
69
site/public/documentation/_layout.ejs
Normal file
@ -0,0 +1,69 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<%- partial("../_header") %>
|
||||
<link href="/css/prism.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<%- partial("../_menu") %>
|
||||
|
||||
<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 <%- current.source == 'index' ? 'active' : '' %>' href='/documentation/index.html'>
|
||||
Introduction
|
||||
<i class='icon home'></i>
|
||||
</a>
|
||||
<a class='purple item <%- current.source == 'installation' ? 'active' : '' %>' href='/documentation/installation.html'>
|
||||
Installation
|
||||
<i class='icon download'></i>
|
||||
</a>
|
||||
<a class='blue item <%- current.source == 'core' ? 'active' : '' %>' href='/documentation/core.html'>
|
||||
Core API
|
||||
<i class='icon setting'></i>
|
||||
</a>
|
||||
<a class='orange item <%- current.source == 'planet' ? 'active' : '' %>' href='/documentation/planet.html'>
|
||||
Planet API
|
||||
<i class='icon globe'></i>
|
||||
</a>
|
||||
<a class='teal item <%- current.source == 'plugins' ? 'active' : '' %>' href='/documentation/plugins.html'>
|
||||
Plugins
|
||||
<i class='icon edit'></i>
|
||||
</a>
|
||||
<a class='purple item with-subitems <%- current.source == 'builtin' ? 'active' : '' %>' href='/documentation/builtin.html'>
|
||||
Built-In Plugins
|
||||
<i class='icon bolt'></i>
|
||||
</a>
|
||||
<div class='item contains-subitems'>
|
||||
<div class='menu'>
|
||||
<a class='item <%- current.source == 'builtin_earth' ? 'active' : '' %>' href='/documentation/builtin_earth.html'>Earth</a>
|
||||
<a class='item <%- current.source == 'builtin_topojson' ? 'active' : '' %>' href='/documentation/builtin_topojson.html'>TopoJSON</a>
|
||||
<a class='item <%- current.source == 'builtin_oceans' ? 'active' : '' %>' href='/documentation/builtin_oceans.html'>Oceans</a>
|
||||
<a class='item <%- current.source == 'builtin_land' ? 'active' : '' %>' href='/documentation/builtin_land.html'>Land</a>
|
||||
<a class='item <%- current.source == 'builtin_borders' ? 'active' : '' %>' href='/documentation/builtin_borders.html'>Borders</a>
|
||||
<a class='item <%- current.source == 'builtin_pings' ? 'active' : '' %>' href='/documentation/builtin_pings.html'>Pings</a>
|
||||
<a class='item <%- current.source == 'builtin_zoom' ? 'active' : '' %>' href='/documentation/builtin_zoom.html'>Zoom</a>
|
||||
<a class='item <%- current.source == 'builtin_drag' ? 'active' : '' %>' href='/documentation/builtin_drag.html'>Drag</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class='red item <%- current.source == 'faq' ? 'active' : '' %>' href='/documentation/faq.html'>
|
||||
FAQ
|
||||
<i class='icon help'></i>
|
||||
</a>
|
||||
<a class='green item <%- current.source == 'help' ? 'active' : '' %>' href='/documentation/help.html'>
|
||||
Getting Help
|
||||
<i class='icon phone'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='twelve wide column'>
|
||||
<%- yield %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<%- partial("../_ga") %>
|
||||
</body>
|
||||
</html>
|
||||
17
site/public/documentation/builtin.md
Normal file
17
site/public/documentation/builtin.md
Normal file
@ -0,0 +1,17 @@
|
||||
Built-In Plugins
|
||||
================
|
||||
|
||||
Planetary.js comes with several built-in plugins that provide a base set of functionality. (Note that the `planetaryjs-noplugins.js` file, as its name suggests, does not include the plugins). They are described in detail on their own pages, but are:
|
||||
|
||||
* [Earth](/documentation/builtin_earth.html) - a combination of the `topojson`, `oceans`, `land`, and `borders` plugins.
|
||||
* [TopoJSON](/documentation/builtin_topojson.html) - loads TopoJSON data via Ajax (or via configuration) and makes it available for use by other plugins
|
||||
* [Oceans](/documentation/builtin_oceans.html) - fills in the globe with a solid color
|
||||
* [Land](/documentation/builtin_land.html) - uses data from the `topojson` plugin to draw Earth's land masses
|
||||
* [Borders](/documentation/builtin_borders.html) - uses data from the `topojson` plugin to draw borders between Earth's countries
|
||||
* [Pings](/documentation/builtin_pings.html) - draws animated, circular pings on the globe
|
||||
* [Zoom](/documentation/builtin_zoom.html) - enables mouse-based zooming of the globe via the mouse wheel
|
||||
* [Drag](/documentation/builtin_drag.html) - enables mouse-based rotation of the globe via dragging
|
||||
|
||||
Built-in plugins are exposed as properties on `planetaryjs.plugins`.
|
||||
|
||||
If you do not specify any plugins (globally or per-instance), Planetary.js will use the `earth` and `pings` plugins with their default settings.
|
||||
30
site/public/documentation/builtin_borders.md
Normal file
30
site/public/documentation/builtin_borders.md
Normal file
@ -0,0 +1,30 @@
|
||||
Borders Plugin
|
||||
==============
|
||||
|
||||
The `borders` plugin renders the borders around (and between) countries. It uses TopoJSON data published to `planet.plugins.topojson.world` by the [TopoJSON plugin](/documentation/builtin_topojson.html). It uses the feature at `objects.countries` in the TopoJSON object to calculate the borders.
|
||||
|
||||
API
|
||||
---
|
||||
|
||||
**`planetaryjs.plugins.borders([config])`**
|
||||
|
||||
Valid keys for `config` are:
|
||||
|
||||
* `stroke`: the `strokeStyle` to use for the context; defaults to `"gray"`
|
||||
* `lineWidth` the `lineWidth` to set on the context; defaults to no value, and the context's `lineWidth` is not modified
|
||||
* `type`: valid options are `"internal"`, `"external"`, or `"both"`. `"internal"` draws borders between countries but not coastlines; `"external"` does the opposite. `"both"`, unsurprisingly, draws both. Defaults to `"internal"`.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planetaryjs.plugins.borders({
|
||||
stroke: '#008000', lineWidth: 0.25, type: 'both'
|
||||
});
|
||||
```
|
||||
</div>
|
||||
|
||||
See also:
|
||||
|
||||
* [Earth Plugin](/documentation/builtin_earth.html)
|
||||
* [TopoJSON Plugin](/documentation/builtin_topojson.html)
|
||||
25
site/public/documentation/builtin_drag.md
Normal file
25
site/public/documentation/builtin_drag.md
Normal file
@ -0,0 +1,25 @@
|
||||
Drag Plugin
|
||||
===========
|
||||
|
||||
The `drag` plugin allows for modifying the planet's projection's rotation with the mouse. It supports dragging vertically with hard stops at the north and south poles, and dragging horizontally without restriction.
|
||||
|
||||
API
|
||||
---
|
||||
|
||||
**`planetaryjs.plugins.drag([config])`**
|
||||
|
||||
Valid keys for `config` are:
|
||||
|
||||
* `onDragStart`, `onDragEnd`, `onDrag`, `afterDrag`: hooks to the `d3.behavior.drag` object's `dragstart`, `dragend`, and `drag` events; each defaults to a no-op. `onDrag` fires at the start of the `drag` event, `afterDrag` at the end. The planet instance is available as `this` inside the each of the functions.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planetaryjs.plugins.drag({
|
||||
onDrag: function() {
|
||||
console.log("The planet was dragged!", this, d3.event);
|
||||
}
|
||||
});
|
||||
```
|
||||
</div>
|
||||
36
site/public/documentation/builtin_earth.md
Normal file
36
site/public/documentation/builtin_earth.md
Normal file
@ -0,0 +1,36 @@
|
||||
Earth Plugin
|
||||
============
|
||||
|
||||
The `earth` plugin is simply a wrapper around the `topojson`, `oceans`, `land`, and `borders` plugins. It parses its configuration and passes pieces of it to the individual plugins.
|
||||
|
||||
API
|
||||
---
|
||||
|
||||
**`planetaryjs.plugins.earth([config])`**
|
||||
|
||||
Valid keys for `config` are:
|
||||
|
||||
* `topojson`: options to pass to the `topojson` plugin
|
||||
* `oceans`: options to pass to the `oceans` plugin
|
||||
* `land`: options to pass to the `land` plugin
|
||||
* `borders`: options to pass to the `borders` plugin
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planetaryjs.plugins.earth({
|
||||
topojson: { file: 'world-110m.json' },
|
||||
oceans: { fill: '#000080' },
|
||||
land: { fill: '#339966' },
|
||||
borders: { stroke: '#008000' }
|
||||
});
|
||||
```
|
||||
</div>
|
||||
|
||||
See also:
|
||||
|
||||
* [TopoJSON Plugin](/documentation/builtin_topojson.html)
|
||||
* [Oceans Plugin](/documentation/builtin_oceans.html)
|
||||
* [Land Plugin](/documentation/builtin_land.html)
|
||||
* [Borders Plugin](/documentation/builtin_borders.html)
|
||||
30
site/public/documentation/builtin_land.md
Normal file
30
site/public/documentation/builtin_land.md
Normal file
@ -0,0 +1,30 @@
|
||||
Land Plugin
|
||||
===========
|
||||
|
||||
The `land` plugin renders Earth's landmasses. It uses TopoJSON data published to `planet.plugins.topojson.world` by the [TopoJSON plugin](/documentation/builtin_topojson.html). It uses the feature at `objects.land` in the TopoJSON object.
|
||||
|
||||
API
|
||||
---
|
||||
|
||||
**`planetaryjs.plugins.land([config])`**
|
||||
|
||||
Valid keys for `config` are:
|
||||
|
||||
* `fill`: the `fillStyle` to use for the context; defaults to `"white"`
|
||||
* `stroke`: the `strokeStyle` to use for the context; defaults to no value, resulting in no stroke around the landmasses
|
||||
* `lineWidth` the `lineWidth` to set on the context; only effective if `stroke` is set. Defaults to no value, resulting in no change to the context's `lineWidth`
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planetaryjs.plugins.land({
|
||||
fill: '#339966', stroke: '#000000'
|
||||
});
|
||||
```
|
||||
</div>
|
||||
|
||||
See also:
|
||||
|
||||
* [Earth Plugin](/documentation/builtin_earth.html)
|
||||
* [TopoJSON Plugin](/documentation/builtin_topojson.html)
|
||||
27
site/public/documentation/builtin_oceans.md
Normal file
27
site/public/documentation/builtin_oceans.md
Normal file
@ -0,0 +1,27 @@
|
||||
Oceans Plugin
|
||||
=============
|
||||
|
||||
The `oceans` plugin simply renders the main shape of the globe, filling it in with a solid color.
|
||||
|
||||
API
|
||||
---
|
||||
|
||||
**`planetaryjs.plugins.oceans([config])`**
|
||||
|
||||
Valid keys for `config` are:
|
||||
|
||||
* `fill`: the `fillStyle` to use for the globe; defaults to `"black"`
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planetaryjs.plugins.oceans({
|
||||
fill: '#000080'
|
||||
});
|
||||
```
|
||||
</div>
|
||||
|
||||
See also:
|
||||
|
||||
* [Earth Plugin](/documentation/builtin_earth.html)
|
||||
55
site/public/documentation/builtin_pings.md
Normal file
55
site/public/documentation/builtin_pings.md
Normal file
@ -0,0 +1,55 @@
|
||||
Pings Plugin
|
||||
============
|
||||
|
||||
The `pings` plugin allows you to display animated "pings" at any location on the planet. It publishes a method to create pings at `planet.plugins.pings.add`.
|
||||
|
||||
API
|
||||
---
|
||||
|
||||
**`planetaryjs.plugins.pings([config])`**
|
||||
|
||||
Valid keys for `config` are:
|
||||
|
||||
* `color`: the default color for pings; defaults to `"white"`
|
||||
* `ttl`: the default TTL for pings in milliseconds (how long they take to fade out); defaults to 2000
|
||||
* `angle`: the maximum angle for the ping (it will grow to this size over the course of its TTL); defaults to `5`
|
||||
* `latitudeFirst`: reverse the order of the latitudinal and longitudinal coordinates passed to the `add` function (so that the latitudinal coordinate comes first); defaults to false. See the note on `add`, below, for more information.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planetaryjs.plugins.pings({
|
||||
color: 'yellow', ttl: 5000, angle: 10
|
||||
});
|
||||
```
|
||||
</div>
|
||||
|
||||
**`planet.plugins.pings.add(lng, lat, [config])`**
|
||||
|
||||
Add a new ping to the globe at the longitudinal and latitudinal coordinates specified by `lng` and `lat`. Valid keys for `config` are:
|
||||
|
||||
* `color`: the default color for pings; defaults to `"white"`
|
||||
* `ttl`: the default TTL for pings in milliseconds (how long they take to fade out); defaults to 2000
|
||||
* `angle`: the maximum angle for the ping (it will grow to this size over the course of its TTL); defaults to `5`
|
||||
|
||||
Any values not set by `config` will default to the values specified in the plugin's configuration, if any were set.
|
||||
|
||||
<div class='ui red raised segment'>
|
||||
<i class='red icon warning'></i> **Note that the longitudinal coordinate comes first, followed by the latitudinal coordinate, unless you pass `latitudeFirst` as an option to the plugin configuration function.** This corresponds to the conventions used by D3 (which Planetary.js is based on); for more information on the problem of axis ordering in software, see [this article at the GeoTools web site](http://docs.geotools.org/latest/userguide/library/referencing/order.html).
|
||||
</div>
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
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)];
|
||||
var angle = Math.random() * 10;
|
||||
planet.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: angle });
|
||||
}, 250);
|
||||
```
|
||||
</div>
|
||||
49
site/public/documentation/builtin_topojson.md
Normal file
49
site/public/documentation/builtin_topojson.md
Normal file
@ -0,0 +1,49 @@
|
||||
TopoJSON Plugin
|
||||
===============
|
||||
|
||||
The `topojson` plugin parses [TopoJSON data](https://github.com/mbostock/topojson) and publishes it on `planet.plugins.topojson.world` for other plugins to use (particularly for rendering geographical data using D3).
|
||||
|
||||
The plugin can load data from a file using Ajax, or can be provided an object that has come from some other source.
|
||||
|
||||
API
|
||||
---
|
||||
|
||||
**`planetaryjs.plugins.topojson([config])`**
|
||||
|
||||
Valid keys for `config` are:
|
||||
|
||||
* `world`: a JavaScript object representing TopoJSON data (not a JSON string); defaults to no value, which will cause the plugin to load data from the `file` configuration option
|
||||
* `file`: the path to a TopoJSON data file to be loaded via Ajax; defaults to `"world-110m.json"`, which can be downloaded with the Planetary.js library from the [download page](/download/).
|
||||
|
||||
If you plan on creating more than one planet from the same TopoJSON data, you can load the data once before loading the plugin and pass the parsed data to the plugin via the `world` property rather than letting the plugin load the data via Ajax each time a new planet is created.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planetaryjs.plugins.topojson({
|
||||
file: '/data/world-110m.json'
|
||||
});
|
||||
```
|
||||
</div>
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
d3.json('/data/world-110m.json', function(err, data) {
|
||||
planetaryjs.plugins.topojson({
|
||||
world: data
|
||||
});
|
||||
// Create planets inside this callback
|
||||
});
|
||||
```
|
||||
</div>
|
||||
|
||||
**`planet.plugins.topojson.world`**
|
||||
|
||||
The plugin will publish the TopoJSON data to this key once it has been initialized by the plugin.
|
||||
|
||||
* [Earth Plugin](/documentation/builtin_earth.html)
|
||||
* [Land Plugin](/documentation/builtin_land.html)
|
||||
* [Borders Plugin](/documentation/builtin_borders.html)
|
||||
28
site/public/documentation/builtin_zoom.md
Normal file
28
site/public/documentation/builtin_zoom.md
Normal file
@ -0,0 +1,28 @@
|
||||
Zoom Plugin
|
||||
===========
|
||||
|
||||
The `zoom` plugin allows for modifying the planet's projection's scale with the mouse wheel.
|
||||
|
||||
API
|
||||
---
|
||||
|
||||
**`planetaryjs.plugins.zoom([config])`**
|
||||
|
||||
Valid keys for `config` are:
|
||||
|
||||
* `initialScale`: the value to initialize the [`d3.behavior.zoom`](https://github.com/mbostock/d3/wiki/Zoom-Behavior) object's scale to; defaults to the scale of the planet's projection at the time the planet is initialized
|
||||
* `scaleExtent`: the value to use for the `d3.behavior.zoom` object's `scaleExtent` property, which defines how far in and out the planet can be zoomed; defaults to `[50, 2000]`
|
||||
* `onZoomStart`, `onZoomEnd`, `onZoom`, `afterZoom`: hooks to the `d3.behavior.zoom` object's `zoomstart`, `zoomend`, and `zoom` events; each defaults to a no-op. `onZoom` fires at the start of the `zoom` event, `afterZoom` at the end. The planet instance is available as `this` inside the each of the functions.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planetaryjs.plugins.zoom({
|
||||
scaleExtent: [200, 1000],
|
||||
onZoom: function() {
|
||||
console.log("The planet was zoomed!", this, d3.event);
|
||||
}
|
||||
});
|
||||
```
|
||||
</div>
|
||||
44
site/public/documentation/core.md
Normal file
44
site/public/documentation/core.md
Normal file
@ -0,0 +1,44 @@
|
||||
Core API
|
||||
========
|
||||
|
||||
Core API
|
||||
--------
|
||||
|
||||
**`planetaryjs.noConflict()`**
|
||||
|
||||
In non-AMD and non-CommonJS environments, Planetary.js takes over the global `planetaryjs` namespace (in the browser, this means `window.planetaryjs`). If, for some reason, something else useful was there before you loaded Planetary.js, you can ask for it to be returned to that spot by calling `planetaryjs.noConflict()`. The Planetary.js library will be returned from the function, so you can continue to use the library.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
var planetary = planetaryjs.noConflict();
|
||||
```
|
||||
</div>
|
||||
|
||||
**`planetaryjs.loadPlugin(plugin)`**
|
||||
|
||||
Planetary.js uses a plugin architecture for all its functionality. Calling `planetaryjs.loadPlugin` will cause that plugin to be loaded in *all* planets created from this library. If you only want to use a plugin in some of your planets, use the `planet.loadPlugin` method (from the [Planet API](/documentation/planet.html)) instead.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planetaryjs.loadPlugin(somePlugin);
|
||||
planetaryjs.loadPlugin(somePluginGenerator());
|
||||
```
|
||||
</div>
|
||||
|
||||
For more information on the plugin system and API, please see the [Plugins documentation](/documentation/plugins.html).
|
||||
|
||||
**`planetaryjs.planet()`**
|
||||
|
||||
The `planet` API call returns a new planet instance, which represents a single globe. It will be created with all the plugins registered with `planetaryjs.loadPlugin` active. It has various methods for manipulating the globe and drawing it to a canvas. The [Planet API](/documentation/planet.html) covers these methods in considerably more detail.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
var planet = planetaryjs.planet();
|
||||
```
|
||||
</div>
|
||||
47
site/public/documentation/faq.md
Normal file
47
site/public/documentation/faq.md
Normal file
@ -0,0 +1,47 @@
|
||||
FAQ
|
||||
===
|
||||
|
||||
**Q:** Why are the pings I add from the [Pings plugin](/documentation/builtin_pings.html) in the wrong place?
|
||||
|
||||
**A:** Like D3 on which it is based, Planetary.js accepts coordinates with the longitudinal coordinate first. You can set the `latitudeFirst` option in the plugin configuration to change this. There is some additional discussion on the subject in the [Pings plugin documentation](/documentation/builtin_pings.html).
|
||||
|
||||
<div class="ui horizontal icon divider">
|
||||
<i class="globe icon"></i>
|
||||
</div>
|
||||
|
||||
**Q:** Why can't I access my DOM element?
|
||||
|
||||
**A:** 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.
|
||||
|
||||
<div class="ui horizontal icon divider">
|
||||
<i class="globe icon"></i>
|
||||
</div>
|
||||
|
||||
**Q:** Why doesn't my `canvas` element work with Planetary.js?
|
||||
|
||||
**A:** 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 `draw` method.
|
||||
|
||||
<div class="ui horizontal icon divider">
|
||||
<i class="globe icon"></i>
|
||||
</div>
|
||||
|
||||
**Q:** Why can't I load the `world-110m.json` file with the TopoJSON plugin?
|
||||
|
||||
**A:** After checking to make sure you've specified the correct path to the file in the plugin's configuration options, ensure that you're viewing your page over HTTP. Your browser won't be able to make the necessary Ajax request to load the file if you're just viewing the page from your filesystem.
|
||||
|
||||
<div class="ui horizontal icon divider">
|
||||
<i class="globe icon"></i>
|
||||
</div>
|
||||
|
||||
**Q:** How do I manipulate my globe?
|
||||
|
||||
**A:** The planet object has methods and properties for manipulating the globe; most notable is the `projection` property. See the [Planet API](/documentation/planet.html) for more information.
|
||||
|
||||
<div class="ui horizontal icon divider">
|
||||
<i class="globe icon"></i>
|
||||
</div>
|
||||
|
||||
**Q:** I'm getting "Cannot read property 'geo' of undefined" or "Cannot call method 'feature' of undefined."
|
||||
|
||||
**A:** Ensure you're requiring the [D3](http://d3js.org/) and [TopoJSON](https://github.com/mbostock/topojson) libraries before Planetary.js.
|
||||
8
site/public/documentation/help.md
Normal file
8
site/public/documentation/help.md
Normal file
@ -0,0 +1,8 @@
|
||||
Getting Help
|
||||
============
|
||||
|
||||
[Stack Overflow](http://stackoverflow.com/) is a great place to get help when you're stuck on a particular issue. Tag your question with `planetary.js` when you post it.
|
||||
|
||||
If you think you've found a bug, hop over to [the Planetary.js issues page](https://github.com/BinaryMuse/planetary.js/issues) and file a bug (assuming the same bug hasn't already been reported).
|
||||
|
||||
If you have an idea for an improvement or other change, feel free to open a GitHub pull request.
|
||||
55
site/public/documentation/index.md
Normal file
55
site/public/documentation/index.md
Normal file
@ -0,0 +1,55 @@
|
||||
Introduction
|
||||
============
|
||||
|
||||
Planetary.js is a JavaScript library for building awesome interactive globes. It uses [D3](http://d3js.org/) and [TopoJSON](https://github.com/mbostock/topojson) to parse and render geographic data. Planetary.js uses a plugin-based architecture; even the default functionality is implemented as plugins! This makes Planetary.js extremely flexible.
|
||||
|
||||
The documentation is split up into several sections:
|
||||
|
||||
* [Core API](/documentation/core.html) describes the top-level Planetary.js API, including installing and configuring the library and creating new planet instances.
|
||||
* [Planet API](/documentation/planet.html) describes the API associated with a planet instance, including modifying its properties and accessing a special canvas context that allows you to draw on the globe.
|
||||
* [Plugins](/documentation/plugins.html) describes the plugin architecture of Planetary.js and shows how you can easily build your own plugins to modify the behavior of Planetary.js.
|
||||
* [Built-In Plugins](/documentation/builtin.html) describes each of the built-in plugins in turn, including their public API and how to use them in a project.
|
||||
* [FAQ](/documentation/faq.html) answers some common question and addresses a few easy-to-miss gotchas.
|
||||
* [Getting Help](/documentation/help.html) describes what to do if you still need help after reading this documentation.
|
||||
|
||||
Quick Start
|
||||
-----------
|
||||
|
||||
If you want to get up-and-running quickly, or like to experiment and figure things out, you can use this HTML and JavaScript to get a very simple globe up and running (once you've [installed Planetary.js](/documentation/installation.html)).
|
||||
|
||||
Note that you'll need to run this page from a web server of some kind so that Planetary.js can load the TopoJSON data via Ajax (Ajax requests don't work when viewing a page directly from the filesystem).
|
||||
|
||||
Be sure to check out [the examples](/examples/) as well!
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui blue ribbon label'>HTML</div>
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
|
||||
<script type='text/javascript' src='http://d3js.org/topojson.v1.min.js'></script>
|
||||
<script type='text/javascript' src='planetaryjs.min.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='globe' width='500' height='500'></canvas>
|
||||
<script type='text/javascript' src='yourApp.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
var planet = planetaryjs.planet();
|
||||
// You can remove this statement if `world-110m.json`
|
||||
// is in the same path as the HTML page:
|
||||
planet.loadPlugin(planetaryjs.plugins.earth({
|
||||
topojson: { file: 'http/path/to/world-110m.json' }
|
||||
}));
|
||||
// Make the planet fit well in its canvas
|
||||
planet.projection.scale(250).translate([250, 250]);
|
||||
var canvas = document.getElementById('globe');
|
||||
planet.draw(canvas);
|
||||
```
|
||||
</div>
|
||||
97
site/public/documentation/installation.md
Normal file
97
site/public/documentation/installation.md
Normal file
@ -0,0 +1,97 @@
|
||||
Installation
|
||||
============
|
||||
|
||||
Once you've [downloaded Planetary.js](/download/), you can include it via a `script` tag on your page *after* the inclusion of D3 and TopoJSON. This example uses the CDN URLs for those libraries:
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui blue ribbon label'>HTML</div>
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
|
||||
<script type='text/javascript' src='http://d3js.org/topojson.v1.min.js'></script>
|
||||
<script type='text/javascript' src='path/to/planetaryjs.min.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
...
|
||||
```
|
||||
</div>
|
||||
|
||||
If you use the default `topojson` plugin (most people will), you'll also need to make sure `world-110m.json` (or some other TopoJSON data file) is available on your server. This file is also available from [the download page](/download/). See the [TopoJSON Plugin documentation](/documentation/builtin_topojson.html) for more information.
|
||||
|
||||
Planetary.js also supports installation via AMD and CommonJS loaders.
|
||||
|
||||
AMD
|
||||
---
|
||||
|
||||
This example uses [RequireJS](http://requirejs.org/). Since neither D3 nor TopoJSON support AMD, we will use RequireJS's [shim configuration](http://requirejs.org/docs/api.html#config-shim).
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui blue ribbon label'>HTML</div>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<canvas id='globe' width='500' height='500'></canavs>
|
||||
<script src='//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js'
|
||||
data-main='/app.js'></script>
|
||||
</body>
|
||||
```
|
||||
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
requirejs.config({
|
||||
// Tell RequireJS to use `window.d3` and `window.topojson`
|
||||
// for those libraries, respectively
|
||||
shim: {
|
||||
d3: { exports: 'd3' },
|
||||
topojson: { exports: 'topojson' }
|
||||
},
|
||||
paths: {
|
||||
'd3': 'path/to/d3.v3.min',
|
||||
'topojson': 'path/to/topojson.v1.min'
|
||||
}
|
||||
});
|
||||
|
||||
requirejs(['planetaryjs'], function(planetaryjs) {
|
||||
// Use Planetary.js here
|
||||
});
|
||||
|
||||
```
|
||||
</div>
|
||||
|
||||
CommonJS
|
||||
--------
|
||||
|
||||
First, install `browserify` from npm (as well as `planetary.js` v1.0.2+, if you haven't already). Then, create your application (here referred to as `app.js`) and bundle it with browserify.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
var planetaryjs = require('planetary.js');
|
||||
|
||||
var planet = planetaryjs.planet();
|
||||
var canvas = document.getElementById('canvas');
|
||||
planet.draw(canvas);
|
||||
```
|
||||
|
||||
<div class='ui purple ribbon label'>Shell</div>
|
||||
|
||||
```shell
|
||||
$ npm install browserify
|
||||
$ ./node_modules/.bin/browserify app.js > bundle.js
|
||||
```
|
||||
</div>
|
||||
|
||||
`bundle.js` is now ready to use! You may need to set the `charset` option on your script tag:
|
||||
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui blue ribbon label'>HTML</div>
|
||||
|
||||
```html
|
||||
<script type='text/javascript' src='bundle.js' charset='utf-8'></script>
|
||||
```
|
||||
</div>
|
||||
176
site/public/documentation/planet.md
Normal file
176
site/public/documentation/planet.md
Normal file
@ -0,0 +1,176 @@
|
||||
Planet API
|
||||
==========
|
||||
|
||||
A "planet" represents a single globe and its rendering instructions. It is created from the `planetaryjs.planet` method; see the [Core API documentation](/documentation/core.html) for more details.
|
||||
|
||||
**`planet.loadPlugin(plugin)`**
|
||||
|
||||
Planetary.js uses a plugin architecture for all its functionality. While you can load plugins at the global library level, Planetary.js also allows you to load plugins for specific planets. **If a planet is drawn and no plugins have been loaded globally and no plugins have been loaded for the specific planet instance, it will use the default `earth` and `pings` plugins.**
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planet.loadPlugin(somePlugin);
|
||||
planet.loadPlugin(somePluginGenerator());
|
||||
```
|
||||
</div>
|
||||
|
||||
For more information on the plugin system and API, please see the [Plugins documentation](/documentation/plugins.html).
|
||||
|
||||
**`planet.projection`**
|
||||
|
||||
The core of a planet's data model is an [`d3.geo.projection`](https://github.com/mbostock/d3/wiki/Geo-Projections) (specifically, an orthographic projection), which is exposed by a planet by `planet.projection`. You can use this object to control various aspects of the planet. The D3 documentation covers the methods in considerable detail, so [be sure to check it out](https://github.com/mbostock/d3/wiki/Geo-Projections); many of the examples on this site also use the projection object to operate.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planet.projection
|
||||
.scale(width / 2)
|
||||
.translate([width / 2, height / 2])
|
||||
.rotate([60, -10, 0]);
|
||||
```
|
||||
</div>
|
||||
|
||||
**`planet.path`**
|
||||
|
||||
`planet.path` is a [`d3.geo.path`](https://github.com/mbostock/d3/wiki/Geo-Paths) which uses the planet's internal projection to generate path data for geographical features. Its `context` method is commonly used by internal plugins to take a canvas context and return a path generator that can be used to draw on the globe.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
canvasContext.beginPath();
|
||||
planet.path.context(canvasContext)(geoFeature);
|
||||
canvasContext.fill();
|
||||
```
|
||||
</div>
|
||||
|
||||
**`planet.plugins`**
|
||||
|
||||
Planetary.js provides an empty object that plugins may use to store public data and methods. If a plugin is well-behaved, it will keep all its properties on the object under a single key (usually one that share's the plugin's name).
|
||||
|
||||
**`planet.canvas` and `planet.context`**
|
||||
|
||||
Once you call `draw` on a planet instance, Planetary.js will set the `canvas` and `context` properties to the canvas and its context, respectively.
|
||||
|
||||
**`planet.onInit( function([done]){} )`**
|
||||
|
||||
Registers a function to be called when the planet is initialized (which happens after a call to `draw` and after any registered plugins have been loaded). This is mostly used by plugins to initialize themselves when the planet "boots."
|
||||
|
||||
If the provided callback function takes any parameters, it will be a "done" function that must be called once the initialization function finishes any asynchronous work before the planet will continue to initialize.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planet.onInit(function() {
|
||||
doSomeSetupStuff();
|
||||
});
|
||||
|
||||
planet.onInit(function(done) {
|
||||
doSomeAsynchronousSetupStuff(function() {
|
||||
done();
|
||||
});
|
||||
});
|
||||
```
|
||||
</div>
|
||||
|
||||
**`planet.onDraw( function(){} )`**
|
||||
|
||||
Registers a function to be called each time the globe redraws itself. This is mostly used by plugins to draw plugin-specific data or otherwise animate the globe.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planet.onDraw(function() {
|
||||
var rotation = planet.projection.rotate();
|
||||
rotation[0] += 1;
|
||||
if (rotation[0] >= 180) rotation[0] -= 360;
|
||||
planet.projection.rotate(rotation);
|
||||
});
|
||||
```
|
||||
</div>
|
||||
|
||||
**`planet.onStop( function(){} )`**
|
||||
|
||||
Registers a function to be called when the planet is stopped with the `stop` method. This can be used to clean up timers and remove references to internal planet properties and plugins, if necessary, so that it can be property garbage collected.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
var interval = setInterval(function() {
|
||||
addRandomPing(planet); // uses `planet.plugins.pings`
|
||||
}, 150);
|
||||
|
||||
planet.onStop(function() {
|
||||
clearInterval(interval);
|
||||
});
|
||||
```
|
||||
</div>
|
||||
|
||||
**`planet.withSavedContext( function(context){} )`**
|
||||
|
||||
Calls the function with the current canvas context as a parameter, wrapping the function call in `context.save()` and `context.restore()`. Use this function any time you're going to modify the context to ensure it gets put back to the way it was.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planet.onDraw(function() {
|
||||
planet.withSavedContext(function(context) {
|
||||
context.beginPath();
|
||||
planet.path.context(context)({type: 'Sphere'});
|
||||
context.fillStyle = 'black';
|
||||
context.fill();
|
||||
});
|
||||
});
|
||||
```
|
||||
</div>
|
||||
|
||||
**`planet.draw(canvas)`**
|
||||
|
||||
Begins drawing the globe onto the given canvas. `canvas` should be a raw DOM element (e.g. as returned by `document.getElementById`). Specifically, if it is wrapped by D3 or jQuery, you need to unwrap it with something like `wrappedCanvas[0]`.
|
||||
|
||||
Calling `draw` will perform the following operations:
|
||||
|
||||
1. Initialize each loaded plugin by calling the plugin function (note: this only happens the first time you call `draw`).
|
||||
2. Set `planet.canvas` and `planet.context` to the canvas and the canvas' context, respectively.
|
||||
3. Run each registered `onInit` hook in the order it was registered (note that `onInit` calls made by plugins will not be made until step 1, after `draw` has been called).
|
||||
4. Start the animation loop, each tick clearing the canvas and calling any registered `onDraw` hooks in order.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui blue ribbon label'>HTML</div>
|
||||
|
||||
```html
|
||||
<canvas id='myCanvas' width='123' height='456'></canvas>
|
||||
```
|
||||
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
var canvas = document.getElementById('myCanvas');
|
||||
planet.draw(canvas);
|
||||
```
|
||||
</div>
|
||||
|
||||
Once you've called `draw()` on a planet, you should not call it again unless you first call `stop()`.
|
||||
|
||||
**`planet.stop()`**
|
||||
|
||||
Stop drawing the planet to the canvas. This disables the internal draw loop. You can register functions to call when the planet is stopped using the `onStop` method; if you don't plan on reusing the planet, be sure to clean up timers and references to internal properties, if necessary, so that it can be garbage collected.
|
||||
|
||||
You can draw the planet to a new (or the same) canvas using the `draw` method as normal. All your plugins' `onInit` functions will fire, although the plugin function itself will not be called again.
|
||||
|
||||
Keep in mind that, since the internal draw loop is stopped, your plugins' `onDraw` functions are not being called. If you have timers or other mechanisms that continually push data into a data structure that an `onDraw` method cleans up, you should disable or pause it.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planet.stop();
|
||||
```
|
||||
</div>
|
||||
189
site/public/documentation/plugins.md
Normal file
189
site/public/documentation/plugins.md
Normal file
@ -0,0 +1,189 @@
|
||||
Plugins
|
||||
=======
|
||||
|
||||
Planetary.js uses a plugin-based architecture, and all the built-in functionality is built using this architecture. This makes Planetary.js extremely flexible.
|
||||
|
||||
Loading Plugins
|
||||
---------------
|
||||
|
||||
Plugins are loaded either globally by `planetaryjs.loadPlugin` or for a specific planet instance by `planet.loadPlugin`. If you call `draw` on a planet and it has no plugins loaded at all (from either source), Planetary.js will use the default plugin stack, which consists of the `earth` and `pings` plugins.
|
||||
|
||||
Anatomy of a Plugin
|
||||
-------------------
|
||||
|
||||
A plugin is simply a JavaScript function that takes a planet instance as a parameter and performs some operation on it. **The best plugins do one tiny thing.** If you want a plugin to do a lot of things at once, you should build a plugin that wraps other, smaller plugins; in fact, this is exactly how the `earth` plugin is built. See the [Earth Plugin documentation](/documentation/builtin_earth.html) for more details.
|
||||
|
||||
Most of the time, a plugin will implement its behavior by registering callbacks into a planet's lifecycle hooks. For example, the following simple plugin increments the planet's projection's rotation by one degree every tick (this would make for a very fast spinning globe, but demonstrates the idea nicely enough):
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
var autorotate = function(planet) {
|
||||
planet.onDraw(function() {
|
||||
var rotation = planet.projection.rotate();
|
||||
rotation[0] += 1;
|
||||
if (rotation[0] >= 180) rotation[0] -= 360;
|
||||
planet.projection.rotate(rotation);
|
||||
});
|
||||
};
|
||||
|
||||
planet.loadPlugin(autorotate);
|
||||
```
|
||||
</div>
|
||||
|
||||
Configurable Plugins
|
||||
--------------------
|
||||
|
||||
Often, you'll want your plugin to be configurable with some user-defined values. In this case, you can create a higher-order function, which takes your configuration data and then *returns* the plugin function. You can then call this function to generate the plugin for use by `loadPlugin`.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
var autorotate = function(degreesPerTick) {
|
||||
return function(planet) {
|
||||
planet.onDraw(function() {
|
||||
var rotation = planet.projection.rotate();
|
||||
rotation[0] += degreesPerTick;
|
||||
if (rotation[0] >= 180) rotation[0] -= 360;
|
||||
planet.projection.rotate(rotation);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
planet.loadPlugin(autorotate(5));
|
||||
```
|
||||
</div>
|
||||
|
||||
Setting Yourself Up
|
||||
-------------------
|
||||
|
||||
If you need to do some work before your plugin is ready to be used, you can add a hook to a planet's `onInit` hook to do the necessary setup.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
var somePlugin = function(planet) {
|
||||
planet.onInit(function() {
|
||||
doSomeSetupWork();
|
||||
});
|
||||
};
|
||||
```
|
||||
</div>
|
||||
|
||||
If you need to do some asynchronous setup--such as fetching data with an Ajax request--before your plugin is ready, you can accept an argument to your `onInit` function. This argument is a function that tells Planetary.js when you're done setting up; simply call this function after your asynchronous operations are complete and Planetary.js will continue to initialize the planet. **If you accept the parameter but don't call it, the initialization process will stop** (and your planet will not work).
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
var somePlugin = function(planet) {
|
||||
planet.onInit(function(done) {
|
||||
doSomeAsynchronousSetupWork(function() {
|
||||
done();
|
||||
});
|
||||
});
|
||||
};
|
||||
```
|
||||
</div>
|
||||
|
||||
Drawing on the Canvas
|
||||
---------------------
|
||||
|
||||
Many plugins will want to draw onto the globe's canvas; you can do so by registering a function to a planet's `onDraw` hook.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
var somePlugin = function(planet) {
|
||||
planet.onDraw(function() {
|
||||
planet.withSavedContext(function(context) {
|
||||
context.beginPath();
|
||||
planet.path.context(context)({type: 'Sphere'});
|
||||
context.fillStyle = 'black';
|
||||
context.fill();
|
||||
});
|
||||
});
|
||||
};
|
||||
```
|
||||
</div>
|
||||
|
||||
The planet exposes properties and methods, such as `context`, `path`, and `withSavedContext` to assist with drawing to the canvas. The [Planet API documentation](/documentation/planet.html) goes into more detail on individual properties.
|
||||
|
||||
### Drawing Geo Paths
|
||||
|
||||
As explained in the `planet.path` documentation on the [Planet API page](/documentation/planet.html), `planet.path` is a [`d3.geo.path`](https://github.com/mbostock/d3/wiki/Geo-Paths) object that can be used to draw geographical geometry onto the canvas. The path will take care of transforming the coordinates to be projected onto the orthographic view of the globe.
|
||||
|
||||
As a demonstration of this technique, the following is a plugin that will take the land data from a TopoJSON data source (stored on `planet.plugins.topojson.world`), convert it to a GeoJSON feature, and draw it on the planet. This code is similar to (but slightly simplified from) the [Land plugin's](/documentation/builtin_land.html) implementation.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
var drawLand = function(planet) {
|
||||
planet.onDraw(function() {
|
||||
planet.withSavedContext(function(context) {
|
||||
var world = planet.plugins.topojson.world;
|
||||
var land = topojson.feature(world, world.objects.land);
|
||||
|
||||
context.beginPath();
|
||||
planet.path.context(context)(land);
|
||||
context.fillStyle = 'white';
|
||||
context.fill();
|
||||
});
|
||||
});
|
||||
};
|
||||
```
|
||||
</div>
|
||||
|
||||
Exposing Data and Methods
|
||||
-------------------------
|
||||
|
||||
Obviously, you can use private internal variables to keep track of any data your plugin needs in order to operate. However, if you want to expose a public API to users of your plugin, you should avoid attaching them directly to the planet and instead attach them to the planet's `plugins` namespace. You should use a name specific to your plugin, and this name should be well documented in your plugin's documentation.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
var autorotate = function(degreesPerTick) {
|
||||
return function(planet) {
|
||||
var paused = false;
|
||||
|
||||
// Attach our public API to `planet.plugins`
|
||||
// on the `autorotate` namespace.
|
||||
planet.plugins.autorotate = {
|
||||
pause: function() { paused = true; },
|
||||
resume: function() { paused = false; }
|
||||
};
|
||||
|
||||
planet.onDraw(function() {
|
||||
if (paused) return;
|
||||
|
||||
var rotation = planet.projection.rotate();
|
||||
rotation[0] += degreesPerTick;
|
||||
if (rotation[0] >= 180) rotation[0] -= 360;
|
||||
planet.projection.rotate(rotation);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
planet.loadPlugin(autorotate(5));
|
||||
planet.draw(canvas);
|
||||
setTimeout(function() {
|
||||
planet.plugins.autorotate.pause();
|
||||
}, 5000);
|
||||
```
|
||||
</div>
|
||||
|
||||
Best Practices
|
||||
--------------
|
||||
|
||||
There are a few things you can do to make your plugin all it can be:
|
||||
|
||||
1. Make your plugin very small; ideally, it should do only *one thing* very well. Be extremely liberal with splitting plugins into smaller plugins, which makes them easier to understand, test, and compose. It's easy to say "this plugin renders the Earth," but it really renders oceans, land masses, and borders.
|
||||
2. Use higher-order functions to generate your plugin (as described above in "Plugin Generators") instead of passing function references to `loadPlugin` directly, even if your plugin doesn't take any configuration options. It makes for a more consistent API, and allows you to more easily add the ability to specify configuration options in the future.
|
||||
3. Make configuration optional if at all possible. Write your plugin so that it checks for missing values and uses sensible defaults.
|
||||
4. Only publish public data and API methods to `planet.plugins.pluginName`, where `pluginName` is the name of your plugin.
|
||||
12
site/public/download/_data.json
Normal file
12
site/public/download/_data.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"stable": {
|
||||
"latest": {
|
||||
"version": "v1.1.2"
|
||||
}
|
||||
},
|
||||
"unstable": {
|
||||
"latest": {
|
||||
"version": "v1.0.0-rc.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
19
site/public/download/_layout.ejs
Normal file
19
site/public/download/_layout.ejs
Normal file
@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<%- partial("../_header") %>
|
||||
<link href="/css/prism.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<%- partial("../_menu") %>
|
||||
|
||||
<div class='content container'>
|
||||
<div class='page ui slim stackable grid'>
|
||||
<div class='sixteen wide column'>
|
||||
<%- yield %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%- partial("../_ga") %>
|
||||
</body>
|
||||
</html>
|
||||
99
site/public/download/index.ejs
Normal file
99
site/public/download/index.ejs
Normal file
@ -0,0 +1,99 @@
|
||||
<% data = public.download._data %>
|
||||
<% dl = function(version, file) { %>
|
||||
<% return "https://github.com/BinaryMuse/planetary.js/releases/download/" + version + "/" + file; %>
|
||||
<% } %>
|
||||
|
||||
<h1><i class='icon download disk'></i> Download Planetary.js</h1>
|
||||
|
||||
<p>Download the core Planetary.js library and supporting files here.</p>
|
||||
|
||||
<p>Up-to-the-minute releases, archived versions, and full release notes can be found <a href='https://github.com/BinaryMuse/planetary.js/releases'>on the GitHub releases page</a>.</p>
|
||||
|
||||
<% if (data.stable.latest) { %>
|
||||
<h2>Latest Stable Build: <%= data.stable.latest.version %></h2>
|
||||
<p><a href="https://github.com/BinaryMuse/planetary.js/releases/tag/<%= data.stable.latest.version %>">Release notes</a>
|
||||
|
|
||||
<a href="https://github.com/BinaryMuse/planetary.js/tree/<%= data.stable.latest.version %>">GitHub tag</a></p>
|
||||
|
||||
<div class='ui list download-list'>
|
||||
<div class='item'>
|
||||
<i class='icon download'></i>
|
||||
Core library: [
|
||||
<a href='<%= dl(data.stable.latest.version, 'planetaryjs.min.js') %>'>minified</a>
|
||||
|
|
||||
<a href='<%= dl(data.stable.latest.version, 'planetaryjs.js') %>'>unminified</a>
|
||||
]
|
||||
</div>
|
||||
<div class='item'>
|
||||
<i class='icon download'></i>
|
||||
Core library (no plugins): [
|
||||
<a href='<%= dl(data.stable.latest.version, 'planetaryjs-noplugins.min.js') %>'>minified</a>
|
||||
|
|
||||
<a href='<%= dl(data.stable.latest.version, 'planetaryjs-noplugins.js') %>'>unminified</a>
|
||||
]
|
||||
</div>
|
||||
<div class='item'>
|
||||
<i class='icon globe'></i>
|
||||
Earth TopoJSON data ("land" and "countries" objects): [
|
||||
<a href='<%= dl(data.stable.latest.version, 'world-110m.json') %>'>download</a>
|
||||
]
|
||||
</div>
|
||||
<div class='item'>
|
||||
<i class='icon code'></i>
|
||||
Source code [
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/archive/<%= data.stable.latest.version %>.zip'>.zip</a>
|
||||
|
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/archive/<%= data.stable.latest.version %>.tar.gz'>.tar.gz</a>
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% } else { %>
|
||||
<h2>No stable builds yet</h2>
|
||||
<% } %>
|
||||
|
||||
|
||||
|
||||
|
||||
<% if (data.unstable.latest) { %>
|
||||
<h2>Latest Unstable Build: <%= data.unstable.latest.version %></h2>
|
||||
<p><a href="https://github.com/BinaryMuse/planetary.js/releases/tag/<%= data.unstable.latest.version %>">Release notes</a>
|
||||
|
|
||||
<a href="https://github.com/BinaryMuse/planetary.js/tree/<%= data.unstable.latest.version %>">GitHub tag</a></p>
|
||||
|
||||
<div class='ui list download-list'>
|
||||
<div class='item'>
|
||||
<i class='icon download'></i>
|
||||
Core library: [
|
||||
<a href='<%= dl(data.unstable.latest.version, 'planetaryjs.min.js') %>'>minified</a>
|
||||
|
|
||||
<a href='<%= dl(data.unstable.latest.version, 'planetaryjs.js') %>'>unminified</a>
|
||||
]
|
||||
</div>
|
||||
<div class='item'>
|
||||
<i class='icon download'></i>
|
||||
Core library (no plugins): [
|
||||
<a href='<%= dl(data.unstable.latest.version, 'planetaryjs-noplugins.min.js') %>'>minified</a>
|
||||
|
|
||||
<a href='<%= dl(data.unstable.latest.version, 'planetaryjs-noplugins.js') %>'>unminified</a>
|
||||
]
|
||||
</div>
|
||||
<div class='item'>
|
||||
<i class='icon globe'></i>
|
||||
Earth TopoJSON data ("land" and "countries" objects): [
|
||||
<a href='<%= dl(data.unstable.latest.version, 'world-110m.json') %>'>download</a>
|
||||
]
|
||||
</div>
|
||||
<div class='item'>
|
||||
<i class='icon code'></i>
|
||||
Source code [
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/archive/<%= data.unstable.latest.version %>.zip'>.zip</a>
|
||||
|
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/archive/<%= data.unstable.latest.version %>.tar.gz'>.tar.gz</a>
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% } else { %>
|
||||
<h2>No unstable builds yet</h2>
|
||||
<% } %>
|
||||
20
site/public/examples/_layout.ejs
Normal file
20
site/public/examples/_layout.ejs
Normal file
@ -0,0 +1,20 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<%- partial("../_header") %>
|
||||
<link href="/css/prism.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<%- partial("../_menu") %>
|
||||
|
||||
<div class='content container'>
|
||||
<div class='page ui slim stackable grid'>
|
||||
<div class='sixteen wide column'>
|
||||
<%- yield %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<%- partial("../_ga") %>
|
||||
</body>
|
||||
</html>
|
||||
2
site/public/examples/_scripts_basic.ejs
Normal file
2
site/public/examples/_scripts_basic.ejs
Normal 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
2
site/public/examples/_scripts_rotating.ejs
Normal file
@ -0,0 +1,2 @@
|
||||
<%- partial('../_scripts') %>
|
||||
<script type='text/javascript' src='/examples/rotating.js'></script>
|
||||
37
site/public/examples/basic.ejs
Normal file
37
site/public/examples/basic.ejs
Normal file
@ -0,0 +1,37 @@
|
||||
<div class="ui breadcrumb">
|
||||
<a href='/examples/' class="section">Examples</a>
|
||||
<i class="right arrow icon divider"></i>
|
||||
<div class="active section">Basic Globe</div>
|
||||
</div>
|
||||
|
||||
<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 raised segment'>
|
||||
<div class='ui blue ribbon label'>HTML</div>
|
||||
<pre class='line-numbers'><code class='language-html'><canvas id='basicGlobe' width='400' height='400'></canvas></code></pre>
|
||||
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
<pre class='line-numbers'><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
|
||||
// and move it to the center of the canvas.
|
||||
planet.projection
|
||||
.scale(canvas.width / 2)
|
||||
.translate([canvas.width / 2, canvas.height / 2]);
|
||||
planet.draw(canvas);
|
||||
})();</code></pre>
|
||||
</div>
|
||||
|
||||
<%- partial('_scripts_basic') %>
|
||||
35
site/public/examples/index.ejs
Normal file
35
site/public/examples/index.ejs
Normal file
@ -0,0 +1,35 @@
|
||||
<h1>Examples</h1>
|
||||
|
||||
<p>Sometimes you just need to see some code to get an idea started; here are a few examples of what you can build with Planetary.js.</p>
|
||||
|
||||
<div class='ui top attached segment example-segment'>
|
||||
<div>
|
||||
<a href='/examples/basic.html'><img src='/images/ex-basic.png'></a>
|
||||
<a href='/examples/basic.html'><h2><i class='icon black globe'></i>Basic Globe</h2></a>
|
||||
<p>It doesn't get any simpler than this: just a static globe, built using built-in plugins with nothing up our sleeves!</p>
|
||||
<span class='ui red horizontal label'>plugins: earth</span>
|
||||
<span class='ui purple horizontal label'>d3: projections</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='ui attached segment example-segment'>
|
||||
<div>
|
||||
<a href='/examples/rotating.html'><img src='/images/ex-rotating.png'></a>
|
||||
<a href='/examples/rotating.html'><h2><i class='icon black basic desk globe'></i>Rotating Globe with Pings</h2></a>
|
||||
<p>If there's one thing that's better than a globe, it's a globe that rotates. This is the demo from the homepage of Planetaryjs.com, and so includes a custom auto-rotation plugin and zoom/drag integration.</p>
|
||||
<span class='ui red horizontal label'>plugins: earth, pings, drag, zoom</span>
|
||||
<span class='ui teal horizontal label'>custom plugins</span>
|
||||
<span class='ui purple horizontal label'>d3: projections</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='ui bottom attached segment example-segment'>
|
||||
<div>
|
||||
<a href='/examples/quake.html'><img src='/images/ex-quake.png'></a>
|
||||
<a href='/examples/quake.html'><h2><i class='icon black bullseye'></i>2013 Seismic Activity Visualization</h2></a>
|
||||
<p>A visualization of 2013 seismic activity. This demo shows the use of multiple custom plugins, D3 scales, fetching third party data, and DOM updates via D3.</p>
|
||||
<span class='ui red horizontal label'>plugins: earth, pings, drag, zoom</span>
|
||||
<span class='ui teal horizontal label'>custom plugins</span>
|
||||
<span class='ui purple horizontal label'>d3: projections, scales, selections, events, external data</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,47 +1,4 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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'>
|
||||
<div class="ui breadcrumb">
|
||||
<div class="ui breadcrumb">
|
||||
<a href='/examples/' class="section">Examples</a>
|
||||
<i class="right arrow icon divider"></i>
|
||||
<div class="active section">2013 Seismic Activity Visualization</div>
|
||||
@ -301,20 +258,3 @@
|
||||
};
|
||||
})();</code></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript' src='/js/prism.js'></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
65
site/public/examples/quake/_layout.ejs
Normal file
65
site/public/examples/quake/_layout.ejs
Normal file
@ -0,0 +1,65 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<%- partial("../../_header") %>
|
||||
<link href="/css/prism.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background-color: rgb(0, 26, 34);
|
||||
background: url('sky.jpg');
|
||||
color: white;
|
||||
}
|
||||
|
||||
ul#magnitudes {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 30px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
h1 {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 5px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
#controls {
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
bottom: 5px;
|
||||
left: 50%;
|
||||
margin-left: -200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<%- partial("../../_menu") %>
|
||||
|
||||
<%- yield %>
|
||||
|
||||
<%- partial("../../_scripts") %>
|
||||
<script type='text/javascript' src='/js/lib/moment.min.js'></script>
|
||||
<script type='text/javascript' src='/examples/quake/quake.js'></script>
|
||||
<%- partial("../../_ga") %>
|
||||
</body>
|
||||
</html>
|
||||
13
site/public/examples/quake/index.ejs
Normal file
13
site/public/examples/quake/index.ejs
Normal file
@ -0,0 +1,13 @@
|
||||
<h1>Earthquakes: 2013</h1>
|
||||
<ul id='magnitudes'></ul>
|
||||
|
||||
<canvas id='quakeCanvas'></canvas>
|
||||
|
||||
<div id='controls'>
|
||||
<div>
|
||||
<input id='slider' type='range' min='0' max='100' step='0.1' value='0'>
|
||||
</div>
|
||||
<div>
|
||||
<span id='date'>Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 55 KiB |
@ -1,47 +1,4 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
<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='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<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'>
|
||||
<div class="ui breadcrumb">
|
||||
<div class="ui breadcrumb">
|
||||
<a href='/examples/' class="section">Examples</a>
|
||||
<i class="right arrow icon divider"></i>
|
||||
<div class="active section">Rotating Globe with Pings</div>
|
||||
@ -185,26 +142,4 @@
|
||||
})();</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>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<%- partial('_scripts_rotating') %>
|
||||
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 72 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
@ -1,44 +1,4 @@
|
||||
<!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">
|
||||
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
||||
<meta property="og:site_name" content="Planetary.js">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class='ui fixed inverted large menu main-menu'>
|
||||
<div class='items'>
|
||||
<a class='item title' href='/'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor ' href='/download/'>
|
||||
<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 ' 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'
|
||||
onclick="_gaq.push(['_trackPageview', '/redirect-to-github-project-page']);">
|
||||
<i class='github alternate icon'></i><span class='hide-on-mobile'>Fork on GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class='content container'>
|
||||
<div class='ui page stackable grid'>
|
||||
<div class='ui page stackable grid'>
|
||||
<div class='eight wide column right floated'>
|
||||
<h1 class='title-header'>Planetary.js</h1>
|
||||
<h2 class='title-header subheader'>Awesome interactive globes for the web</h2>
|
||||
@ -138,23 +98,3 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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="js/homepage.js"></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user