HTML5 : l'API Geolocation

Aujourd’hui nous allons traiter l’une des nouvelles fonctionnalités d’HTML5: la géolocalisation. Cette api, comme son nom l’indique, permet de localiser l’utilisateur de l’application. Dans cet article, nous allons d’abord étudier la fonction de localisation et son fonctionnement, ensuite nous construirons un exemple d’application simple, et enfin nous étendrons notre exemple en intégrant l’API Google Maps.

Comment ca marche ?

La géolocalisation avec Html5 s’effectue en récupérant des données fournies au navigateur par le dispositif utilisant l’application (par exemple, un téléphone mobile, un PC). Il existe différentes méthodes de localisation suivant le dispositif utilisé :

• Adresse IP
• Coordonnées GPS
• Réseau WIFI
• Réseau mobile
• Données entrée par l’utilisateur

Comment l’utiliser? Il suffit d’appeler une fonction javascript :

navigator.geolocation.getCurrentPosition (in PositionCallback successCallback,
					in optional PositionErrorCallback errorCallback,
					in optional PositionOptions);

Cette fonction accepte 3 paramètres dont 2 optionnels. Le paramètre obligatoire est la fonction successCallback, appelée en cas de succès de la géolocalisation, et qui récupère l’objet Position retourné. Cet objet contient les coordonnées de la position : latitude, longitude et accuracy (précision en mètres), accessibles via l’attribut coords. Ensuite, on peut spécifier un paramètre errorCallback qui permet de définir une fonction pour gérer les cas d’erreurs. Enfin on peut ajouter des options à notre géolocalisation (timeout, maximumAge, enableHighAccuracy).
Et… c’est tout ! Simple non? En intégrant ces fonctions à une page HTML on obtient le résultat suivant :

Démonstration

En cliquant sur le bouton, le navigateur (s’il supporte l’API) va vous demander l’autorisation pour activer le partage de localisation. En acceptant, vous verrez apparaître vos coordonnées.

Support des navigateurs

• chrome: versions 5+ ou via plugin Gears
• firefox: versions 3.5+
• IE: 9+ ou via plugin Gears
• Opéra: version 10.6+
• Safari: 5+

Utilisation de Google Maps

A présent que nous avons récupéré nos coordonnées, l’idéal serait de pouvoir se localiser sur une carte. Pour cela, on peut utiliser Google Maps Javascript Api. Cette API fournit des fonctions javascript accessibles en ajoutant cette ligne à notre page:

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

Ensuite, nous allons utiliser les coordonnées de la position récupérée et créer un objet LatLng :

var myPosition = new google.maps.LatLng(latitude, longitude);

Pour créer une carte, il suffit de créer un objet de type Map en lui indiquant l’élément HTML qui va la contenir, ainsi qu’une liste d’options.

var map = new google.maps.Map(document.getElementById("mapCanvas"),
		myOptions);

Cette liste d’options comprend la taille du zoom, le centre la carte qui est l’objet LatLng initialisé plus haut, ainsi que le type de carte.

var myOptions = {
	zoom : 15,
	center : myPosition,
	mapTypeId : google.maps.MapTypeId.ROADMAP
};

Enfin, il reste à rajouter un repère sur notre position:

var marker = new google.maps.Marker({
		position : myPosition,
		map : map,
		title : "Here you are!"
	});

L’API Google Maps permet également de calculer et de tracer un chemin vers une destination donnée. Et voici le résultat obtenu en combinant toutes ces fonctions :

 

 
 
 
Ainsi, en cliquant sur le bouton “Find me!”, le navigateur va récupérer les coordonnées courantes et afficher la position sur la carte. Ensuite, le bouton “Go to Zenika” permet de tracer un itinéraire entre la position courante et le bureau de Zenika à Paris.

Conclusion

Nous venons donc de voir comment utiliser l’API Geolocation d’Html5 pour trouver la position de l’utilisateur et, avec l’API Google Maps, l’afficher sur une carte. L’exemple que nous avons vu est relativement simple, il faut savoir que l’API comprend une autre fonctionnalité qui permet de suivre la position de l’utilisateur et la mettre à jour à intervalle régulier. Ainsi dans le cas d’un utilisateur mobile, nous pourrions imaginer une application qui calcule sa position courante ainsi que la distance parcourue au fur et à mesure.
Dans le prochain billet consacré à Html5, je m’intéresserai aux applications en mode Hors-ligne.