Marqueur sur carte interactive non visible

**ly li** · 19/10/2019, 13h43

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 HTML :

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
<!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 :

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
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 :

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
//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;
}

**hclatomic** · 22/10/2019, 17h51

On ne peut pas tester puisque nous n'avons pas accès à ton backend.

Le vieillard que je suis te conseille de faire du simple au complexe. D'abord affiche ton marker, sans Ajax et tout le tremblement. Quand ça marche, construis ton marker à partir d'un Json local similaire à celui que tu recevras du serveur, et affiche le comme tu l'as fait précédemment. Quand ça marche, connecte toi à ton serveur.

Cordialement
Hervé

Marqueur sur carte interactive non visible

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager