Hello !

Voilà je souhaite transformé mon code en objet afin de m'exercer, cependant j'ai du mal à comprendre comment appeler une méthode, je crois que je confond un peu tout notamment les méthodes et les fonctions.

Voici mon code qui est censé afficher une map avec des marqueurs à l'aide d'une API.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
 
let xhr = new XMLHttpRequest();
 
xhr.open('GET', 'https://api.jcdecaux.com/vls/v1/stations?contract=xxxxxxx&apiKey=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
 
xhr.addEventListener('load', function() {
 
    if (xhr.status >= 200 && xhr.status < 400) {
        ma_callback(xhr.responseText);
 
    } else {
        ma_callback(xhr.status);
    }
});
 
xhr.addEventListener('error', function() {
 
    console.log("erreur de connexion");
 
});
 
xhr.send(null);
 
let carte = {
    lat: 43.6044,
    lng: 1.4442,
    zoom: 13,
    mapContainer: 'mapid',
    mymap: '',
    displayMap: '',
    addTo: '',
    idMap: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoidGhyb3VkIiwiYSIxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    layer: 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
 
    init() {
      this.mymap = L.map(this.mapContainer, {center: [this.lat, this.lng], zoom: this.zoom});
    },
 
    display() {
      this.displayMap = L.tileLayer(this.layer, {id: this.idMap, accessToken: this.accessToken})
    },
 
    ajout() {
      this.addTo = addTo(this.mymap)
    },
 
    callback : function(response) {
      response = JSON.parse(response);
      response.forEach(function (info) {
      L.marker(
          [info.position.lat, info.position.lng],
          {            
            "jcdecauxInfo": info}// On ajoute une option au marker qui a pour propriété jcdecauxInfo et comme valeur info
        )
        .on('click', onMarkerClick)// Fonction d'appel lors du click
        .addTo(mymap)
        .bindPopup(info.name);
      });
    },
 
    onMarkerClick : function(arg) {
  // Récupération du marker concerné
      let marker = arg.target;
  // Récupération des infos
      let info = marker.options.jcdecauxInfo;
      let address = info.address;
      let bikeStands = info.bike_stands;
      let availableBikes = info.available_bikes;
      let statusStation = info.status;
  // Affichage du rendu avec la méthode "document.getElementById" qui permet le renvoi d'un élément
      document.getElementById("info-station").style.display = "block";// Apparition du bloc contenant les infos de la station sélectionnée
      document.getElementById("adresse-station").innerText = address;
      document.getElementById("place-libre").innerText = bikeStands;
      document.getElementById("velo-dispo").innerText = availableBikes;
      document.getElementById("etat-station").innerText = statusStation;
    } 
};
Merci par avance.