Un compteur kilométrique simple utilisant l'API Geolocation

Michael Mahemoff

Introduction

L'API Geolocation vous permet de savoir où se trouve l'utilisateur et de suivre ses déplacements, toujours avec son consentement. Cette fonctionnalité peut être utilisée dans le cadre de requêtes utilisateur, par exemple pour guider quelqu'un vers une destination. Elle peut également être utilisée pour géolocaliser un contenu créé par l'utilisateur, par exemple pour indiquer l'endroit où une photo a été prise. L'API est indépendante de l'appareil. Elle ne se soucie pas de la façon dont le navigateur détermine la position, tant que les clients peuvent demander et recevoir des données de localisation de manière standard. Le mécanisme sous-jacent peut être le GPS, le Wi-Fi ou simplement demander à l'utilisateur de saisir manuellement sa position. Comme chacune de ces recherches prend un certain temps, l'API est asynchrone. Vous lui transmettez une méthode de rappel chaque fois que vous demandez une position.

L'exemple présenté ici est un compteur kilométrique qui affiche la position initiale et maintient l'affichage de la distance parcourue depuis le chargement de la page.

Étape 1 : Vérifier la compatibilité

Browser Support

• 5
• 12
• 3.5
• 5

Source

Vous pouvez facilement vérifier la compatibilité en testant la présence de l'objet de géolocalisation :

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

Étape 2 : Déclarer le code HTML du compteur de trajet

Dans cet exemple, vous allez créer un compteur kilométrique. Déclarez donc le code HTML suivant :

<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>

Les prochaines étapes utiliseront l'API Geolocation pour remplir toutes ces balises span vides.

Étape 3 : Déterminer la position actuelle de l'utilisateur

getCurrentPosition() signalera de manière asynchrone la position actuelle de l'utilisateur. Appelez-la dès que la page se charge, afin qu'elle renseigne correctement la position de départ et l'enregistre pour plus tard :

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
};

Si c'est la première fois qu'une application de ce domaine demande des autorisations, le navigateur vérifie généralement le consentement de l'utilisateur. Selon le navigateur, il peut également exister des préférences permettant de toujours autoriser ou interdire les recherches d'autorisation. Dans ce cas, le processus de confirmation est ignoré.

Après avoir exécuté ce code, vous devriez maintenant pouvoir voir la position de départ. Selon l'appareil de localisation utilisé par votre navigateur, l'objet de position peut contenir bien plus que la latitude et la longitude, par exemple l'altitude ou la direction. Vous pouvez explorer davantage en consignant la variable de position dans la console.

Étape 4 : Gérer les erreurs

Malheureusement, toutes les recherches de position ne sont pas concluantes. Il est possible qu'un GPS n'ait pas pu être localisé ou que l'utilisateur ait soudainement désactivé les recherches de position. Un deuxième argument facultatif de getCurrentPosition() sera appelé en cas d'erreur, ce qui vous permettra d'en informer l'utilisateur dans le rappel :

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
// same as above
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
//   0: unknown error
//   1: permission denied
//   2: position unavailable (error response from locaton provider)
//   3: timed out
});
};

Étape 5 : Surveiller la position de l'utilisateur

L'appel précédent à getCurrentPosition() n'a été exécuté qu'une seule fois, lors du chargement de la page. Pour suivre les modifications, utilisez watchPosition(). Elle avertit automatiquement une fonction de rappel chaque fois que l'utilisateur se déplace :

navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

Étape 6 : Afficher la distance parcourue

Cette étape n'est pas directement liée à l'API Geolocation, mais elle complète la démonstration et fournit un exemple d'utilisation des données de localisation. Ajoutez une ligne supplémentaire au gestionnaire watchPosition() pour renseigner la distance parcourue :

navigator.geolocation.watchPosition(function(position) {
// same as above
document.getElementById('distance').innerHTML =
    calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                    position.coords.latitude, position.coords.longitude);
});

La fonction calculateDistance() exécute un algorithme géométrique pour déterminer la distance entre deux coordonnées. L'implémentation JavaScript est adaptée d'un script fourni par Moveable Type sous une licence Creative Commons :

function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}