From fd297cc71b402cc2c1845f3d18fd8481af71dc47 Mon Sep 17 00:00:00 2001
From: Brandon Liu <bdon@users.noreply.github.com>
Date: Wed, 20 Sep 2023 11:44:25 +0800
Subject: [PATCH] Viewer layer toggle shows layer colors [#243] (#252)

---
 app/src/MaplibreMap.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/src/MaplibreMap.tsx b/app/src/MaplibreMap.tsx
index 5bea633..6fa9133 100644
--- a/app/src/MaplibreMap.tsx
+++ b/app/src/MaplibreMap.tsx
@@ -144,7 +144,7 @@ const LayersVisibilityController = (props: {
         <em>All layers</em>
       </CheckboxLabel>
       <LayersVisibilityList>
-        {props.layers.map(({ id, visible }) => (
+        {props.layers.map(({ id, visible }, idx) => (
           <li key={id}>
             <CheckboxLabel style={{ paddingLeft: 8 }}>
               <input
@@ -153,6 +153,13 @@ const LayersVisibilityController = (props: {
                 onChange={toggleLayer}
                 data-layer-id={id}
               />
+              <span
+                style={{
+                  width: ".8rem",
+                  height: ".8rem",
+                  backgroundColor: schemeSet3[idx % 12],
+                }}
+              />
               {id}
             </CheckboxLabel>
           </li>