tracktracker/front/index.js

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);
});