Tutoriel de géolocalisation en HTML5

Terre Ce tutoriel a pour but de mettre en pratique pas à pas la géolocalisation en HTML5. Nous allons voir comment il est possible de récupérer les coordonnées d'un utilisateur, comment gérer les cas de succès et d'erreur avec les callbacks, comment suivre ses déplacements, et enfin toutes les informations que nous pouvons obtenir sur ses coordonnées, comme sa vitesse ou sa direction.

Avant de commencer il est important de rappeler qu'à l'heure actuelle, la géolocalisation n'est pas encore supportée par Internet Explorer. En revanche, tous les autres navigateurs modernes l'implémentent correctement. Il est possible de suivre l'évolution des fonctionnalités HTML5 prises en charge par les différents navigateurs sur CanIUse.com ou bien le Wiki des moteurs de rendu utilisés par les navigateurs.

Récupérer les coordonnées

Tout d'abord, nous allons créer un document HTML le plus simple possible, sans se soucier du Doctype, de la partie head et des autres détails de la structure HTML habituelle. Nous avons uniquement besoin d'exécuter du code JavaScript. Voilà donc à quoi ressemble notre fichier : Avant de chercher à utiliser la géolocalisation, il est bien entendu important de savoir si le navigateur de l'utilisateur la supporte. Pour cela on ajoute tout simplement les lignes suivantes : navigator.geolocation renvoie un simple booléen valant vrai ou faux selon la capacité du navigateur à utiliser la géolocalisation (...autrement dit c'est un détecteur d'IE !). Ensuite, afin de récupérer les coordonnées, on utilise la méthode getCurrentPosition() : Cette méthode prend en paramètre une fonction de callback qu'elle va appeler en lui fournissant le paramètre position contenant les coordonnées. Dans l'exemple ci-dessus, on utilise une fonction anonyme afin de traiter la variable position immédiatement à la suite du code d'appel. Dans le cas où l'on souhaite un traitement plus propre et détaillé, on utilisera une fonction nommée et déclarée comme le montrent les prochains exemples.

Mais attends une seconde... On peut connaître l'emplacement de n'importe quel utilisateur avec un petit bout de code comme ça ?

Oui, à condition qu'il accepte de partager sa localisation ! Vous avez peut-être déjà remarqué le bandeau qui apparaît en haut de certaines pages (le même bandeau qui vous propose d'enregistrer un mot de passe par exemple). Afin d'accepter de partager sa localisation, un bandeau de ce type apparaît : Barre d'autorisation de partage de géolocalisation Sur les smartphones, c'est un pop-up équivalent qui apparaît.

Et elle apparaît quand cette barre ?

Elle apparaît dès que l'on cherche à accéder aux coordonnées de l'utilisateur. Donc par exemple lorsque vous utilisez getCurrentPosition ! Ce qui évite de demander l'autorisation inutilement à l'utilisateur. Allez, on reprend avec nos callbacks !

Utilisation des callbacks

La méthode getCurrentPosition() peut prendre un second paramètre : le callback d'erreur. C'est la fonction qui sera appelée dans les cas où : On utilise donc la fonction de callback pour gérer ces 3 cas : Enfin, le 3ème paramètre de getCurrentPosition() sert à indiquer certaines options particulières, écrites de la forme suivante : {nom:valeur, nom:valeur, ...}. On peut ainsi spécifier : Les options timeout et maximumAge sont indiquées en millisecondes, donc ici, on établit un délai de 10 secondes de timeout, et une durée de vie maximale de la dernière position de l'utilisateur de 10 minutes. Par défaut, timeout a pour valeur Infinity, et si maximumAge vaut 0, alors l'application demande systématiquement une mise à jour de la position de l'utilisateur.

Suivre les déplacements

Dans de nombreux cas, on aimerait mettre à jour la position de l'utilisateur si celui-ci se déplace. On pourrait penser qu'une fonctionnalité telle que celle-ci pourrait être assez lourde à mettre en place... ce n'est pas le cas ! Il suffit simplement de remplacer getCurrentPosition() par : Comme on veut permettre à l'utilisateur d'arrêter le suivi de ses déplacements, on ajoute un simple lien effectuant un appel à clearWatch(). Enfin, si l'on souhaite pouvoir tester facilement ce code en se promenant dans la rue avec son smartphone, il faut activer l'option enableHighAccuracy pour utiliser le GPS afin d'avoir une mise à jour fréquente de la position. Voici le code JavaScript complet permettant d'afficher une nouvelle popup contenant les coordonnées chaque fois que l'utilisateur se déplace : C'est court n'est-ce pas ? Et encore, nous avons une gestion des erreurs, ainsi qu'une fonctionnalité d'arrêt de la géolocalisation ! Si on avait voulu simplifier à l'extrême on aurait pu laisser uniquement les lignes vitales : Je ne sais pas ce que vous en dites, mais lorsque je me suis rendu compte que 4 lignes de code JavaScript pouvaient faire fonctioner un suivi de position par GPS, j'ai vraiment été bluffé. Cela montre bien la volonté du W3C de faire de l'HTML5 un nouveau standard simple à utiliser.

La vitesse ! La boussole ! L'altitude !

Si vous avez été charmés par la simplicité par la partie précédente, voilà qui devrait vous achever ! Lorsque l'on récupère la variable position afin d'obtenir la latitude grâce à position.coords.latitude, on a accès à plusieurs autres attributs : Toutes ces valeurs sont remplies par le service de géolocalisation et vous n'avez absolument pas besoin de les calculer vous-même !

Pour terminer, voici la démonstration complète de tout ce que l'on vient de voir, avec une mise en page minimale : Démonstration de géolocalisation en HTML5

Et maintenant la cerise sur le gâteau : Pour ceux qui souhaitent utiliser toutes ces informations grâce à l'API Google Maps, je vous invite à lire mon Tutoriel sur l'API Google Maps avec la géolocalisation en HTML5.

Posted on