Discussion :

[Lunesti]

Bonjour,

Ce code ci dessous me permet d'afficher une map avec des marqueurs en récupérant les datas via une API.

Sauf que, lorsque j'ouvre le navigateur la map apparaît bien mais pas les marqueurs. La console affiche :

Uncaught TypeError: Cannot read property 'map' of undefined
at Map.js:40
at Array.forEach (<anonymous>)
at Map.js:35
at XMLHttpRequest.<anonymous> (Map.js:20)

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
/*------------------------------------------
MAP
------------------------------------------*/
 
class Map {
    constructor() {
        this.map = L.map('map').setView([49.8941708, 2.2956951], 13);
        this.layer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(this.map);
 
        this.checking();
    }
 
    ajaxGet(url, callback) {
        var req = new XMLHttpRequest();
        req.open("GET", url);
        req.addEventListener("load", function() {
            if (req.status >= 200 && req.status < 400) {
                callback(req.responseText);
            } else {
                console.error(req.status + " " + req.statusText + " " + url);
            }
        });
        req.addEventListener("error", function() {
            console.error("Erreur réseau avec l'URL " + url);
        });
        req.send(null);
    }
 
    //Ajouter Markers
    addMarkers() {
        this.ajaxGet('http://api.jcdecaux.com/vls/v1/stations?contract=amiens&apiKey=86e2bc05a438193dfbc09fcaa44634b7c6641d2c', function(reponse) {
            let datas = JSON.parse(reponse);
            datas.forEach((data) => {
                L.marker(Object.values(data.position), {
                        "data": data
                    })
                    .addTo(this.map)
                    .on("click", this.clickEvent.bind(this, data));
            });
        });
    }
 
    clickEvent(data) {
        const formulaire = new Formulaire(new Station(data));
        formulaire.showForm();
        if (data.status === "OPEN" && data.available_bikes > 0) {
            L.marker({ icon: this.iconBleue })
        } else {
            L.marker({ icon: this.iconRouge })
        }
    }
 
    checking() {
        if (Storage.hasStationInfo()) {
            console.log('Les données stations existent');
            /*Storage.getStation();*/
            this.clickEvent(Storage.getStation());
            console.log("Station: ", Storage.getStation());
        } else {
            sessionStorage.clear();
        }
    }
 
};
 
const myMap = new Map(); // point d'entrée c'est içi //plusieurs classes // jai essayé de respecter les standard js // chaque class a ses focntionnalités qui lyui sont propre // class particulier dom que je reference des données statiques // j'ai chaque class qui fait ça // cointrpl d'input avec déclaration d'évènements
myMap.addMarkers();

est-ce un problème avec le this ? pourtant, la valeur est bien lu içi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
class Map {
    constructor() {
        this.map = L.map('map').setView([49.8941708, 2.2956951], 13);
        this.layer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(this.map);

Mais pas içi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 addMarkers() {
        this.ajaxGet('http://api.jcdecaux.com/vls/v1/stations?contract=amiens&apiKey=86e2bc05a438193dfbc09fcaa44634b7c6641d2c', function(reponse) {
            let datas = JSON.parse(reponse);
            datas.forEach((data) => {
                L.marker(Object.values(data.position), {
                        "data": data
                    })
                    .addTo(this.map)
                    .on("click", this.clickEvent.bind(this, data));
            });
        });
    }

[Lunesti]

Problème résolu, je devais simplement remplacer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
        this.ajaxGet('http://api.jcdecaux.com/vls/v1/stations?contract=amiens&apiKey=86e2bc05a438193dfbc09fcaa44634b7c6641d2c', function(reponse)  {

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

        this.ajaxGet('http://api.jcdecaux.com/vls/v1/stations?contract=amiens&apiKey=86e2bc05a438193dfbc09fcaa44634b7c6641d2c', (reponse) => {

( Étonnement ça fonctionne en passant par une fonction fléché mais pas en faisant function(parametre) {} )

[NoSmoking]

Bonjour,

( Étonnement ça fonctionne en passant par une fonction fléché mais pas en faisant function(parametre) {} )

comme quoi tu as déjà oublié ce qui t'a été dit dans une de tes discussion, à savoir : Chrono JS: passer du procédural en POO, voir post #10 et #11 par exemple !

Nota :
Une autre discussion, il y en a pas mal d'autres d'ailleurs, très très proche de tes préoccupations du moment : Convertir une requête Ajax procédurale en objet.

[Lunesti]

Effectviement je n'avais pas encore bien assimilé la distinction entre les fonctions flechés et les anciennes fonctions. Merci pour le rappel