planetary.js
Awesome interactive globes for the web
Planetary.js: Awesome interactive globes for the web
I came across planetary.js--for rotating a globe--after it supported mobile devices.
I would like to know if the drag plugin can restrict the movement only to the x-axis and rotate the globe to a certain level.
Say, for example, I have 3 latlng places; initially the globe rotates and, on drag/swipe left, the globe rotates but it is restricted in rotation to the first latlng place. On successive drags the rotation is permanently paused and the rotation happens till the next latlng, and so forth.
Source: (StackOverflow)
Is there a way to get the latitude and longitude when a user click somewhere on a planetary.js globe? It's not in the planetary.js API, but is there a way to do it in d3.js? If there isn't how hard would it be to implement the solution?
Source: (StackOverflow)
I'm using planetry.js plugin for rotating globe. i want to display tooltip on hover of a country/area and want to make it clickable. Anyidea would be highly appreciated. and here's the demo
Source: (StackOverflow)
I am playing with planetary.js and would like to show "events" on the globe at specific coordinates. I could envision a simple text file with an event, an x coordinate, and a y coordinate. Any idea how I'd tell planetary.js to refer to such a file and display events on the globe?
Source: (StackOverflow)
I am a graduate student in biochemistry making a presentation on cancer statistics. I am trying to learn how to make presentations with HTML, reveal.js, D3, and javascript. So far, I was able to make the standard slides with online courses and tutorials.
However, I would like to use the rotation globe with Planetary.js and incorporate a heatmap for the countries. I already have the cancer mortality rates from the World Health Organization 2011. I could use the ping option. That would be much easier, but not as good as a heatmap?
I would greatly appreciate if I could please re-directed to a post or webpage, so that I try on my own. Thank you!
Source: (StackOverflow)
So I have been all over plantary.js page, ran though all the checks, installed as they asked etc. I cannot get the site to load. Googled, and looked here as well. I have used the quickstart exactly as they said as well. What am I doing wrong? I am not very well versed in JQuery although I have a working knowledge of it and I believe that it is installed correctly (I'm running other jQuery that works fine.
Code:
<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>
js (yourApp.js):
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: '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);
I appreciate any help!
thanks!
Source: (StackOverflow)
I'm drawing some points over a planet drawn in planetaryjs, and I'd like to make them semi-transparent using RGBA color.
planet.loadPlugin(function(planet) {
planet.onDraw(function () {
planet.withSavedContext(function (context) {
var verylow = (function () {
var verylow = null;
$.ajax({
'async': false,
'global': false,
'url': 'verylow.json',
'dataType': "json",
'success': function (data) {
verylow = data;
}
});
return verylow;
})();
context.beginPath();
planet.path.context(context)(verylow);
context.fillStyle = 'green';
context.fill();
//context.stroke();
context.closePath();
});
});
});
context.fillStyle will also take hex codes, i.e.
context.fillStyle= '#999999';
but it won't take
context.fillStyle= 'rgba (255, 0, 0, 0.6)';
Is this just a limitation of the way that planetary is designed, or can anyone suggest another way to get any level of transparency?
edit: verylow.json contains a bunch of "Point" objects, FYI.
Source: (StackOverflow)
I have an apache server with a bunch of files located in the root folder. Two of which are d3.min.js and topojson.min.js which are both being found perfectly fine. However, the third file, planetaryjs.min.js is getting a 403 Forbidden error on the GET request. Anyone know how I can fix this? Thanks.
Source: (StackOverflow)
I am looking to migrate from Google Maps to planetary.js and I need to move a bunch of markers. Does anyone know how Google Maps coordinates match to coordinates in planetary.js?
If I have a Google Maps location such as "-33.654437, 151.188164" - what does this map to in planetary.js?
Source: (StackOverflow)
I am currently working on some interactive modules using planetary.js and am relatively new to javascript. I am having a bit of trouble understanding how to use th planet.onStop function. I don not quite understand the example for onStop given in the website.
What I am essentially trying to do is to keep one global instance of the planet and reconfigure the properties of various plugins loaded based on the different buttons clicked.
I am also trying to figure out how to unload a plugin or if i want to chnage the color of the ocean in teh earth plugin how do i do that without reloading the earth plugin.
Any help or a simple example would be appreciated.
Regards,
Source: (StackOverflow)
I'm using planetary.js to build a canvas globe. It works fine when the require code is not minified. but when i try to minify using the requirejs optimizer, it fails. It says that it cannot find the library file. This is how i have included it:
main.js
require.config({
baseUrl: "./js",
paths: {
Underscore: 'lib/underscore/1.6.0/underscore-min',
Backbone: 'lib/backbone/1.1.2/backbone-min',
d3: 'lib/d3/d3.min',
topojson: 'lib/topojson/topojson',
PlanetaryJS: 'lib/planetary.js/dist/planetaryjs.min'
},
shim: {
'Backbone': {
deps: ['Underscore'],
exports: "Backbone"
},
'd3': { exports: 'd3' },
'topojson': { exports: 'topojson' }
}
});
require([ 'widget/globewidget'], function( GlobeWidget ) {
....
}
in globewidget.js:
define( [
'Backbone',
'topojson',
'PlanetaryJS',
'text!templates/widgets/editableWidget.html'
], function(Backbone, topojson, planetaryjs, editableWidgetTemplate) {
//build the canvas and widget here
}
in index.html:
<script data-main="js/main" src="js/lib/require/2.1.8/require.min.js"></script>
When i run this, it loads all the dependencies properly, and i see the globe rendered on screen. topojson dependency in globewidget.js points to the path defined in the config.
However, when i try to minify the code, i get this error:
Error: ENOENT, no such file or directory 'C:\jboss-6.1.0\server\default\deploy\app.war\js\topojson.js'
my require.bat code:
node r.js -o name=%1 out=%1.min.js baseUrl=. paths.Underscore=empty: paths.Backbone=empty:
i just go to my js folder and type require main and it spits out a main.min.js file that i reference in my html page.
The path points to js/lib/topojson/topojson in the config, so i'm not sure why the require optimizer is unable to resolve the path correctly.
Source: (StackOverflow)