Suggestion Suisse Rue Pas à pas

Suggest a Swiss address.

Remarque : Il s'agit de la documentation de l'API v2 qui est toujours en version bêta.

Créez un formulaire rapide pour tester la fonctionnalité Suisse Suggest en suivant les étapes ci-dessous.

Étape 1 : créez la page HTML

Nous commençons par créer une page HTML vide, contenant une structure de page Web minimale.

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8" />
      <title>Suisse Suggest tutorial</title>
    </head>
    <body></body>
  </html>

Ajoutez le code suivant entre les balises <body> et </body>.

Cela ajoute les champs de saisie pour saisir l'adresse.

Étape 2 : ajoutez une interaction

Ajoutez le code JavaScript suivant dans un fichier .js séparé. Les identifiants et les noms de classe des éléments HTML doivent correspondre à ceux spécifiés dans ce fichier JavaScript afin d'obtenir les résultats corrects.

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    const pro6ppAuthKey = "AUTH_KEY"; // Replace with your actual authorization key

    let messageSpan = document.querySelector(".message");
    let jsonResponseSpan = document.querySelector(".jsonResponse");
    const BASE_URL = "https://api.pro6pp.nl/v2";

    function fetchAddress(authKey) {
        const queryParams = { 
            street: document.getElementById("street").value,
            postalCode: document.getElementById("postalCode").value,
            settlement: document.getElementById("settlement").value,
            maxResults: document.getElementById("maxResults").value,
            cursor: document.getElementById("cursor").value,
            authKey: authKey 
        };

        let encodedUrl = new URL(`${BASE_URL}/suggest/ch/street`);
        encodedUrl.search = new URLSearchParams(queryParams);

        fetch(encodedUrl)
            .then(async (response) => {
                const data = await response.json();
                if (data) {
                    messageSpan.textContent = "";
                    jsonResponseSpan.textContent = JSON.stringify(data, null, 2);
                }
            })
            .catch((error) => {
                console.error("Error fetching: ", error);
                messageSpan.textContent = error.message;
            });
    }

    const form = document.getElementById("form");
    form.onsubmit = function (event) {
        event.preventDefault();
        fetchAddress(pro6ppAuthKey);
    }
});

Étape 3 : faites-le fonctionner

Liez le fichier JavaScript dans le fichier .html juste avant de fermer la balise </body>. Remplacez {filename} par le nom réel de votre fichier JavaScript.

<script src="{filename}.js"></script>

Pour accéder au service Web Pro6PP, vous devez demander votre clé d'autorisation personnelle. Cette clé vous est envoyée par e-mail juste après votre inscription.

Remplacez l'espace réservé ci-dessus AUTH_KEY par votre clé d'autorisation personnelle.