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
| export default class MapLeaflet extends L.Class {
constructor(conteneur, latitude, longitude) {
super();
this.apiObj = L;
this.conteneur = document.getElementById(conteneur);
this.fond = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}';
this.fondId = 'mapbox.streets';
this.accessToken = 'pk.eyJ1IjoibGF1cmF0b21hc2luaSIsImEiOiJjanRscnRiODIyNDY1NDNteHduazJ5OHdkIn0.xw9htpDdxcy75-KKmILUwg'
this.lat = latitude;
this.lng = longitude;
this.positionInitiale = [this.lat, this.lng];
this.myMap = this.apiObj.map(this.conteneur).setView(this.positionInitiale, 14);
}
createMap() {
// CREATION DU CALQUE IMAGE DE LA CARTE
this.apiObj.tileLayer(this.fond, {
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>',
maxZoom: 18,
id: this.fondId,
accessToken: this.accessToken
}).addTo(this.myMap);
}
createMarker() {
// AJOUT DES MARKEURS
for (let i = 0; i < rep.length; i++) {
this.apiObj.marker(
[rep[i].position.lat, rep[i].position.lng],
{
"title": rep[i].name,
}
)
.on('click', () => {this.clickMarker()})
.addTo(this.myMap);
};
}
clickMarker() {
// recuperation des données des markeurs
this.stationName = this.apiObj.marker.options.title;
document.getElementById('stationName').innerHTML = this.stationName;
}
} |
Partager