A la découverte de WebGL Earth#

Date de publication initiale : 05 avril 2011

Mots-clés : JavaScript | Open Source

Depuis quelques mois déjà nos billets font de plus en plus référence à l'utilisation de la 3D au sein de l'univers du Web. L'intégration de la librairie WebGL, par les navigateurs les plus récents, montre bien que cette composante fera partie intégrante de nos prochaines façons de surfer. Profitant de la sortie récente de firefox 4, je me suis penché sur WebGl Earth. Ce projet initié par la société klokantech vise à remplacer nos interfaces cartographiques planes par un véritable globe directement dans votre navigateur. Bien évidemment, vous pourriez me dire que Google Earth est disponible depuis longtemps sur le Web via son API, mais cela nécessite l'installation d'un plugin spécifique. Tout l’avantage de se baser sur WebGL c'est que tout l'environnement est déjà intégré à votre navigateur. D'ailleurs, on pourrait même se demander si un scenario similaire à la Google Gears ne serait pas en gestation chez Google ? Néanmoins revenons à nos moutons et à WebGl Earth.

Hello World#

N'ayez pas peur, vous n'aurez pas besoin de connaissances spécifiques en 3D ! Juste quelques notions de JavaScript seront nécessaires. Surtout cela sera l'occasion de voir que vous pouvez avec juste quelques lignes de codes construire votre propre application. Allé commençons avec l'habituel "Hello World" :

1
2
3
4

function initialize() {
  var options = { zoom: 3.0, center: [47.19537, 8.524404] };
  var earth = new WebGLEarth("earth_div", options);
}

Ce qui nous donne donc l'application suivante :

Les habitués d'OpenLayers ou de Google Maps ne seront pas surpris par le code affiché. Rien de bien sorcier. En effet, dans un premier temps nous définissons quelques options et ensuite nous instançons l'objet WebGLEarth. Celui-ci prend en paramètre l'identifiant de la balise div qui contiendra le globe ainsi que les options que nous avons définies auparavant. Vous voyez, je ne vous avais pas menti, 2 lignes de code pour réaliser. Amusez-vous à changer les paramètres définis en entrée pour par exemple centrer votre carte sur Paris : center: [48.8594, 2.3482].

Changer la couche par défaut#

Par défaut, la couche qui s'affiche est celle de MapQuest (basée sur les données d'OpenStreetMap). Mais vous pouvez personaliser votre application avec l'une des trois autres sources disponibles (OSM, Bing, Custom).

Imaginons que nous souhaitions afficher la couche OpenStreetMap, deux solutions sont alors possibles. Soit instancier la couche en même temps que notre objet WebGLEarth via la propriété map. Bizarre d'ailleurs le choix du nom de cette propriété, pourquoi ne pas l'avoir appelé layer ? Mais bon passons :

1
2
3
4
5
6
7
8

function initialize() {
  var options = {
    zoom: 3.0,
    center: [48.8594, 2.3482],
    map: WebGLEarth.Maps.OSM,
  };
  var earth = new WebGLEarth("earth_div", options);
}

Ou alors, il est toujours possible de le faire par la suite :

1
2
3
4
5
6

function initialize() {
  var options = { zoom: 3.0, center: [48.8594, 2.3482] };
  var earth = new WebGLEarth("earth_div", options);
  earth.initMap(WebGLEarth.Maps.BING, ["Road", "your_bing_code"]);
  earth.setMap(WebGLEarth.Maps.BING, "Road");
}

Pour ce dernier exemple, nous avons dû utiliser une couche de type Bing. En effet, sauf erreur de ma part, il semblerait que la méthode setMap ne fonctionne pas pour OSM.

Conclusion#

WebGL Earth est un projet récent. Cela explique notamment le peu de fonctionnalités disponibles dans l'API. En effet, il n'est pas possible pour le moment de faire plus qu'afficher un fond cartographique. Difficile alors de réaliser une application un peu sérieuse. Espérons maintenant que les développeurs enrichiront cette prometteuse librairie et même pourquoi pas imaginer un rapprochement des communautés OpenLayers et WebGL Earth.

Ressources#

• WebGL Earth API
• WebGL Earth Examples
• Code Source

Auteur#

GeoTribu

Toute l'actualité de la géomatique Open Source ! Mais aussi des tutoriels, des billets de blog, des tests et surtout une bonne humeur géographique !