Design komplett erneuert. Menü einklappbar. Koordinaten werden angezeigt

main.js

@@ -25,6 +25,18 @@ map.addControl(
     })
 );
 
+// 2. Create an HTML element to display coordinates (e.g., <pre id="coordinates"></pre>)
+const coordinatesDiv = document.getElementById('coordinates');
+
+// 3. Listen for mouse movement
+map.on('mousemove', (e) => {
+    // e.lngLat contains the longitude and latitude
+    const lng = e.lngLat.lng.toFixed(5);
+    const lat = e.lngLat.lat.toFixed(5);
+    
+    coordinatesDiv.innerHTML = `Lon: ${lng}° | Lat: ${lat}°`;
+});
+
 
 const elRenderArea=document.getElementById("potree_render_area");
 
@@ -278,13 +290,21 @@ function changeBaseMap(newMap){
 }
 
 
-document.querySelector('input[type="checkbox"]').addEventListener('change', (event)=>
-{
-  isVisible=!event.target.checked;
-  if (currentPointCloud){
-    currentPointCloud.visible=isVisible;
-  };
-})
+const button = document.querySelector('#disable')
+
+button.addEventListener('click', () => {
+
+    isVisible = !isVisible;
+
+    if(currentPointCloud){
+        currentPointCloud.visible = isVisible;
+    }
+
+    button.textContent = isVisible
+        ? "Punktwolke ausblenden"
+        : "Punktwolke anzeigen";
+
+});
 
 
 // ausgewähltes Element im BaseMap DropDown Feld
@@ -306,3 +326,43 @@ document.getElementById("location").addEventListener("click", () => {
  map.flyTo({center, zoom: 17 })
 });
 
+
+var pointCountSlider = document.getElementById("pointSlider");
+var pointCountOutput = document.getElementById("pointSliderValue");
+pointCountOutput.innerHTML = "Dargestellte Punkte: " + Number(pointCountSlider.value).toLocaleString();
+
+pointCountSlider.oninput = function() {
+  pointCountOutput.innerHTML = "Dargestellte Punkte: " + Number(this.value).toLocaleString('de-DE');;
+}
+
+
+var pointSizeSlider = document.getElementById("pointSizeSlider");
+var pointSizeOutput = document.getElementById("pointSizeSliderValue");
+pointSizeOutput.innerHTML = "Punktgröße (mm): " + Number(pointSizeSlider.value).toLocaleString();
+
+pointSizeSlider.oninput = function() {
+  pointSizeOutput.innerHTML = "Punktgröße (mm): " + Number(this.value).toLocaleString('de-DE');;
+}
+
+const closeButton = document.getElementById("closeSideBarButton");
+const sidebar = document.getElementById("sidebar");
+const openOuter = document.getElementById("openButtonOuter");
+
+if (closeButton) {
+    closeButton.addEventListener("click", () => {
+      const rect = closeButton.getBoundingClientRect();  
+      sidebar.style.display = "none";
+        
+        openOuter.innerHTML = "<button class='sideBarButtons' id='openSideBarButton' title='Menü ausklappen'>>></button>";
+        const openButton = document.getElementById("openSideBarButton");
+        openButton.style.top = `${rect.top + window.scrollY -2}px`;
+        if (openButton) {
+            openButton.addEventListener("click", () => {
+                sidebar.style.display = "flex";
+              
+                openOuter.innerHTML = ""; 
+            });
+        }
+    });
+}
+