From 54620a68fc59a38e8699c2522afdbbb4a21d984d Mon Sep 17 00:00:00 2001
From: Chandler Swift <chandler@chandlerswift.com>
Date: Sat, 19 Oct 2024 19:34:33 -0500
Subject: [PATCH] Use hex color format; add color picker input

---
 main.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/main.js b/main.js
index c55bb73..fd1fe43 100644
--- a/main.js
+++ b/main.js
@@ -154,16 +154,16 @@ const customLayerDiv = document.createElement("div");
 customLayerDiv.innerHTML = `
 <details>
   <summary>Custom</summary>
-  <label>Layer Name: <input name="label"></label><br>
-  <label>Layer URL: <input name="source"></label><br>
-  <label>Color (optional): <input name="color"></label><br>
+  <label>Layer Name: <input type="text"></label><br>
+  <label>Layer URL: <input type="url"></label><br>
+  <label>Color (optional): <input type="color"></label><br>
   <button>Add</button>
   <small>(must be in GeoJSON format)</small>
   <ul></ul>
 </details>`;
-const labelInput = customLayerDiv.querySelector('input[name=label]');
-const sourceInput = customLayerDiv.querySelector('input[name=source]');
-const colorInput = customLayerDiv.querySelector('input[name=color]');
+const labelInput = customLayerDiv.querySelector('input[type=text]');
+const sourceInput = customLayerDiv.querySelector('input[type=url]');
+const colorInput = customLayerDiv.querySelector('input[type=color]');
 
 customLayerDiv.querySelector("button").addEventListener("click", function(){
   if (!sourceInput.value.toLowerCase().endsWith(".geojson")) {
@@ -171,7 +171,7 @@ customLayerDiv.querySelector("button").addEventListener("click", function(){
       return;
     }
   }
-  newCustomLayer(labelInput.value, sourceInput.value, colorInput.value);
+  newCustomLayer(labelInput.value, sourceInput.value, colorInput.value.substring(1));
 });
 document.querySelector("aside").appendChild(customLayerDiv);
 
@@ -192,7 +192,11 @@ let colors = [
 function newCustomLayer(name, sourceURL, colorString) {
   let color;
   if (colorString) {
-    color = colorString.split(' ').map(Number);
+    color = [
+      parseInt(colorString.substr(0,2),16),
+      parseInt(colorString.substr(2,2),16),
+      parseInt(colorString.substr(4,2),16),
+    ];
     if (color.length != 3 || color.some(Number.isNaN)) {
       alert("Invalid color provided; using random color instead.");
       color = null;