Display color next to layer name

This should make it easier to disambiguate layers that are otherwise hard to tell apart.

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) {

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%;