2020-01-13 11:39:28 +00:00
|
|
|
|
const L = require('leaflet');
|
2020-01-13 12:00:34 +00:00
|
|
|
|
const color = require('color');
|
|
|
|
|
|
2020-01-13 11:39:28 +00:00
|
|
|
|
require('leaflet/dist/leaflet.css');
|
|
|
|
|
|
2020-01-13 11:20:35 +00:00
|
|
|
|
// MAP
|
2020-01-14 23:19:26 +00:00
|
|
|
|
const map = L.map('map').setView(
|
|
|
|
|
[43.605, 3.88],
|
|
|
|
|
/* zoomLevel = */ 13
|
|
|
|
|
);
|
2020-01-13 11:20:35 +00:00
|
|
|
|
|
|
|
|
|
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(' | '),
|
2020-01-13 12:00:34 +00:00
|
|
|
|
|
|
|
|
|
id: 'mapbox/streets-v11',
|
2020-01-13 11:20:35 +00:00
|
|
|
|
tileSize: 512,
|
2020-01-13 12:00:34 +00:00
|
|
|
|
|
|
|
|
|
accessToken: 'pk.eyJ1IjoibWF0dGVvZGVsYWJyZSIsImEiOiJjazUxaWNsdXcwdWhjM29tc2xndXJoNGtxIn0.xELwMerqJLFimIqU6RxnZw',
|
|
|
|
|
|
2020-01-14 23:19:26 +00:00
|
|
|
|
maxZoom: 19,
|
2020-01-13 12:00:34 +00:00
|
|
|
|
zoomSnap: 0,
|
2020-01-13 11:20:35 +00:00
|
|
|
|
zoomOffset: -1,
|
|
|
|
|
}).addTo(map);
|
|
|
|
|
|
|
|
|
|
// </MAP>
|
|
|
|
|
//
|
|
|
|
|
// TAM
|
|
|
|
|
|
2020-01-13 12:00:09 +00:00
|
|
|
|
const makeBorderColor = mainColor =>
|
|
|
|
|
{
|
|
|
|
|
const hsl = color(mainColor).hsl();
|
2020-01-14 13:08:08 +00:00
|
|
|
|
hsl.color = Math.max(0, hsl.color[2] -= 20);
|
2020-01-13 12:00:09 +00:00
|
|
|
|
return hsl.hex();
|
|
|
|
|
};
|
2020-01-13 11:20:35 +00:00
|
|
|
|
|
2020-01-13 12:00:09 +00:00
|
|
|
|
const SERVER = window.origin;
|
2020-01-13 11:20:35 +00:00
|
|
|
|
|
2020-01-14 13:08:08 +00:00
|
|
|
|
fetch(SERVER + '/network').then(res => res.json()).then(network =>
|
2020-01-13 11:20:35 +00:00
|
|
|
|
{
|
2020-01-14 13:08:08 +00:00
|
|
|
|
Object.values(network.segments).forEach(segment =>
|
2020-01-13 11:20:35 +00:00
|
|
|
|
{
|
2020-01-14 13:08:08 +00:00
|
|
|
|
const color = network.lines[segment.lines[0]].color;
|
|
|
|
|
const borderColor = makeBorderColor(color);
|
|
|
|
|
const nodes = segment.nodes.map(({lat, lon}) => [lat, lon]);
|
|
|
|
|
|
|
|
|
|
L.polyline(nodes, {weight: 8, color: borderColor}).addTo(map);
|
|
|
|
|
const line = L.polyline(nodes, {weight: 6, color}).addTo(map);
|
2020-01-13 11:20:35 +00:00
|
|
|
|
|
2020-01-14 13:08:08 +00:00
|
|
|
|
line.bindPopup(`${segment.length} m`);
|
2020-01-13 11:20:35 +00:00
|
|
|
|
});
|
|
|
|
|
|
2020-01-14 23:19:26 +00:00
|
|
|
|
Object.entries(network.stops).forEach(([stopId, stop]) =>
|
2020-01-13 11:20:35 +00:00
|
|
|
|
{
|
2020-01-14 13:08:08 +00:00
|
|
|
|
const color = network.lines[stop.lines[0]].color;
|
|
|
|
|
const borderColor = makeBorderColor(color);
|
|
|
|
|
|
|
|
|
|
const stopMarker = L.circleMarker(
|
|
|
|
|
[stop.lat, stop.lon],
|
|
|
|
|
{
|
|
|
|
|
fillColor: color,
|
|
|
|
|
radius: 6,
|
|
|
|
|
fillOpacity: 1,
|
|
|
|
|
color: borderColor,
|
|
|
|
|
weight: 2
|
|
|
|
|
}
|
|
|
|
|
).addTo(map);
|
|
|
|
|
|
2020-01-14 23:19:26 +00:00
|
|
|
|
stopMarker.bindPopup(`<strong>${stop.name}</strong><br>
|
|
|
|
|
Arrêt n°${stopId}`);
|
2020-01-13 11:20:35 +00:00
|
|
|
|
});
|
2020-01-14 13:08:08 +00:00
|
|
|
|
|
|
|
|
|
console.log(network);
|
2020-01-13 11:20:35 +00:00
|
|
|
|
});
|