L'API géolocalisation en HTML5

Chrome, Safari, Opera, Firefox.

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

tout d'abord, on vérifie 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 />';
        });
    }

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 :

    navigator.geolocation.getCurrentPosition(
        successfunction, errorfunction, {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.

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

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.

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, renvoie le code d'erreur courant ;
• message, renvoie 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}
    );

watchPosition() sont 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 :

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

Démo

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.

Merci à Clément BEAUFILS pour sa relecture.

14 commentaires