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>