76 lines
2.0 KiB
JavaScript
76 lines
2.0 KiB
JavaScript
const L = require('leaflet');
|
||
const color = require('color');
|
||
|
||
require('leaflet/dist/leaflet.css');
|
||
|
||
// MAP
|
||
const map = L.map('map').setView([43.610, 3.8612], 14);
|
||
|
||
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(' | '),
|
||
|
||
id: 'mapbox/streets-v11',
|
||
tileSize: 512,
|
||
|
||
accessToken: 'pk.eyJ1IjoibWF0dGVvZGVsYWJyZSIsImEiOiJjazUxaWNsdXcwdWhjM29tc2xndXJoNGtxIn0.xELwMerqJLFimIqU6RxnZw',
|
||
|
||
maxZoom: 18,
|
||
zoomSnap: 0,
|
||
zoomOffset: -1,
|
||
}).addTo(map);
|
||
|
||
// </MAP>
|
||
//
|
||
// TAM
|
||
|
||
const makeBorderColor = mainColor =>
|
||
{
|
||
const hsl = color(mainColor).hsl();
|
||
hsl.color = Math.max(0, hsl.color[2] -= 20);
|
||
return hsl.hex();
|
||
};
|
||
|
||
const SERVER = window.origin;
|
||
|
||
fetch(SERVER + '/network').then(res => res.json()).then(network =>
|
||
{
|
||
Object.values(network.segments).forEach(segment =>
|
||
{
|
||
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);
|
||
|
||
line.bindPopup(`${segment.length} m`);
|
||
});
|
||
|
||
Object.values(network.stops).forEach(stop =>
|
||
{
|
||
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);
|
||
|
||
stopMarker.bindPopup(stop.name);
|
||
});
|
||
|
||
console.log(network);
|
||
});
|