Use predefined color from list to ensure uniqueness

main
Chandler Swift 2024-10-19 19:03:40 -05:00
parent 502de00933
commit 1ad82c55ee
Signed by: chandlerswift
GPG Key ID: A851D929D52FB93F
1 changed files with 14 additions and 3 deletions

17
main.js
View File

@ -175,8 +175,19 @@ customLayerDiv.querySelector("button").addEventListener("click", function(){
});
document.querySelector("aside").appendChild(customLayerDiv);
// https://stackoverflow.com/a/64090995
let hslToRgb = (h,s,l, a=s*Math.min(l,1-l), f= (n,k=(n+h/30)%12) => l - a*Math.max(Math.min(k-3,9-k,1),-1)) => [f(0),f(8),f(4)];
// borrowed from https://github.com/ChartsCSS/charts.css/blob/main/src/general/_variables.scss#L7; randomly ordered
let colors = [
[170, 90, 240],
[90, 165, 255],
[100, 210, 80],
[180, 180, 180],
[170, 150, 110],
[255, 180, 50],
[240, 50, 50],
[130, 50, 20],
[110, 110, 110],
[255, 220, 90],
];
function newCustomLayer(name, sourceURL, colorString) {
let color;
@ -188,7 +199,7 @@ function newCustomLayer(name, sourceURL, colorString) {
}
}
if (!color) {
color = hslToRgb(Math.random()*360, 1, 0.5).map(c => c * 255);
color = colors[document.querySelectorAll('aside div:has(input[name]) li').length % colors.length];
}
const li = document.createElement("li");
const layer = new VectorLayer({