tracktracker/front/index.js

const L = require('leaflet');
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(' | '),
    maxZoom: 18,
    tileSize: 512,
    zoomOffset: -1,
    id: 'mapbox/streets-v11',
    accessToken: 'pk.eyJ1IjoibWF0dGVvZGVsYWJyZSIsImEiOiJjazUxaWNsdXcwdWhjM29tc2xndXJoNGtxIn0.xELwMerqJLFimIqU6RxnZw'
}).addTo(map);

// </MAP>
//
// TAM

const makeBorderColor = mainColor =>
{
    const hsl = color(mainColor).hsl();

    if (hsl.color[2] < 40)
    {
        hsl.color[2] += 30;
    }
    else
    {
        hsl.color[2] -= 20;
    }

    return hsl.hex();
};

const SERVER = window.origin;

fetch(SERVER + '/line/1').then(res => res.json()).then(line =>
{
    const color = line.color;
    const borderColor = makeBorderColor(color);

    line.routes.forEach(route =>
    {
        route.ways.forEach(way =>
        {
            const wayPoints = way.map(({lat, lon}) => [lat, lon]);

            L.polyline(wayPoints, {weight: 8, color: borderColor}).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: borderColor,
                    weight: 2
                }
            ).addTo(map);

            stopMarker.bindPopup(stop.name);
        });
    });
});