From bdce7274e45d3922240ca95cc627f34744b37f33 Mon Sep 17 00:00:00 2001
From: Max Tobias Weber <tobias.weber@wheregroup.com>
Date: Tue, 24 Mar 2026 08:47:25 +0100
Subject: [PATCH] add LayerTree

---
 src/App.tsx                  |  5 +++-
 src/components/LayerTree.tsx | 58 ++++++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 src/components/LayerTree.tsx

diff --git a/src/App.tsx b/src/App.tsx
index c8c6c2a..e19b506 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import {
 } from "@mapcomponents/react-maplibre";
 import IconButton from "@mui/material/IconButton";
 import MenuIcon from "@mui/icons-material/Menu";
+import LayerTree from "./components/LayerTree";
 
 function App() {
   const [sidebarOpen, setSidebarOpen] = useState(true);
@@ -31,7 +32,9 @@ function App() {
           </IconButton>
         }
       />
-      <Sidebar open={sidebarOpen} setOpen={setSidebarOpen}></Sidebar>
+      <Sidebar open={sidebarOpen} setOpen={setSidebarOpen}>
+        <LayerTree />
+      </Sidebar>
     </>
   );
 }
diff --git a/src/components/LayerTree.tsx b/src/components/LayerTree.tsx
new file mode 100644
index 0000000..66d5369
--- /dev/null
+++ b/src/components/LayerTree.tsx
@@ -0,0 +1,58 @@
+import { useState } from "react";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Checkbox from "@mui/material/Checkbox";
+import Typography from "@mui/material/Typography";
+import Divider from "@mui/material/Divider";
+
+import ThreeDTilesLayer from "./ThreeDTilesLayer/ThreeDTilesLayer_2";
+//import TreeLayer from "./TreeLayer/TreeLayer_final";
+//import HedgeLayer from "./HedgeLayer/HedgeLayer";
+
+const LAYERS = [
+  //{ id: "hedges", label: "Hedges", component: <HedgeLayer /> },
+  { id: "tiles3d", label: "3D Buildings", component: <ThreeDTilesLayer /> },
+  //{ id: "trees", label: "Trees", component: <TreeLayer sizeScale={0.5} /> },
+] as const;
+
+export default function LayerTree() {
+  const [visible, setVisible] = useState<Record<string, boolean>>(
+    Object.fromEntries(LAYERS.map((l) => [l.id, true])),
+  );
+
+  const toggle = (id: string) => setVisible((v) => ({ ...v, [id]: !v[id] }));
+
+  return (
+    <>
+      <Typography
+        variant="overline"
+        sx={{ px: 2, pt: 2, display: "block", color: "text.secondary" }}
+      >
+        Layers
+      </Typography>
+      <List dense disablePadding>
+        {LAYERS.map((layer) => (
+          <ListItem
+            key={layer.id}
+            onClick={() => toggle(layer.id)}
+            sx={{ cursor: "pointer" }}
+          >
+            <ListItemIcon sx={{ minWidth: 36 }}>
+              <Checkbox
+                edge="start"
+                checked={!!visible[layer.id]}
+                disableRipple
+                size="small"
+              />
+            </ListItemIcon>
+            <ListItemText primary={layer.label} />
+          </ListItem>
+        ))}
+      </List>
+      <Divider sx={{ my: 1 }} />
+      {LAYERS.map((layer) => visible[layer.id] && layer.component)}
+    </>
+  );
+}