Use darker color around brighter lines

This commit is contained in:
Mattéo Delabre 2020-01-13 13:00:09 +01:00
parent d2c459b5ee
commit 602ceef16d
Signed by: matteo
GPG Key ID: AE3FBD02DC583ABB
2 changed files with 21 additions and 4 deletions

View File

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

View File

@ -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",