06
JAN

Planetary.js - Des globes interactifs dans vos pages web

Publié le 06/01/14 à 09h14 par DJo

Planetary.js est un script JS permettant d'intégrer dans ses pages web un globe interactif.

Planetary.js est un script JS permettant d'intégrer dans ses pages web un globe interactif.

Vous souhaitez représenter des points, zones dans le monde entier ? Vous préférez l'afficher d'une manière plus originale et moins 2D ? Planetary.js est fait pour vous !

Il s'agit d'un script JS open source basé sur D3.js et TopoJSON (encodage données geographiques).

Grâce à lui, vous pourrez intégrer dans vos pages web des globes interactifs du monde et y afficher des zones / "pings" sur certains points.

L'utilisateur peut naviguer facilement sur le globe à coup de drag and drop et de zoom.

Planetary.js - Globes interactifs JS

Par exemple, afficher de manière dynamique l'activité sismique du monde sur une période donnée (défilement des jours automatique).

Côté code, voici comment mettre en place un globe sur votre page:

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

Le fichier TopoJSON vous permettra de définir les points et zones à afficher sur votre globe.

La documentation en ligne est complète, vous n'aurez pas de problème pour étendre le script.

 

Site Officiel

Baraguiné par rogertoure le 07/01/14 à 20h00
rogertoure via Twitter
Très intéressant. J'étais à la recherche d'un tel outil. N'y aurai-t-il pas un forum d?entraide qui me permettrait de me guider dans l'écriture de plugin. J'aimerais pourvoir centrer à la demande un pays ou un point géographique au centre du globe, et zoomer...

Merci à lafermeduweb pour sa veille ... et bonne année !

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web