API de géolocalisation HTML

Lucas D. - July 19, 2024

Bases de l'API de géolocalisation

L'API de géolocalisation permet aux applications web d'accéder aux données de localisation de l'utilisateur, si celui-ci l'autorise. Elle fonctionne en utilisant diverses méthodes pour déterminer la position de l'utilisateur, telles que le GPS, le Wi-Fi et la triangulation des antennes cellulaires.

L'API comporte trois méthodes principales :

getCurrentPosition() : Cette méthode obtient la position actuelle de l'utilisateur. Elle prend comme paramètre une fonction de rappel de succès, qui est appelée avec un objet Position contenant les données de localisation.
watchPosition() : Cette méthode surveille la position de l'utilisateur au fil du temps. Elle fonctionne de manière similaire à getCurrentPosition(), mais continue d'appeler la fonction de rappel de succès chaque fois que la position de l'utilisateur change.
clearWatch() : Cette méthode arrête la surveillance de la position de l'utilisateur. Elle prend un paramètre watchID, qui est renvoyé par la méthode watchPosition().

L'objet Position renvoyé par les méthodes getCurrentPosition() et watchPosition() contient une propriété coords et une propriété timestamp.

La propriété coords contient les propriétés suivantes :

Propriété	Description
`latitude`	La latitude de l'utilisateur en degrés décimaux.
`longitude`	La longitude de l'utilisateur en degrés décimaux.
`altitude`	L'altitude de l'utilisateur en mètres au-dessus de l'ellipsoïde WGS84, si disponible.
`accuracy`	La précision des coordonnées de latitude et de longitude en mètres.
`altitudeAccuracy`	La précision de l'altitude en mètres, si disponible.
`heading`	Le cap de l'utilisateur en degrés dans le sens horaire par rapport au nord géographique, si disponible.
`speed`	La vitesse au sol de l'utilisateur en mètres par seconde, si disponible.

La propriété timestamp est un objet DOMTimeStamp qui représente le moment où la localisation a été récupérée.

Ces méthodes et propriétés forment le cœur de l'API de géolocalisation, permettant aux applications web d'accéder et d'utiliser les données de localisation de l'utilisateur de diverses manières.

Utilisation de l'API de géolocalisation

Avant d'utiliser l'API de géolocalisation dans une application web, vérifiez si le navigateur de l'utilisateur la prend en charge. Cela peut être fait en vérifiant si l'objet navigator.geolocation existe. S'il existe, le navigateur prend en charge l'API de géolocalisation.

Une fois le support du navigateur confirmé, demandez la permission de l'utilisateur pour accéder à ses données de localisation. Cela se fait en appelant la méthode getCurrentPosition() ou watchPosition(). Lorsque l'une de ces méthodes est appelée, le navigateur affichera une boîte de dialogue demandant à l'utilisateur s'il souhaite autoriser l'application web à accéder à sa localisation.

Si l'utilisateur autorise l'accès, la méthode getCurrentPosition() renverra la position actuelle de l'utilisateur sous forme d'objet Position. Cet objet contient la latitude, la longitude et d'autres données de localisation.

Pour obtenir la position de l'utilisateur en continu, utilisez la méthode watchPosition(). Cette méthode fonctionne comme getCurrentPosition(), mais elle continuera d'appeler la fonction de rappel de succès chaque fois que la position de l'utilisateur change. Cela peut être utile pour les applications qui doivent suivre la position de l'utilisateur au fil du temps, comme une application de suivi de fitness.

Gérez les erreurs qui peuvent survenir lors de l'utilisation de l'API de géolocalisation. Des erreurs peuvent se produire pour diverses raisons, comme l'utilisateur refusant l'autorisation d'accéder à sa position ou le navigateur ne pouvant pas obtenir les données de localisation. Gérez les erreurs en passant une fonction de rappel d'erreur aux méthodes getCurrentPosition() ou watchPosition().

Lors de l'utilisation de l'API de géolocalisation, suivez les meilleures pratiques pour concevoir une bonne expérience utilisateur :

Meilleure pratique	Description
Ne demandez les données de localisation que si nécessaire	Ne demandez les données de localisation que lorsque c'est nécessaire pour le bon fonctionnement de l'application.
Fournissez des instructions claires	Donnez des instructions claires à l'utilisateur sur la façon d'autoriser ou de refuser l'accès à ses données de localisation.
Affichez une notification claire	Montrez une notification claire et discrète lorsque la position de l'utilisateur est suivie.
Permettez à l'utilisateur de désactiver le suivi	Laissez l'utilisateur désactiver facilement le suivi de sa position s'il ne souhaite plus être suivi.
Utilisez les données de localisation de manière responsable	Utilisez les données de localisation de manière responsable et ne les partagez pas avec des tiers sans le consentement de l'utilisateur.

Conseil: Vérifier si le navigateur prend en charge l'API de géolocalisation

if ('geolocation' in navigator) {
    console.log('La géolocalisation est disponible');
} else {
    console.log('La géolocalisation n\'est pas prise en charge par ce navigateur');
}

Conseil: Obtenir la position actuelle avec l'API de géolocalisation

navigator.geolocation.getCurrentPosition(
    function(position) {
        console.log('Latitude : ' + position.coords.latitude);
        console.log('Longitude : ' + position.coords.longitude);
    },
    function(error) {
        console.error('Code d\'erreur = ' + error.code + ' - ' + error.message);
    }
);

Conseil: Surveiller la position avec l'API de géolocalisation

let watchID = navigator.geolocation.watchPosition(
    function(position) {
        console.log('Latitude : ' + position.coords.latitude);
        console.log('Longitude : ' + position.coords.longitude);
    },
    function(error) {
        console.error('Code d\'erreur = ' + error.code + ' - ' + error.message);
    }
);

Conseil: Arrêter la surveillance de la position avec l'API de géolocalisation

navigator.geolocation.clearWatch(watchID);

Exemples d'API de Géolocalisation

Voici quelques exemples d'utilisation de l'API de Géolocalisation dans les applications web :

Obtenir la position de l'utilisateur

Conseil: Exemple de récupération de la position

<!DOCTYPE html>
<html>
<body>
    <p>Cliquez sur le bouton pour obtenir votre position :</p>
    <button onclick="getLocation()">Obtenir la position</button>
    <p id="location"></p>

    <script>
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                document.getElementById("location").innerHTML = "La géolocalisation n'est pas prise en charge par ce navigateur.";
            }
        }

        function showPosition(position) {
            document.getElementById("location").innerHTML = "Latitude : " + position.coords.latitude +
            "<br>Longitude : " + position.coords.longitude;
        }
    </script>
</body>
</html>

Cet exemple montre comment obtenir la position actuelle de l'utilisateur et l'afficher sur la page. Lorsque l'utilisateur clique sur le bouton "Obtenir la position", la fonction getLocation() est appelée. Elle vérifie si le navigateur prend en charge la géolocalisation. Si c'est le cas, elle appelle la méthode getCurrentPosition() en passant la fonction showPosition() comme callback. La fonction showPosition() affiche ensuite la latitude et la longitude de l'utilisateur sur la page.

Suivre la position de l'utilisateur

Conseil: Exemple de suivi de la position

<!DOCTYPE html>
<html>
<body>
    <p>Cliquez sur le bouton pour commencer à suivre votre position :</p>
    <button onclick="startWatch()">Démarrer le suivi</button>
    <button onclick="stopWatch()">Arrêter le suivi</button>
    <p id="location"></p>

    <script>
        let watchID;

        function startWatch() {
            if (navigator.geolocation) {
                watchID = navigator.geolocation.watchPosition(showPosition);
            } else {
                document.getElementById("location").innerHTML = "La géolocalisation n'est pas prise en charge par ce navigateur.";
            }
        }

        function showPosition(position) {
            document.getElementById("location").innerHTML = "Latitude : " + position.coords.latitude +
            "<br>Longitude : " + position.coords.longitude;
        }

        function stopWatch() {
            navigator.geolocation.clearWatch(watchID);
        }
    </script>
</body>
</html>

Cet exemple montre comment suivre la position de l'utilisateur au fil du temps. Lorsque l'utilisateur clique sur le bouton "Démarrer le suivi", la fonction startWatch() est appelée. Elle vérifie si le navigateur prend en charge la géolocalisation. Si c'est le cas, elle appelle la méthode watchPosition() en passant la fonction showPosition() comme callback. La méthode watchPosition() renvoie un watchID qui est stocké dans une variable.

La fonction showPosition() est appelée chaque fois que la position de l'utilisateur change, et elle affiche la latitude et la longitude de l'utilisateur sur la page.

Pour arrêter le suivi de la position de l'utilisateur, celui-ci peut cliquer sur le bouton "Arrêter le suivi", qui appelle la fonction stopWatch(). Cette fonction appelle la méthode clearWatch() en passant le watchID pour arrêter le suivi de la position de l'utilisateur.

Afficher la position de l'utilisateur sur une carte

Conseil: Exemple d'affichage sur une carte

<!DOCTYPE html>
<html>
<head>
    <title>Exemple d'API de Géolocalisation</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=VOTRE_CLE_API"></script>
    <script>
        function initMap() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                alert("La géolocalisation n'est pas prise en charge par ce navigateur.");
            }
        }

        function showPosition(position) {
            var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var mapOptions = {
                center: latLng,
                zoom: 12
            };
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                title: 'Votre position'
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id="map" style="height: 500px; width: 500px;"></div>
</body>
</html>

Cet exemple montre comment afficher la position de l'utilisateur sur une carte Google. Il utilise l'API JavaScript de Google Maps pour créer une carte et ajouter un marqueur à la position de l'utilisateur.

Lorsque la page se charge, la fonction initMap() est appelée. Elle vérifie si le navigateur prend en charge la géolocalisation. Si c'est le cas, elle appelle la méthode getCurrentPosition() en passant la fonction showPosition() comme callback.

La fonction showPosition() crée un objet LatLng avec la latitude et la longitude de l'utilisateur, et définit les options de la carte pour centrer la carte sur la position de l'utilisateur avec un niveau de zoom de 12. Elle crée ensuite un nouvel objet Map avec les options spécifiées et ajoute un marqueur à la position de l'utilisateur.

Note : Vous devez remplacer VOTRE_CLE_API par votre véritable clé API Google Maps pour que cet exemple fonctionne.

Calculer la distance entre deux points

Conseil: Exemple de calcul de distance

function calculateDistance(lat1, lon1, lat2, lon2) {
    const R = 6371; // Rayon de la Terre en km
    const dLat = deg2rad(lat2 - lat1);
    const dLon = deg2rad(lon2 - lon1); 
    const a = 
        Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
        Math.sin(dLon/2) * Math.sin(dLon/2); 
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    const d = R * c; // Distance en km
    return d;
}

function deg2rad(deg) {
    return deg * (Math.PI/180);
}

Pour utiliser cette fonction, vous pouvez l'appeler avec la latitude et la longitude de deux points, comme ceci :

const lat1 = 51.5074;
const lon1 = -0.1278;
const lat2 = 48.8566;
const lon2 = 2.3522;
const distance = calculateDistance(lat1, lon1, lat2, lon2);
console.log(`La distance entre (${lat1}, ${lon1}) et (${lat2}, ${lon2}) est de ${distance} km.`);

Cet exemple montre comment calculer la distance entre deux points en utilisant leurs coordonnées de latitude et de longitude.

La fonction calculateDistance() prend comme paramètres la latitude et la longitude de deux points. Elle calcule ensuite la distance entre les deux points en utilisant la formule de Haversine, qui prend en compte la courbure de la Terre.

La fonction deg2rad() est une fonction auxiliaire qui convertit les degrés en radians, ce qui est nécessaire pour la formule de Haversine.

Ces exemples montrent quelques façons d'utiliser l'API de Géolocalisation pour créer des applications web conscientes de la localisation. Avec la possibilité d'obtenir la position de l'utilisateur, de suivre sa position au fil du temps, d'afficher sa position sur une carte et de calculer les distances entre les points, vous pouvez créer une gamme d'applications qui utilisent les données de localisation de l'utilisateur.