Globo terráqueo interactivo con JavaScript

Planetary.js es una bonita biblioteca escrita en JavaScript que permite desplegar un globo terráqueo interactivo con apenas unas pocas lineas de código.

Una de las principales características de este proyecto es su gran versatilidad a la hora de personalizar su apariencia, teniendo disponible la capacidad de configurar sus colores directamente al momento de inicializar el recurso.

Otro detalle interesante es el de tener la posibilidad de modificar aspectos relacionados a su funcionamiento, como por ejemplo la velocidad de rotación del globo, todo esto muy bien documentado y explicado en la documentación oficial.

globo terraqueo interactivo javascript

Planetary.js soporta perfectamente la funcionalidad Drag y Zoom, lo que lo convierten en una excelente alternativa a la hora de mostrar información mundial sin caer en una vista como la que proponen los mapas de Google.

Su arquitectura esta diseñada de tal manera que las funcionalidades pueden ser extendidas mediante el uso de plugins, un modelo que funciona y ya lo comprobamos con otros proyectos más conocidos como por ejemplo WordPress y jQuery.

El proyecto completo se encuentra liberado bajo licencia MIT, garantizando su libre uso tanto a modo personal como comercial.

Este recurso cuenta con tan solo dos dependencias: D3, la biblioteca de manipulación de información JavaScript por excelencia y TopoJson, un proyecto que permite realizar el encode de la información, especialmente diseñada para trabajar con mapas y proyectos que manipulen información geográfica.

Ejemplo de uso:

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:

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);

Eso es todo.

Como pueden ver es muy sencilla su utilización.

Como siempre les recomiendo visitar la documentación oficial en donde podrán encontrar distintas opciones para aprovechar al máximo esta magnifica biblioteca.

Categorizado en: