I. Compatibilité

Chrome, Safari, Opera, Firefox.

II. Utilisation de l'API

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

Tout d'abord, on vérifie que l'API est disponible ;

 
Sélectionnez

	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.

 
Sélectionnez

	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 />';
	    });
	}
			

Démo

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

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

Exemple :

 
Sélectionnez

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

III. 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 fonction 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 renouvelée.
 
Sélectionnez

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

IV. 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 moment où la position a été acquise.

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 toutes présentes dans les navigateurs

Les plus répandues sont : latitude, longitude et altitude (unique à Firefox pour l'instant). Si une valeur n'est pas existante, elle retournera null.

V. Fonction d'error : PositionError

Lorsque la fonction de callback d'erreur est appelée, 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.
 
Sélectionnez

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

VI. Les fonctions watchPosition() et clearWatch()

watchPosition() est une fonction asynchrone qui retourne une position immédiatement et entame un processus de veille. Si la position de l'utilisateur 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 entamé par watchPosition(), on utilisera clearWatch() qui prend en argument l'adresse de watchPosition().

Voici un exemple pour illustrer ce propos :

 
Sélectionnez

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

VII. Exemple concret avec Google Map

VIII. Conclusion

En conclusion, on remarquera que la localisation n'est pas toujours très fiable car elle se base sur l'adresse IP des machines (ou des proxys !). On peut donc penser que cette API sera plus utilisée pour les applications web orientées mobile.

IX. Remerciements

Merci à Clément BEAUFILS pour sa relecture.

14 commentaires Donner une note à l'article (4.5)