IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

L'API géolocalisation en HTML5

Une des nouveautés introduites 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 géographique de l'utilisateur.

L'API de base permet d'obtenir les coordonnées en latitude et en longitude ainsi que l'altitude.

Celles-ci peuvent alors être exploitées par le biais d'une carte (de type Google Map).

14 commentaires Donner une note à l´article (4.5)

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Compatibilité

Chrome, Safari, Opera, Firefox.

II. Utilisation de l'API

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

tout d'abord, on vérifie que l'API est disponible ;

 
Sélectionnez
    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.

 
Sélectionnez
    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 :

 
Sélectionnez
    navigator.geolocation.getCurrentPosition(
        successfunction, errorfunction, {options}
    );

III. 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 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.
 
Sélectionnez
    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}
    );

IV. 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 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.

V. Fonction d'error : PositionError

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.
 
Sélectionnez
    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}
    );

VI. Les fonctions watchPosition() et clearWatch()

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 :

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

VII. Exemple concret avec Google Map

VIII. Conclusion

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.

IX. Remerciements

Merci à Clément BEAUFILS pour sa relecture.

14 commentaires Donner une note à l´article (4.5)

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Copyright © 2010 debray jerome. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.