Use darker color around brighter lines

front/index.js

@@ -23,12 +23,28 @@ licenses/by-sa/2.0/">CC-BY-SA</a>`,
 //
 // TAM
 
+const makeBorderColor = mainColor =>
+{
+    const hsl = color(mainColor).hsl();
 
-const SERVER = 'http://localhost:3000';
+    if (hsl.color[2] < 40)
+    {
+        hsl.color[2] += 30;
+    }
+    else
+    {
+        hsl.color[2] -= 20;
+    }
 
-fetch(SERVER + '/line/6').then(res => res.json()).then(line =>
+    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 =>
     {
@@ -36,7 +52,7 @@ fetch(SERVER + '/line/6').then(res => res.json()).then(line =>
         {
             const wayPoints = way.map(({lat, lon}) => [lat, lon]);
 
-            L.polyline(wayPoints, {weight: 8, color: '#888'}).addTo(map);
+            L.polyline(wayPoints, {weight: 8, color: borderColor}).addTo(map);
             L.polyline(wayPoints, {weight: 6, color}).addTo(map);
         });
     });
@@ -51,7 +67,7 @@ fetch(SERVER + '/line/6').then(res => res.json()).then(line =>
                     fillColor: color,
                     radius: 6,
                     fillOpacity: 1,
-                    color: '#888',
+                    color: borderColor,
                     weight: 2
                 }
             ).addTo(map);

package.json

@@ -11,6 +11,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "color": "^3.1.2",
     "csv-parse": "^4.8.3",
     "express": "^4.17.1",
     "leaflet": "^1.6.0",