Improve layer color UI

- Add color picker
 - Default colorpicker to nice value from list
 - Make sure it doesn't overlap with an already-chosen color

main.js

@@ -156,7 +156,7 @@ customLayerDiv.innerHTML = `
   <summary>Custom</summary>
   <label>Layer Name: <input type="text"></label><br>
   <label>Layer URL: <input type="url"></label><br>
-  <label>Color (optional): <input type="color"></label><br>
+  <label>Color (optional): <input type="color" value="#AA5AF0"></label><br>
   <button>Add</button>
   <small>(must be in GeoJSON format)</small>
   <ul></ul>
@@ -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) {