Use predefined color from list to ensure uniqueness
This commit is contained in:
parent
502de00933
commit
1ad82c55ee
17
main.js
17
main.js
|
@ -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({
|
||||
|
|
Loading…
Reference in a new issue