export const instantiateGlobe = () => {
const globe = planetaryjs.planet();
globe.loadPlugin(globeHelper.autorotate(10));
globe.loadPlugin(planetaryjs.plugins.earth({
topojson: { file: 'https://raw.githubusercontent.com/darul75/ng-planetaryjs/master/public/world-110m-withlakes.json' },
oceans: { fill: '#000080' },
land: { fill: '#339966' },
borders: { stroke: '#008000' }
}));
globe.loadPlugin(globeHelper.lakes({
fill: '#000080'
}));
globe.loadPlugin(planetaryjs.plugins.pings());
globe.loadPlugin(planetaryjs.plugins.zoom({
scaleExtent: [100, 300]
}));
globe.loadPlugin(planetaryjs.plugins.drag({
onDragStart: () => {
globe.plugins.autorotate.pause();
},
onDragEnd: () => {
globe.plugins.autorotate.resume();
}
}));
globe.projection.scale(175).translate([175, 175]).rotate([0, -10, 0]);
const colors = ['red', 'yellow', 'white', 'orange', 'green', 'cyan', 'pink'];
setInterval(() => {
const lat = Math.random() * 170 - 85;
const lng = Math.random() * 360 - 180;
const color = colors[Math.floor(Math.random() * colors.length)];
globe.plugins.pings.add(lng, lat, { color, ttl: 2000, angle: Math.random() * 10 });
}, 150);
const canvas = document.getElementById('basicGlobe');
canvas.width = 800;
canvas.height = 800;
const context = canvas.getContext('2d');
context.scale(2, 2);
globe.draw(canvas);
return dispatch => {
dispatch(globeInstantiated());
};
};
componentDidMount: function() {
// load the earth plugin
this.state.planet.loadPlugin(Planetaryjs.plugins.earth(
{
topojson: { world: worldData },
oceans: { fill: 'RGBA(34, 43, 48, 0.4)' },
land: { fill: 'white' },
borders: { stroke: 'white'}
}));
// load the pings plugin
this.state.planet.loadPlugin(Planetaryjs.plugins.pings());
// load the drag plugin
this.state.planet.loadPlugin(Planetaryjs.plugins.drag());
var canvas = document.getElementById('globe');
util.getCookie('settings', (settings) => {
if (settings && settings.showGlobe) {
this.setState({ showGlobe : true });
}
});
// handle retina screens
if (window.devicePixelRatio == 2) {
canvas.width = 300;
canvas.height = 300;
var context = canvas.getContext('2d');
context.scale(2, 2);
}
// draw a ping on the globe at a set interval
setInterval(this.drawPing, 1100)
this.state.planet.projection.scale(75).translate([75, 75]);
this.state.planet.draw(canvas);
},