const L = require('leaflet'); const color = require('color'); require('leaflet/dist/leaflet.css'); // MAP const map = L.map('map').setView( [43.605, 3.88], /* zoomLevel = */ 13 ); 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’OpenStreetMap, CC-BY-SA`, 'Imagerie © Mapbox', ].join(' | '), id: 'mapbox/streets-v11', tileSize: 512, accessToken: 'pk.eyJ1IjoibWF0dGVvZGVsYWJyZSIsImEiOiJjazUxaWNsdXcwdWhjM29tc2xndXJoNGtxIn0.xELwMerqJLFimIqU6RxnZw', maxZoom: 19, zoomSnap: 0, zoomOffset: -1, }).addTo(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.entries(network.stops).forEach(([stopId, 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}
Arrêt n°${stopId}`); }); console.log(network); });