Géolocalisation en HTML5

6 December 2012 par zamord_l
Une des nouvelles fonctionnalités introduites par l'HTML5 est la géolocalisation. Celle-ci s'utilise via une API disponible au travers d'un navigateur. Cela permet aux pages web d'interroger le navigateur sur la position géographique de l'utilisateur lorsque celle-ci est disponible.
Cette nouvelle API autorise désormais à obtenir les coordonnées en latitude et en longitude ainsi que l'altitude du navigateur.
Celles-ci pouvant ensuite être exploitées par le biais d'une carte (de type Google Map).

Disponibilité de l'API dans le navigateur

Avant de pouvoir utiliser l'API, on doit tout d'abord s'assurer que celle-ci est disponible via le navigateur. Cela s'effectue par un test vérifiant l’existence de l'objet "geolocation" supposément membre de l'objet navigator. Cet objet est indispensable, car en effet, c'est celui-ci qui contient les méthodes permettant de récupérer les informations concernant la position de la machine "hôte".

En JavaScript ce test s'effectue de la manière suivante :

if(navigator.geolocation)
{
// L’API est disponible, traitement des données
}
else
{
// L'API est indisponible, gestion des fallbacks
}

Récupération des données et gestion des erreurs

L'objet geolocation contient deux méthodes principales, servant toutes les deux à la récupération des données de géolocalisation du navigateur:

getCurrentPosition, récupérant la position de l'hôte à un instant précis

- watchPosition, récupérant la position de l'hôte de manière continue à chaque fois que la position de ce dernier est changée.

En faisant appel à l'une de ces fonctions, le navigateur demandera alors la permission à son utilisateur d'utiliser sa position.

getCurrentPosition()

Le prototype de cette methode est le suivant :

void getCurrentPosition(in PositionCallback successCallback,
						in optional PositionErrorCallback errorCallback,
						in optional PositionOptions options);

watchPosition()

Le prototype de cette methode est le suivant :

long watchPosition(in PositionCallback successCallback,
                      in optional PositionErrorCallback errorCallback,
                      in optional PositionOptions options);

Exemple utilisant getCurrentPosition

Ces deux fonctions prennent en paramètre trois fonctions de type “callback” qui seront chacune appelées si l'on se trouve dans un type de situation précis. En cas de succès, "successCallback" sera alors appelée en fournissant comme paramètre à cette fonction, la position contenant les coordonnées de l'utilisateur. La fonction "errorCallback" sera appellée en cas d'érreur lors de l'exécution de la fonction appelante. Enfin, si l'on veut modifier certaine options lors de l'appel à l'une de ces fonctions, il faudra alors ajouter "options" pour que celles-ci soient prisent en compte.

Un exemple d'utilisation de la fonction getCurrentPosition() peut-être trouvé ci-dessous.

Celui-ci montre à l'aide de deux fonctions anonymes comment récupérer les coordonnées d'un utilisateur immédiatement à la suite de l'appel à getCurrentPosition() et comment gérer les erreurs dans le cas ou, l'une de celles-ci seraient rencontrées. Les erreurs testées sont les suivants:

- L’utilisateur refuse l’autorisation d’accès à sa position

- L’emplacement de l’utilisateur n’ait pas pu être déterminé

- Le service de géolocalisation ne répond pas assez vite

navigator.geolocation.getCurrentPosition(function(position) {
	var infos;
	infos += "Latitude : "+position.coords.latitude +"\n";
	infos += "Longitude: "+position.coords.longitude+"\n";
	infos += "Altitude : "+position.coords.altitude +"\n";
	alert(infos);
}, function(error){
	switch(error.code){
	case error.PERMISSION_DENIED:
		alert("L'utilisateur n'a pas autorisé l'accès à sa position");
		break;
	case error.POSITION_UNAVAILABLE:
		alert("L'emplacement de l'utilisateur n'a pas pu être déterminé");
		break;
	case error.TIMEOUT:
		alert("Le service n'a pas répondu à temps");
		break;
	}
});

Exploitation des données

Une fois les informations obtenues, ces données pourront alors être exploitées grâce à l'API Google Map V3, permettant d'afficher des données sur une carte. Ceci de manière simple.

Tout d'abord en incluant la librairie Google Map V3 dans la page utilisant le script suivant. Celui-ci récupère les données de géolocalisation, puis en affichant une carte, y place un marqueur représentant la position de l'utilisateur.

function getPostion(maPosition) {
	var infopos;
	infopos += "Latitude : "+maPosition.coords.latitude +"\n";
	infopos += "Longitude: "+maPosition.coords.longitude+"\n";
	infopos += "Altitude : "+maPosition.coords.altitude +"\n";
 
	latlng = new google.maps.LatLng(maPosition.coords.latitude, maPosition.coords.longitude);
 
	var marker = new google.maps.Marker({
		position: latlng,
		map: map,
		title:"Vous êtes ici"
	});
	var myOptions = {
			zoom : 13,
			center : latlng,
			mapTypeId : google.maps.MapTypeId.ROADMAP
	}
	//Ajoute la carte google a un element ayant l'id map_canvas
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	// Permet de centrer la carte sur la position latlng
	map.panTo(latlng);
 
}

En conclusion, avec les nouvelles fonctionnalités de géolocalisation de l'HTML5, de nouvelles possibilités sont désormais accessibles aux développeurs. On a pu voir que, de manière simple, il est possible de récupérer la position d'un utilisateur, et ensuite d'afficher celle-ci sur une carte.

Cet article ne se veut qu'une introduction à la géolocalisation en HTML5. Vous pourrez néanmoins trouver plus d'informations sur le site des développeurs de google.

Tags: , ,

Un commentaire pour “Géolocalisation en HTML5”

  1. Géolocalisation en HTML5 | Blog MTI | web2Partner dit :

    […] on http://www.mti.epita.fr About these ads GA_googleAddAttr(“AdOpt”, “1”); GA_googleAddAttr(“Origin”, “other”); […]

Laisser un commentaire


+ seven = 13