 |
|
|
| |
| PRATIQUE ALGO/METHODES |
|
|
|
| Expliquez-moi... Le fonctionnement de Google Maps |
| |
| Gérer l'affichage dynamique de milliers d'images accolées, par le seul biais de JavaScript et de scripts serveur bien conçus : voici le défi technique relevé par Google pour Maps, que nous étudions ici.
(07/02/2006) |
  |
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
Présentation
Lors de son lancement en février 2005, l'application cartographique de Google a fait du remous dans la communauté des développeurs. Si ces principes techniques de base étaient déjà connus, voire utilisés depuis longtemps, l'application de Google les combinait de manière intelligente, et surtout offrait une accessibilité sans pareil.
Plusieurs aspects de Google Maps sont responsables de sa facilité d'usage pour tout utilisateur : le système de glissement d'image, couplé au chargement dynamique de nouvelles images ; l'adaptation de la carte à la taille du navigateur ; l'interface minimaliste ; la possibilité en un clic de changer de type de carte
Fonctionnement JavaScript
Comme toutes les autres applications Google, Maps repose fortement sur l'utilisation de JavaScript. Le chargement et le glissement d'image ne peuvent se faire sans ce code.
Selon le niveau de zoom, une carte peut-être découpée en plusieurs dizaines de milliers de carrés. Ce découpage est réalisé automatiquement par un script côté serveur. Lorsque l'utilisateur fait glisser l'image dans un sens, JavaScript calcul quels sont les carrés dévoilés, envoi au serveur une requête pour les images en question, et les affiche alignés aux autres.
Chaque carré est stocké dans un fichier dont le nom indique sa longitude, sa latitude, et la valeur du zoom. Récupérer ces informations pour tous les carrés à afficher n'est qu'une question de dérivation des données connues pour un seul carré.
Ainsi, en sachant à quoi doit correspondre le carré situé en haut à gauche, et en ayant en mémoire la taille de la carte affichée et le niveau de zoom (ce dernier stipulant la taille d'un carré), il est possible pour JavaScript de déterminer quel est l'espace à occuper, quels sont donc les carrés à afficher, quels sont ceux à télécharger (en fonction de ceux qui sont déjà chargés et affichés), et où placer dynamiquement chaque carré.
Le tout nécessite donc une synchronisation parfaite entre ce que peut demander le code JavaScript, et ce qui est effectivement disponible sur le serveur. Le programme de découpage initial de l'image complète est donc extrêmement important, car il est responsable, par la précision de sa coupe et la rigueur de son nommage, du bon déroulement des évènements déclenchés par les actions de l'utilisateur.
Approche du code
Maps fournit aux développeurs une API pour profiter des données disponibles à travers son service, au sein de leurs propres applications. Plus intéressant pour le fonctionnement lui-même du service, Google donne accès à AjaXSLT, un projet Open Source proposant une bibliothèque JavaScript.
AjaXSLT consiste en une implémentation de XSLT/XPath en JavaScript. Les fichiers et sites Web ne sont guère documentés, mais les fichiers xslt.html (une page de test) et xpath.html (un analyseur intéractif) permettent de se plonger dans le code régissant non seulement Maps, mais également GMail et Google Earth.
Nombreux sont par ailleurs ceux qui se sont penchés sur le problème de synchronisation entre le glissement d'image et le chargement de nouveaux carrés. Deux exemples complets sont à découvrir chez Ajaxian pour un mise en place de base, ou chez Michal Migurski
pour un exemple beaucoup plus complet (mis à jour par Dan Allen). |
|
|
|
|
|
|
