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);
|
document.querySelector("aside").appendChild(customLayerDiv);
|
||||||
|
|
||||||
// https://stackoverflow.com/a/64090995
|
// borrowed from https://github.com/ChartsCSS/charts.css/blob/main/src/general/_variables.scss#L7; randomly ordered
|
||||||
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)];
|
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) {
|
function newCustomLayer(name, sourceURL, colorString) {
|
||||||
let color;
|
let color;
|
||||||
|
@ -188,7 +199,7 @@ function newCustomLayer(name, sourceURL, colorString) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (!color) {
|
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 li = document.createElement("li");
|
||||||
const layer = new VectorLayer({
|
const layer = new VectorLayer({
|
||||||
|
|
Loading…
Reference in a new issue