Géolocalisation web

On discutait tranquillement lors du DevOpenSud d’intégrer de la géolocalisation au petit site Dev Friendly Places pour se situer directement dans la ville la plus proche. Il s’agit d’une petite application web avec un site statique dont les sources sont sous GitHub.

La base

Je suis sûr que vous avez déjà vu cette petite barre en haut de votre navigateur, sur un site de news avec des pop-ups partout par exemple. Ce mécanisme est désormais intégré dans la plupart des navigateurs modernes.

On peut quand même vérifier si la fonctionnalité est à notre disposition ou pas :

if ("geolocation" in navigator) {
	//Here, you can do your stuff
} else {
	//You can either do nothing or warn the user
}

Attention, il n’existe à ma connaissance aucun moyen de personnaliser le message affiché dans la barre d’adresse pour expliquer à l’utilisateur à quoi va servir sa géolocalisation. Essayez de le faire apparaître clairement dans la page.

Récupération de la localisation

Pour récupérer la geolocalisation du client, il suffit d’appeler la méthode getCurrentPosition sur l’objet navigator.geolocation. Celle-ci prend forcément en premier paramètre une méthode de callback qui sera appelée avec le résultat. On peut ensuite y passer une seconde méthode de callback qui sera appelée en cas de refus ou de problème de récupération de la géolocalisation.

Attention, en aucun cas vous ne pourrez récupérer la position directement. L’appel de getCurrentPosition vérifie si l’utilisateur vous a déjà autorisé à accéder à cette information pour votre site. Si tel n’est pas le cas, il lancera l’affichage de confirmation au client (en bandeau en haut de cet article). Si l’utilisateur avait déjà répondu et qu’on a conservé son choix, on peut récupérer les valeurs.

var success = function(geoloc) {
	console.log(geoloc);
};
var error = function(error) {
	console.log(error);
};
navigator.geolocation.getCurrentPosition(success, error);

L’objet Geoposition récupéré ressemble à ça :

{
	coords: {
		accuracy: 20,
		altitude: null,
		altitudeAccuracy: null,
		heading: null,
		latitude: 43.444444,
		longitude: 1.599999,
		speed: null
	},
	timestamp: 00000000;
}

On peut donc récupérer bien plus que simplement la latitude et la longitude si l’appareil dans lequel le code s’exécute dispose de ces informations : vitesse, altitude etc. Lorsque ces données ne sont pas disponibles, on récupère simplement null.

Watch

On peut aussi s’enregistrer auprès du service de geolocalisation et être tenu informé des changements de valeur de position. C’est utile pour afficher la position courante lors d’un déplacement, ou pour affiner la position si la précision augmente (passage d’une localisation wifi à une localisation gps par exemple).

var watchId = navigator.geolocation.watchPosition(function(geoloc) {
	//Do something with geoloc as previously described
});

On se désabonne avec la commande suivante :

navigator.geolocation.clearWatch(watchId);

Et ensuite ?

Une nouvelle API est visiblement en cours de rédaction : Geolocation Level 2 avec l’ajout des adresses postales.

Ma Pull Request sur Dev Friendly Places est en cours, affaire à suivre !