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 70 71 72 73 74 75 76 77 78 79 80 81 82
|
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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.map);
this.checkDatas();
}
//On verifie si les données de la station existent puis on les affiche en envoyant l'objet station au formulaire
checkDatas() {
if (Storage.hasStationInfo()) {
this.initForm(Storage.getStation());
} else {
Storage.getClear();
}
}
//On passe en paramètre l'url + la fonction appelé en cas de succès
ajaxGet(url, callback) {
let req;
//IE5 et 6 utilisant un objet ActiveX au lieu de l'objet XMLHttpRequest, on vérifie si le navigateur prend en charge l'objet XMLHttpRequest, sinon créer un objet ActiveX;
//XMLHttpRequest est un objet qui est utilisé pour échanger des données avec un serveur
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else {
req = new ActiveXObject('Microsoft.XMLHTTP');
}
//On specifie le type de requête (GET ou POST) et l'adresse du fichier
req.open("GET", url);
//Au chargement de la page, si le statut est OK,
req.addEventListener("load", function() {
if (req.status >= 200 && req.status < 400) {
//On appel la fonction callback en lui passant la réponse de la requete
callback(req.responseText);
} else {
console.error(req.status + " " + req.statusText + " " + url);
}
});
req.addEventListener("error", function() {
console.error("Erreur réseau avec l'URL " + url);
});
//On envoie la requête au serveur
req.send();
}
//Ajouter Markers
initMarkers() {
this.ajaxGet('https://cors-anywhere.herokuapp.com/http://api.jcdecaux.com/vls/v1/stations?contract=amiens&apiKey=86e2bc05a438193dfbc09fcaa44634b7c6641d2c', (reponse) => {
let datas = JSON.parse(reponse);
//datas.forEach((data) => {
for (const data of datas) {
L.marker(Object.values(data.position), {
"data": data
})
.addTo(this.map)
.on("click", this.initForm.bind(this, data), Dom.canvasElement.style.display = 'inherit');
}
});
}
initForm(data) {
if (this.formulaire == undefined) {
this.formulaire = new Formulaire(new Station(data));
} else {
this.formulaire.station = new Station(data);
}
}
};
const myMap = new Map();
myMap.initMarkers(); |
Partager