@@ -189,6 +189,15 @@ let colors = [
[255, 220, 90],
];
+let used_colors = [];
+
+// HACK
+// TIL that [1,1] != [1,1], since arrays are objects, and objects are equal iff
+// they are the same object.
+Array.prototype.equals = function(other) {
+ return this.length == other.length && this.every((e, i) => e === other[i]);
+};
+
function newCustomLayer(name, sourceURL, colorString) {
let color;
if (colorString) {
@@ -203,8 +212,14 @@ function newCustomLayer(name, sourceURL, colorString) {
}
}
if (!color) {
- color = colors[document.querySelectorAll('aside div:has(input[name]) li').length % colors.length];
+ let available_colors = colors.filter(c => !used_colors.some(i => i.equals(c)));
+ if (available_colors) {
+ color = available_colors[0];
+ } else {
+ color = [0, 0, 0]; // If we run out of colors, fall back to black
+ }
}
+ used_colors.push(color);
const li = document.createElement("li");
const layer = new VectorLayer({
source: new VectorSource({
@@ -233,6 +248,11 @@ function newCustomLayer(name, sourceURL, colorString) {
});
map.getLayers().push(layer);
customLayerDiv.querySelector("ul").appendChild(li);
+
+ // Update input to make sure it's not suggesting an already-used color
+ let available_colors = colors.filter(c => !used_colors.some(i => i.equals(c)));
+ available_colors.push([0, 0, 0]); // Ensure we always have at least one color available
+ document.querySelector('input[type=color]').value = '#' + available_colors[0].map(x => x.toString(16).padStart(2, '0')).join('');
}
if (urlParams.customLayer) {