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 83 84 85 86 87 88
| "use strict";
let carte = {
lat: 43.6044,
lng: 1.4442,
zoom: 13,
mapContainer: 'mapid',
displayMap: '',
addTo: '',
idMap: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoidGhyb3VkIiwiYSI6ImNqczRndjIxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
layer: 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
init : function() {
this.carte = L.map(this.mapContainer, {
center: [this.lat, this.lng],
zoom: this.zoom,
})
},
display : function() {
L.tileLayer(this.layer, {
id: this.idMap,
maxZoom: 18,
attribution: this.attribution,
accessToken: this.accessToken,
}).addTo(this.carte);
this.loadMarkers();
},
loadMarkers : function() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.jcdecaux.com/vls/v1/stations?contract=Toulouse&apiKey=ddaf955496241ed6e6f7aa8e998b982be31b0064');
xhr.addEventListener('load', function() {
if (xhr.status >= 200 && xhr.status < 400) {
carte.ma_callback(xhr.responseText);
} else {
carte.ma_callback(xhr.status);
}
});
xhr.addEventListener('error', function() {
console.log("erreur de connexion");
});
xhr.send();
},
ma_callback : function(response) {
response = JSON.parse(response);
response.forEach(function (info) {
L.marker(
[info.position.lat, info.position.lng],
{
"jcdecauxInfo": info}
)
.on('click', onMarkerClick)
.addTo(this.carte)
.bindPopup(info.name);
});
},
onMarkerClick : function(arg) {
let marker = arg.target;
let info = marker.options.jcdecauxInfo;
let address = info.address;
let bikeStands = info.bike_stands;
let availableBikes = info.available_bikes;
let statusStation = info.status;
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").innerText = bikeStands;
document.getElementById("velo-dispo").innerText = availableBikes;
document.getElementById("etat-station").innerText = statusStation;
}
}; |
Partager