11348 sujets

JavaScript, DOM et API Web HTML5

Bonsoir j'ai un soucis pour passer mes requêtes ajax de procédural à orienté objet. Je dois, dans un premier temps, afficher une map ainsi que des markers, autant afficher la map en objet j'y arrive mais pour les markers je bloque. Je suis preneur de toute aide/information/solution/piste/variante...

Voici le procédural qui fonctionne :
 
let rouen = [49.436511, 1.090534]
let myMap = L.map('map').setView(rouen, 13.5);
L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
  maxZoom: 20,
  attribution: '&copy; Openstreetmap France | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(myMap); 
$.ajax({
  url: "https://api.jcdecaux.com/vls/v3/stations?contract=rouen&apiKey=f31b2644b542ceea892be74f5fd48dc4337dc155",
  method: "GET",
  dataType: "json",
  success: addMarkers
})
function addMarkers(data) {
  for (let i = 0; i < data.length; i++) {
    let mark = L.marker([data[i].position.latitude, data[i].position.longitude]).addTo(myMap);
  }
}  
Et la version orienté objet ou je coince pour afficher les markers :
   class Map {
  constructor() {
    this.lat = 49.436511;
    this.long = 1.090534;
    this.zoom = 13.5;
    this.myMap = L.map('map').setView([this.lat, this.long], this.zoom);
    this.maxZoom = 20;
    this.initializeMap();
    this.getAjax();
    this.addMarkers();
  };

  initializeMap() {
    L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
      maxZoom: this.maxZoom,
      attribution: '&copy; Openstreetmap France | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(this.myMap);
  }
  getAjax() {
    $.ajax({
      url: "https://api.jcdecaux.com/vls/v3/stations?contract=rouen&apiKey=f31b2644b542ceea892be74f5fd48dc4337dc155",
      method: "GET",
      dataType: "json",
      success: addMarkers
    })
  }
  addMarkers(data) {
    for (this.i = 0; this.i < this.data.length; this.i++) {
      L.marker(this.data[i].position.latitude, this.data[i].position.longitude[i]).addTo(this.myMap);
    }
  }
};
let mapRouen = new Map();   


Ainsi addMarkers du success n'est plus défini, je suppose que cela vient du fait que la requête ajax est englobé dans la méthode d'instance "getAjax" et est donc hors scope, mais je ne vois pas comment palier cela. J'ai aussi essayé de passer en objet la même requête sans utiliser jQuery mais en vain. En espérant ne pas avoir pondu un code trop long pour le forum, je vous remercie d'avance.
Modifié par Founix (09 May 2020 - 01:50)
Problème résolu, plusieurs erreurs étaient présente, j'appelais deux fois addMarker , l'emploi de success plutôt que .done et des soucis de paramètres.

class Map {
    constructor() {
        this.lat = 49.436511;
        this.long = 1.090534;
        this.zoom = 13.5;
        this.myMap = L.map('map').setView([this.lat, this.long], this.zoom);
        this.maxZoom = 20;

        this.initializeMap();
        this.getAjax();
    };
    initializeMap() {
        L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
            maxZoom: this.maxZoom,
            attribution: '&copy; Openstreetmap France | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        }).addTo(this.myMap);
    }

    getAjax() {
        $.ajax({
                url: "https://api.jcdecaux.com/vls/v3/stations?contract=rouen&apiKey=f31b2644b542ceea892be74f5fd48dc4337dc155",
                method: "GET",
                dataType: "json",
                context: this
            })
            .done(function (marqueurs) {
                this.addMarkers(marqueurs, this.myMap);
            });
    }
    addMarkers(data, i) {
        for (i = 0; i < data.length; i++) {
            if (data[i].mainStands.availabilities.bikes == 0 || data[i].status === "CLOSED") {
                let mark = L.marker([data[i].position.latitude, data[i].position.longitude], {
                    icon: this.redIcon
                }).addTo(this.myMap);

            }
        };
    };
}    
const mapRouen = new Map();