API_Geo/script.js at main · Xylo87/API_Geo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
// sélection de l'élément HTML avec la classe "cp"
const inputCP = document.querySelector(".cp")

// sélection de l'élément HTML avec la classe "ville"
const selectVille = document.querySelector(".ville")


// intégration de la carte dans le DOM (avec coordonnées et zoom initiaux)
let map = L.map("map").setView([48.866667, 2.333333], 8)

// ajout de la couche visuelle (+ zoom maximum & mentions légales)
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

// ajout d'un marqueur aux coordonnées désignées
let marker = L.marker([48.866667, 2.333333]).addTo(map);


// ajoute un écouteur d'évènement "input" (pendant la saisie) au champ de code postal
inputCP.addEventListener("input", async function() {

    // récupère la valeur entrée dans le champ de code postal
    let value = inputCP.value

    // vide le contenu actuel de la liste de sélection de ville
    selectVille.innerText = null

    // retrait du marqueur à chaque entrée
    marker.remove()

    // requête fetch vers l'API de géoloc avec le code postal saisi
    const response = await fetch(
        `https://geo.api.gouv.fr/communes?codePostal=${value}&fields=region,nom,code,codesPostaux,codeRegion,centre,population&boost=population&format=json`)

    // convertit la réponse en format JSON
    const data = await response.json()
    // console.log(data)

    // sauvegarde des coordonnées relatives au code postal
    let coorY = data[0].centre.coordinates[0]
    let coorX = data[0].centre.coordinates[1]

    // nouvelle "vue" de la carte en fonction des coordonnées
    map.setView([coorX, coorY], 8)

    // création et placement d'un nouveau marqueur pour correspondre aux coordonnées
    marker = L.marker([coorX, coorY]).addTo(map);

    // parcours chaque objet "ville" dans les données récupérées
    data.forEach(ville => {

        // créé un nouvel élément d'option HTML
        let option = document.createElement("option")

        // définit la valeur de l'option comme le code de la ville
        option.value = `${ville.code}`

        // définit le texte affiché de l'option comme le nom de la ville
        option.innerText = `${ville.nom}`

        // ajoute l'option à la liste de sélection de ville
        selectVille.append(option)
    });


// ajout d'un évènement "change" sur la liste de sélection
selectVille.addEventListener("change", function () {

    // recherche dans le tableau "data" du data.code qui correspond à la valeur en cours de la liste déroulante
    const maVille = data.find((element) => element.code === selectVille.value)

    // retrait du marqueur à chaque entrée
    marker.remove()

    // sauvegarde des coordonnées relatives au code postal
    let coorY = maVille.centre.coordinates[0]
    let coorX = maVille.centre.coordinates[1]

    // nouvelle "vue" de la carte en fonction des coordonnées
    map.setView([coorX, coorY], 8)

    // création et placement d'un nouveau marqueur pour correspondre aux coordonnées
    marker = L.marker([coorX, coorY]).addTo(map);
    })
})