L'API geolocalisation en HTML5

Une des nouveautés introduit par HTML5 est la géolocalisation utilisable via une API d'un navigateur. Cela permet aux pages web d'interroger le navigateur sur la position de l'utilisateur

L'API de base permet d'obtenir les coordonnées en latitude et longitude ainsi que l'altitude.

Celles ci peuvent alors être exploitées par le biais d'une carte (de type Google Map par exemple)

utilisation de l'API

Comment obtenir la position courante de l'utilisateur? Voici la marche à suivre

Tout d'abord, on verifie que l'API est disponible

if(navigator.geolocation){ ... }

Ensuite, on cherche la position ( attention le navigateur vous demandera la permission, il faut l'accepter)

Il faut noter que l'altitude n'est disponible que sous Firefox

if(navigator.geolocation){     navigator.geolocation.getCurrentPosition(function(position){         var latitude = position.coords.latitude;         var longitude = position.coords.longitude;         var altitude = position.coords.altitude;         document.getElementById('geolocation').innerHTML = 'latitude : ' + latitude + '<br />' + 'longitude : ' + longitude + '<br />' + 'altitude : ' + altitude + '<br />';     }); }

la fonction navigator.location.getCurrentPosition() prend en argument une fonction dans laquelle on peut utiliser la variable position qui renvoie les coordonnées

Cette fonction peut également prendre en argument une fonction de gestion d'erreur et des options(dans un objet)

Exemple

navigator.geolocation.getCurrentPosition(
    successfunction, errorfunction, {options}
);

Les options

Les options peuvent être les suivantes (si elles sont implémentées dans le navigateur utilisé):

  • enableHighAccuracy : (true ou false) position précise ou non
  • timeout : (type long) temps de réponse, durée avant renvoi vers la function d'erreur
  • maximumAge : (type long ou Infinity) durée de la mise en cache de la position courante, si maximumAge:0 alors la position ne viendra jamais du cache, elle sera toujours renouvellée
function errorfunction(error){     switch(error.code) {         case error.TIMEOUT:             //faire quelque chose pour la gestion du timeout         break;     } } function successfunction(position){     if (position.timestamp < freshness_threshold && position.coords.accuracy < accuracy_threshold) {         // la position est relativement fraiche et précise.     } else {         // la position est ancienne ou imprécise.     } } navigator.geolocation.getCurrentPosition(     successfunction, errorfunction, {maximumAge:5000, timeout:2000} );

L'objet position

position retourne les coordonnées mais également d'autres valeurs:

  • coords : retourne les coordonnées ainsi que la précision(entre autres)
  • timestamp: représente le temps où la position a été acquise

L'objet coords

coords retourne plusieurs valeurs:

  • latitude: la latitude de la position
  • longitude: la longitude de la position
  • altitude: l'altitude de la position
  • accuracy: niveau de précision de la longitude et de la latitude (en mètre)
  • altitudeAccuracy: niveau de précision de l'altitude (en mètre)
  • heading: donne la position en degré par rapport au nord
  • latitude: affiche la vitesse actuelle de déplacement de la position (en mètre)

Bien entendu toutes ces valeurs ne sont pas encore toute présentes dans les navigateurs

Les plus répandues sontlatitude,longitude et altitude(unique à firefox). Si une valeur n'est pas existante, elle retournera null.

Fonction d'error : PositionError

Lorque la fonction de callback d'erreur est appelé, elle a pour argument un objet de type PositionError

Voici la liste des propriétés de l'objet

  • UNKNOW_ERROR : erreur inconnue
  • PERMISSION_DENIED : l'application n'a pas l'autorisation d'utiliser l'API Geolocalisation
  • POSITION_UNVAILABLE : la position n'existe pas
  • TIMEOUT : erreur de timeout
  • code : renvoi le code d'erreur courant
  • message : renvoi le message
function errorfunction(error){     switch(error.code) {         case error.TIMEOUT:             //faire quelque chose pour la gestion du timeout         break;         case error.PERMISSION_DENIED:             alert(error.message);         break;     } } function successfunction(position){ ... } navigator.geolocation.getCurrentPosition(     successfunction, errorfunction, {maximumAge:5000, timeout:2000} );

Les fonctions watchPosition() et clearWatch()

watchPosition() est une fonction asynchrone qui retourne une position immédiatement et entame une processus de veille. Si la position de lutilisateur change (sur un mobile par exemple), cette fonction retournera immédiatement une valeur de position

Cela ressemble un peu à un setInterval (très grossiérement) mais sur une position

Enfin pour supprimer ce processus de veille entamer par watchPosition(), on utilisera clearWatch() qui prend en argument l'adresse de watchPosition()

Voici un exemple pour illustrer ce propos

var watchId = navigator.geolocation.watchPosition(     successfunction, errorfunction, {maximumAge:5000, timeout:2000} ); function cancelButton(){     clearWatch(watchId); }

Exemple concrets

Avec Google Map

Plutôt facile, non?

retourner en haut de la page