[LeafLet] Marqueur sur carte interactive non visible

Bonjour,

Je débute complètement en javaScript.
Je dois faire une carte interactive. Pour cela j'ai choisi OpenStreetMap et Leaflet.

J'arrive à afficher la carte sans problème ou même à afficher un seul marqueur. Mais je dois en afficher plusieurs à partir d'un fichier externe.
J'ai utilisé dans mon code un console.log pour vérifier que j'ai bien paramétrer l'appel à ce fichier. C'est correct.
Mais je ne vois aucun marqueur sur ma carte. J'ai donc soit oublié quelque chose, mal paramétrer quelque chose ou une simple erreur de frappe.

Je copie ci-dessous mes codes. Merci d'avance pour votre aide.

le fichier html (css incus pour ne faire qu'un ici)

Code:

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<link rel="icon" href="img/bike.jpg">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--fichiers leaflet-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<link rel="stylesheet" type="text/css" href="css/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="css/MarkerCluster.Default.css" />
 
 
    <title>Vélo'V</title>
</head>
<body>
 
   <div>
        <div id="map" style="height:500px;">
        </div>
 
        <div id="info">
            <table id="info-station">Station sélectionné
                <tr>
                    <th id="adresse-station"></th>
                </tr>
                <tr>
                    <td id="place-libre"></td>
                </tr>
                <tr>
                    <td id="velo-dispo"></td>
                </tr>
                <tr>
                    <td id="etat-station"></td>
                </tr>
            </table> 
        </div>
   </div>
 
<!--script javaScrip-->    
    <script src="js/ajax.js"></script>
    <script src="js/map.js"></script>
    <script src="js/leaflet.markercluster.js"></script>
</body>
 
</html>

mon fichier ajax.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function ajaxGet(url, callback) {
    var req = new XMLHttpRequest();
    req.open("GET", url);
    req.addEventListener("load", function () {
        if (req.status >= 200 && req.status < 400) {// Le serveur a réussi à traiter la requête
            // Appelle la fonction callback en lui passant la réponse de la requête
            callback(req.responseText);
        } else {
            // Affichage des informations sur l'échec du traitement de la requête
            console.error(req.status + " " + req.statusText + " " + url);
        }
    });
    req.addEventListener("error", function () {
        // La requête n'a pas réussi à atteindre le serveur
        console.error("Erreur réseau avec l'URL " + url);
    });
    req.send(null);
}

et le fichier map.js

Code:

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
//intitalisation de la carte
var map = {
	lat :'45.7604276',
	lng : '4.8335709',
	map : 'null',
	showMap : function() {
		map = L.map('map').setView([this.lat, this.lng], 13);  //centre de la carte et zoom par defaut
		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { //sources
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
	},	
    //definition des fonction des marqueurs et des popup
    marker : function(item){
		this.lat = item.position.lat;
		this.lng = item.position.lng;
	},
	createPopup : function(item) {
		this.name = item.name;
		return this.name;
	},
 
}
map.showMap();
 
 
 ajaxGet(
        "https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=***********", function (reponse) {
        var stations = JSON.parse(reponse);
            console.log(reponse); 
            function callback(reponse) {
            reponse = JSON.parse(reponse);
                //parcours le tableau lyon.js
            reponse.forEach(function (info) {
                L.marker([info.position.lat, info.position.lng],
            {            
            "jcdecauxInfo": info}           // on stocke ici toutes les infos
            )
                .on('click', onMarkerClick)         // fonction d'appel au click
                .addTo(map)
                .bindPopup(info.name);
                });
            };
        }
        );
 
 
//initialisation des marqueurs
 
 
function createPopup(arg) {
  // Récupération du marker concerné
    let marker = arg.target;
  // Récupération des infos
    var info = marker.options.jcdecauxInfo;
    var address = info.address;
    var bikeStands = info.bike_stands;
    var availableBikes = info.available_bikes;
    var statusStation = info.status;
  // Affichage du rendu
  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").innerHTML = bikeStands;
  document.getElementById("velo-dispo").innerHTML = availableBikes;
  document.getElementById("etat-station").innerHTML = statusStation;
}