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)
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
navigator.location.getCurrentPosition() 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 sont latitude,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?
Conclusion
En conclusion, on remarquera que la localisation n'est pas toujours très fiable car elle se base sur l'addresse IP des machines (ou des proxys!). On peut donc penser que cette api sera plus utilisée pour les web applications orientées mobile.