Aller au contenu

De la permission à l’adresse : la géolocalisation JavaScript complète

Javascript

⏱️ 25 min

Ce tutoriel explique comment utiliser la géolocalisation en JavaScript à travers quatre scénarios pratiques, en s'appuyant sur les API du navigateur et les services publics de l'État (Géoservices et API Découpage Administratif).

Structure du projet :

Un fichier index.html qui contient les éléments d'interface (boutons, champs de saisie, zones d'affichage).

<!DOCTYPE html>

<html lang="fr">

<head>

  <meta charset="UTF-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Démonstration Géolocalisation (JS)</title>



  <!-- Vous pouvez charger un seul script pendant la démo (comme dans la vidéo),

       ou les quatre d’un coup. Ici on charge les quatre avec defer. -->

  <script src="js/geoloc.js" defer></script>

  <script src="js/reverse.js" defer></script>

  <script src="js/communes.js" defer></script>

  <script src="js/forward.js" defer></script>

</head>

<body>

  <h1>Démo Géolocalisation (JS)</h1>



  <section id="consent">

    <h2>1) Accord de l'utilisateur</h2>

    <p>On vérifie l'état de permission puis on demande la position.</p>

    <button id="btnLocate">Me géolocaliser</button>

    <div id="consentLog"></div>

  </section>



  <section id="reverse">

    <h2>2) Reverse (IGN - Géoplateforme)</h2>

    <p>Depuis (lat, lon) → lat: 48.8566, lon: 2.3522.</p>

    <button id="btnReverse">Récupérer les adresses</button>

    <pre id="reverseOut"></pre>

  </section>



  <section id="communes">

    <h2>3) Communes (geo.api.gouv.fr)</h2>

    <p>Recherche par nom / code postal.</p>

    <input id="qCommune" placeholder="Ex: Nantes ou 75001" />

    <button id="btnCommuneNom">Chercher par nom</button>

    <button id="btnCommuneCP">Chercher par code postal</button>

    <pre id="communesOut"></pre>

  </section>



  <section id="forward">

    <h2>4) Search (IGN - Géoplateforme)</h2>

    <p>Texte → coordonnées (autocomplétion possible).</p>

    <input id="qSearch" placeholder="Ex: 8 bd du Port 95000" />

    <button id="btnSearch">Géocoder</button>

    <pre id="searchOut"></pre>

  </section>

</body>

</html>

Quatre fichiers JavaScript distincts pour chaque scénario : geoloc.js, reverse.js, communes.js, et forward.js.

Scénario 1 : Demander la géolocalisation de l'utilisateur (geoloc.js)

L'objectif est de demander au navigateur la permission d'accéder à la position de l'utilisateur et d'afficher ses coordonnées (latitude et longitude).

1. Sélectionner les éléments HTML
On commence par récupérer le bouton qui déclenchera l'action et la div où afficher le résultat.

const btnLocate = document.querySelector('#btnLocate');

const consentLog = document.querySelector('#consentLog');

2. Ajouter un écouteur d'événement
On écoute le clic sur le bouton pour lancer la logique de géolocalisation.

btnLocate.addEventListener('click', () => {

    // Le code qui suit sera exécuté au clic

});

3. Vérifier la compatibilité du navigateur
Il est crucial de vérifier si l'API geolocation est disponible dans l'objet navigator du navigateur.

if (!("geolocation" in navigator)) {

    consentLog.textContent = "Géolocalisation non supportée";

    return; // On arrête l'exécution si l'API n'existe pas.

}

Note de l'auteur : Ce message s'affichera si l'appareil (ex: un PC sans puce GPS) ou le navigateur ne prend pas en charge la géolocalisation.

4. Demander la position actuelle
Si l'API est disponible, on utilise navigator.geolocation.getCurrentPosition(). Cette fonction prend deux fonctions en argument (callbacks) :

La première s'exécute en cas de succès (l'utilisateur accepte).

La seconde s'exécute en cas d'erreur (l'utilisateur refuse ou une erreur technique survient).

navigator.geolocation.getCurrentPosition(

    // Callback de succès

    (position) => {

        // On affiche la latitude et la longitude

        consentLog.textContent = `Latitude : ${position.coords.latitude}, Longitude : ${position.coords.longitude}`;

        console.log(position); // Pour inspecter l'objet complet dans la console

    },

    // Callback d'erreur

    (error) => {

        consentLog.textContent = "Refus par l'utilisateur";

    }

);

Note de l'auteur : Au clic, une pop-up de consentement apparaît. Si l'utilisateur clique sur "Bloquer", le message "Refus par l'utilisateur" s'affiche. S'il autorise, les coordonnées apparaissent après un court instant. L'objet position contient coords, qui lui-même contient latitude, longitude et accuracy (la précision de la mesure, qui est plus faible sur une connexion filaire).

Scénario 2 : Géocodage inversé (reverse.js)

Ici, on part de coordonnées GPS fixes pour retrouver les adresses postales correspondantes via l'API Géoplateforme de l'IGN.

1. Sélectionner les éléments HTML

const btnReverse = document.querySelector('#btnReverse');

const reverseOut = document.querySelector('#reverseOut');

2. Écouter le clic et construire l'URL de l'API
Au clic, on prépare une requête fetch vers l'API.

btnReverse.addEventListener('click', () => {

    // On vide les résultats précédents

    reverseOut.innerHTML = '';

    

    // On crée l'URL de l'API

    const url = new URL("https://data.geopf.fr/geocodage/reverse");

    

    // On ajoute les paramètres `lat` et `lon` à l'URL

    url.searchParams.set("lat", "48.8566");

    url.searchParams.set("lon", "2.3522");

    

    // ... suite à l'étape 3

});

3. Effectuer la requête fetch et traiter la réponse
On envoie la requête, on convertit la réponse en JSON, puis on affiche les résultats.

    fetch(url)

        .then(res => res.json()) // Convertit la réponse en objet JavaScript

        .then(data => {

            console.log(data); // Inspecter la structure de la réponse

            

            // La réponse contient un tableau `features`. On boucle dessus.

            for (let feature of data.features) {

                // Chaque `feature` a des `properties` dont un `label` (l'adresse)

                reverseOut.innerHTML += `<p>${feature.properties.label}</p>`;

            }

        });

Note de l'auteur : La réponse de l'API est un objet contenant un tableau features. Chaque élément de ce tableau est un objet représentant une adresse trouvée, avec ses propriétés (properties). Nous extrayons le label pour l'afficher. Le fait de vider reverseOut.innerHTML au début de l'événement permet de ne pas cumuler les résultats à chaque clic.

Scénario 3 : Recherche de communes (communes.js)

On utilise l'API Découpage Administratif pour rechercher des communes par nom ou par code postal.

1. Sélectionner tous les éléments HTML

const qCommune = document.querySelector('#qCommune'); // Le champ de saisie

const btnCommuneNom = document.querySelector('#btnCommuneNom');

const btnCommuneCP = document.querySelector('#btnCommuneCP');

const communesOut = document.querySelector('#communesOut');

2. Gérer la recherche par nom
Le code est très similaire au scénario précédent.

btnCommuneNom.addEventListener('click', () => {

    communesOut.innerHTML = '';

    

    const url = new URL("https://geo.api.gouv.fr/communes");

    // Le paramètre est `nom` et sa valeur vient du champ de saisie

    url.searchParams.set("nom", qCommune.value);

    

    fetch(url)

        .then(res => res.json())

        .then(data => {

            // La réponse est directement un tableau de communes

            for (let city of data) {

                communesOut.innerHTML += `<p>${city.nom}</p>`;

            }

        });

});

Note de l'auteur : Il est important de noter que ce code ne contient aucune vérification de sécurité (comme la protection contre les injections XSS). Dans un vrai projet, il faudrait valider et nettoyer la valeur de qCommune.value.

3. Gérer la recherche par code postal
La logique est identique, seul le paramètre de l'URL change.

btnCommuneCP.addEventListener('click', () => {

    communesOut.innerHTML = '';

    

    const url = new URL("https://geo.api.gouv.fr/communes");

    // Attention : le paramètre pour le code postal est `codePostal` avec un 'P' majuscule.

    url.searchParams.set("codePostal", qCommune.value);

    

    fetch(url)

        .then(res => res.json())

        .then(data => {

            for (let city of data) {

                communesOut.innerHTML += `<p>${city.nom}</p>`;

            }

        });

});

Scénario 4 : Géocodage direct (forward.js)

C'est l'opération inverse du scénario 2 : on part d'une adresse textuelle pour obtenir des informations détaillées, y compris les coordonnées GPS.

1. Sélectionner les éléments HTML

const qSearch = document.querySelector('#qSearch');

const btnSearch = document.querySelector('#btnSearch');

const searchOut = document.querySelector('#searchOut');

2. Gérer la recherche
La logique est quasiment la même que pour le géocodage inversé, mais avec un point d'entrée (endpoint) et un paramètre différents.

btnSearch.addEventListener('click', () => {

    searchOut.innerHTML = '';

    

    const url = new URL("https://data.geopf.fr/geocodage/search");

    // Le paramètre de recherche textuelle est `q`

    url.searchParams.set("q", qSearch.value);

    

    fetch(url)

        .then(res => res.json())

        .then(data => {

            // La structure de réponse est la même que pour le reverse : data.features

            for (let feature of data.features) {

                searchOut.innerHTML += `<p>${feature.properties.label}</p>`;

            }

        });

});

Note de l'auteur : En cherchant "8 rue de la paix à Paris", l'API retourne plusieurs résultats pertinents contenant ces mots-clés (à Paris, mais aussi à Cormeilles-en-Parisis, etc.). En plus du label, la réponse de l'API contient de nombreuses autres informations utiles comme le score de pertinence, le code postal, et surtout la geometry avec les coordonnées GPS.

 

De la permission à l’adresse : la géolocalisation JavaScript complète
Article publié le

Mots-clés : Tutoriel HTML CSS Javascript

Partager :