From 26c5b56d582e985f2516aad10d11e5671a2f6e84 Mon Sep 17 00:00:00 2001
From: Chandler Swift <chandler@chandlerswift.com>
Date: Sat, 19 Oct 2024 19:05:29 -0500
Subject: [PATCH] Display color next to layer name

This should make it easier to disambiguate layers that are otherwise hard to tell apart.
---
 main.js   | 2 +-
 style.css | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/main.js b/main.js
index f86d714..c55bb73 100644
--- a/main.js
+++ b/main.js
@@ -218,7 +218,7 @@ function newCustomLayer(name, sourceURL, colorString) {
     }),
   });
   li.innerHTML = `
-    <label><input type="checkbox" checked> ${name}</label>
+    <label><input type="checkbox" checked><div class="color-badge" style="background-color: rgb(${color.join(', ')});"></div> ${name}</label>
   `;
   li.querySelector("input").addEventListener("change", function(e){
     if (e.target.checked) {
diff --git a/style.css b/style.css
index 35c686a..0d56c1e 100644
--- a/style.css
+++ b/style.css
@@ -70,6 +70,15 @@ aside summary {
   font-weight: bold;
 }
 
+.color-badge {
+  display: inline-block;
+  height: 1em;
+  width: 2em;
+  vertical-align: middle;
+  border: 1px #444 solid;
+  border-radius: 4px;
+}
+
 @media (max-width: 400px) {
   .nav-open #map {
     left: 100%;