diff --git a/main.js b/main.js index fd1fe43..d26edc7 100644 --- a/main.js +++ b/main.js @@ -156,7 +156,7 @@ customLayerDiv.innerHTML = ` Custom

-
+
(must be in GeoJSON format) @@ -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) {