Icon Leaflet map javascript

Question

I have some problems with my code... I am doing a map with marker icons that I place with a getJSON no problem to do that, the problem is that I have different icons and I create a function to build and set them:

 class Carte { constructor(divMap) { this.map = L.map(divMap).setView([-27.4710107, 153.0234489], 15); this.APImap = L.tileLayer( "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", { maxZoom: 18, id: "mapbox.streets", //ma clé d'accées mapbox accessToken: "pk.eyJ1IjoicmFmYTE4NyIsImEiOiJjazBlejByNTUwazBqM290aTR6ZTl1NHZsIn0.uen14wB6LPlL_450lJOynA" } ).addTo(this.map); this.rouge = L.icon({ iconUrl: "https://image.noelshack.com/fichiers/2019/39/1/1569259986-velorouge.png", shadowUrl: "https://image.noelshack.com/fichiers/2019/39/1/1569259993-shadow.png", iconSize: [40, 50], iconAnchor: [0, 50], popupAnchor: [21, -45], shadowSize: [50, 35], shadowAnchor: [0, 35] }); this.vert = L.icon({ iconUrl: "https://image.noelshack.com/fichiers/2019/39/1/1569259988-velovert.png", shadowUrl: "https://image.noelshack.com/fichiers/2019/39/1/1569259993-shadow.png", iconSize: [40, 50], iconAnchor: [0, 50], popupAnchor: [21, -45], shadowSize: [50, 35], shadowAnchor: [0, 35] }); this.orange = L.icon({ iconUrl: "https://image.noelshack.com/fichiers/2019/39/1/1569259983-veloorange.png", shadowUrl: "https://image.noelshack.com/fichiers/2019/39/1/1569259993-shadow.png", iconSize: [40, 50], iconAnchor: [0, 50], popupAnchor: [21, -45], shadowSize: [50, 35], shadowAnchor: [0, 35] }); } getJSON() { $.getJSON( "https://api.jcdecaux.com/vls/v1/stations?contract=brisbane&apiKey=afa1c4a53ff162ae3d6f6941a45c8caf14b5a4b7", station => { for (let i = 0; i < station.length; i++) { this.logoMarker(station[i].available_bikes, station[i].status); this.posMarker(station[i].position.lat, station[i].position.lng); this.popup( this.posMarker(station[i].position.lat, station[i].position.lng), station[i].status, station[i].address, station[i].available_bikes, station[i].available_bike_stands ); } } ); } logoMarker(nVelos, statut) { let choixMarker; // construction icon rouge si station fermée if (statut === "CLOSED") { choixMarker = this.rouge // construction icon orange si il ya moins de 3 vélos } else if (nVelos <= 3) { choixMarker = this.orange } // construction icon vert pour le reste else { choixMarker = this.vert } return choixMarker; } posMarker(lat, lng) { let marker = L.marker([lat, lng], { icon: this.logoMarker() }).addTo( this.map ); // display none du formulaire si ouvert au clic sur marquer $(".fermeture").click(() => { $("#formInfo").css("display", "none"); }); $(marker).click(() => { $("#formInfo").css("display", "none"); }); return marker; } popup(marker, statut, address, nVelos, nPlaces) { if (statut === "OPEN") { //popup avec nom et velos dispo dans la station cliqué marker.bindPopup( $( `<p>Station &#10140; <span>${address}</span><br>Velos disponibles &#10140; <span>${nVelos}</span><br><br><button id="inscri">Reservation</button></p>` ).click(() => { // gestion du boutton reservation if (statut === "OPEN" && nVelos > 0) { //ouverture form et ajout des donnes $("#formInfo").css("display", "block"); $(".nomStation").text(address); $(".status").text(statut); $(".velosDispo").text(nVelos); $(".placesDispo").text(nPlaces); } })[0] ); // replacement du boutton reservation par message "pas de velo" if (statut === "OPEN" && nVelos === 0) { marker.bindPopup( $( `<p>Station &#10140; <span>${address}</span><br>Velos disponibles &#10140; <span>${nVelos}</span><br><br><span style='color: red'>PAS DE VELOS DISPONIBLES</span></p>` )[0] ); } // replacement du boutton par message "station fermée" } else { marker.bindPopup( $( `<p>Station &#10140; <span>${address}</span><br>Velos disponibles &#10140; <span>${nVelos}</span><br><br><span style='color: red'>STATION FERMÉE</span></p>` )[0] ); } } } const carte = new Carte("map"); carte.getJSON();

 #map{ height: 400px; }

 <link href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" rel="stylesheet"/> <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='map'></div>

edit the code to be more clear.

Still have this problem only last icon appers thx for your help

Answer 1

You have to create your markers beforehand in the global scope (out of your function)

var veloRougeMarker = new LeafIcon({
    iconUrl: "./img/veloRouge.png"
  });
var veloOrangeMarker = new LeafIcon({
    iconUrl: "./img/veloOrange.png"
  });
var veloVertMarker = new LeafIcon({
    iconUrl: "./img/veloVert.png"
  });

And, in your choice, you will assign your choixMarker with one of the 3 markers

if (statut === "CLOSED") {
  choixMarker = veloRougeMarker;
}

TO CREATE YOUR MARKERS (in the getJSON function )...

      var marker = this.posMarker(station[i].position.lat, station[i].position.lng);
      marker.setIcon(this.logoMarker(station[i].available_bikes, station[i].status));
      this.popup(
        marker,
        station[i].status,
        station[i].address,
        station[i].available_bikes,
        station[i].available_bike_stands
      );