Utiliser la géolocalisation en HTML 5

Il est en effet possible de récupérer la localisation de vos visiteurs en Javascript. Bien entendu, le navigateur demandera l’autorisation de l’utilisateur, il est donc important de prévoir le fait que vous n’aurez peut être pas accès à ces données.

Avant toute chose, vous devez vous assurer que la géolocalisation est gérée par le navigateur :

if( !navigator.geolocation ){
    alert( 'Votre navigateur ne gère pas la localisation' );
}

Maintenant que nous sommes sûrs que le navigateur est compatible, nous pouvons passer à l’action.
En réalité, la gestion de la géolocalisation est assez simple.

Récupérer la position de l’utilisateur

La méthode qui permet de récupérer la latitude et la longitude de l’utilisateur est

getCurrentPosition

. Elle prend en argument un callback – c’est à dire une autre fonction qui s’occupera de traiter les données renvoyées.

Voici la fonction que nous utiliserons pour cela :

function parseCoords( position ){
    //Latitude
    var lat = position.coords.latitude;
    //Longitude
    var lon = position.coords.longitude;

    /* Ici, on peut par exemple utiliser les deux variables
       pour se positionner sur une carte. */

}

Une fois cette fonction définie, il suffit d’appeler la méthode en question :

if( !navigator.geolocation ){
    alert( 'Votre navigateur ne gère pas la localisation' );
} else {
    //Demande de la position
    navigator.geolocation.getCurrentPosition( parseCoords );
}

Suivre la position

Si on souhaite mettre à jour régulièrement la position, il existe une autre méthode qui fonctionne exactement de la même manière. Il s’agit de

watchPosition

. Pour l’utiliser, il est fortement conseillé de déclarer une variable lors de son appel afin de pouvoir stopper la localisation lorsqu’on en a plus besoin :

var gps = navigator.geolocation.watchPosition( parseCoords );

//Arrêt de la localisation
navigator.geolocation.clearWatch( gps );

Pour aller un peu plus loin

Repérer les erreurs

Les deux méthodes dont on vient de parler peuvent prendre deux arguments supplémentaires.

Il est possible de préciser un deuxième callback qui sera appelé en cas d’erreur :

function getError( error ){
    switch( error.code ){
        case error.PERMISSION_DENIED :
        //L'utilisateur n'a pas accepté de partager sa position
        break;

        case error.POSITION_UNAVAILABLE :
        //La position n'a pas pu être définie
        break;

        case error.TIMEOUT :
        //Le service de localisation n'a pas répondu à temps
        break;
    }
}

navigator.geolocation.getCurrentPosition( parseCoords, getError );

Modifier certaines options

Un objet Javascript peut être passé en troisième argument pour personnaliser certaines options :

  • enableHighAccuracy

    (

    true

    ou

    false

    ) : Permet de « forcer » l’utilisation du GPS si disponible (au lieu de la triangulation wifi).

  • maximumAge

    (

    int

    ) : « Durée de vie » maximale en millisecondes de la variable coordonnées.

  • timeout

    (

    int

    ) : Défini un temps maximal d’exécution (en millisecondes).

var options = {
    enableHighAccuracy: true,
    maximumAge: 60000,
    timeout: 10000
}

navigator.geolocation.getCurrentPosition( parseCoords, getError, options );

Plus d’informations sur la localisation

La variable envoyée à notre fonction

parseCoords

peut contenir plus d’informations que les coordonnées :

  • timestamp

    : Heure de la mise à jour de la position (timestamp)

  • coords.altitude

    : Altitude de l’utilisateur

  • coords.accuracy

    : Précision de la latitude et de la longitude

  • coords.altitudeAccuracy

    : Précision de l’altitude

  • coords.heading

    : Angle par rapport au Nord (entre 0 et 360°)

  • coords.speed

    : Vitesse par rapport à la dernière position enregistrée

Ces données ne sont pas toujours disponibles, cela dépend principalement de l’appareil utilisé.

Démonstration

Ouvrir dans une nouvelle fenêtre.

Laisser une réponse