60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
|
// MAP
|
|||
|
|
const map = L.map('map').setView([43.610, 3.8612], 21);
|
|||
|
|
|
|||
|
|
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
|
|||
|
|
attribution: [
|
|||
|
|
// TODO: Attribution des données TaM
|
|||
|
|
`Données cartographiques © Contributeurs d’<a href="https://www.open\
|
|||
|
|
streetmap.org/">OpenStreetMap</a>, <a href="https://creativecommons.org/\
|
|||
|
|
licenses/by-sa/2.0/">CC-BY-SA</a>`,
|
|||
|
|
'Imagerie © <a href="https://www.mapbox.com/">Mapbox</a>',
|
|||
|
|
].join(' | '),
|
|||
|
|
maxZoom: 18,
|
|||
|
|
tileSize: 512,
|
|||
|
|
zoomOffset: -1,
|
|||
|
|
id: 'mapbox/streets-v11',
|
|||
|
|
accessToken: 'pk.eyJ1IjoibWF0dGVvZGVsYWJyZSIsImEiOiJjazUxaWNsdXcwdWhjM29tc2xndXJoNGtxIn0.xELwMerqJLFimIqU6RxnZw'
|
|||
|
|
}).addTo(map);
|
|||
|
|
|
|||
|
|
// </MAP>
|
|||
|
|
//
|
|||
|
|
// TAM
|
|||
|
|
|
|||
|
|
|
|||
|
|
const SERVER = 'http://localhost:3000';
|
|||
|
|
|
|||
|
|
fetch(SERVER + '/line/6').then(res => res.json()).then(line =>
|
|||
|
|
{
|
|||
|
|
const color = line.color;
|
|||
|
|
|
|||
|
|
line.routes.forEach(route =>
|
|||
|
|
{
|
|||
|
|
route.ways.forEach(way =>
|
|||
|
|
{
|
|||
|
|
const wayPoints = way.map(({lat, lon}) => [lat, lon]);
|
|||
|
|
|
|||
|
|
L.polyline(wayPoints, {weight: 8, color: '#888'}).addTo(map);
|
|||
|
|
L.polyline(wayPoints, {weight: 6, color}).addTo(map);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
line.routes.forEach(route =>
|
|||
|
|
{
|
|||
|
|
route.stops.forEach(stop =>
|
|||
|
|
{
|
|||
|
|
const stopMarker = L.circleMarker(
|
|||
|
|
[stop.lat, stop.lon],
|
|||
|
|
{
|
|||
|
|
fillColor: color,
|
|||
|
|
radius: 6,
|
|||
|
|
fillOpacity: 1,
|
|||
|
|
color: '#888',
|
|||
|
|
weight: 2
|
|||
|
|
}
|
|||
|
|
).addTo(map);
|
|||
|
|
|
|||
|
|
stopMarker.bindPopup(stop.name);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|