Location Button angepasst

index.html

@@ -47,9 +47,9 @@
       <div class="selectWrapper">
       <select name="pointcloud" id="pointcloud">
         <option value="" disabled selected>Punktwolke auswählen</option>
-        <option value="first">1. Fläche unten</option>
+        <option value="first">Fläche im unteren Bereich</option>
-        <option value="second">2. Felswand</option>
+        <option value="second">Abbauwand</option>
-        <option value="third">3. Fläche oben mit Spuren</option>
+        <option value="third">Dinosaurier-Spuren</option>
       </select>
       <span class="selectArrow">&#9207</span>
       </div>

main.js

@@ -50,9 +50,6 @@ map.on('load', () => {
         pickable: false
     });
 
-    map.addControl(lidarControl, 'top-right');
-    //lidarControl.onAdd(map);
-
     // COPC-Datei laden
     const selectBox=document.querySelector('select[name="pointcloud"]');
     if (selectBox && selectBox.value){
@@ -60,7 +57,6 @@ map.on('load', () => {
         loadCurrentPointCloud();
     }
     loadInfoJSON();
-    //lidarControl.loadPointCloudStreaming('http://ar2350.web-01.fbbgg.hs-woe.de/copc%20Daten/sp3_low.copc.laz')
 });
 
 

style.css

@@ -58,19 +58,26 @@ body{
   box-shadow: 0 6px 18px rgba(0,0,0,0.12);
 }
 
-#location-button{
+#location-button {
-  position:absolute;
+  position: absolute;
   z-index: 30;
-  top:110px;
+  top: 110px;
-  right:10px;
+  right: 10px;
-  width:30px;
+  width: 29px;
-  height:30px;
+  height: 29px;
-  display:flex;
+  display: flex;
-  align-items:center;
+  align-items: center;
-  justify-content:center;
+  justify-content: center;
-  border-radius:8px;
+  background-color: #f8f9fa;
-  background:white;
+  border: none !important; 
-  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  border-radius: 4px; 
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+#location-button:hover {
+  background-color: #f4f4f4;
 }
 
 #location{
@@ -87,7 +94,6 @@ body{
   background:rgb(233, 232, 232);
 }
 
-
 #location-button:hover{
   background:rgb(233, 232, 232);
 }
@@ -545,3 +551,23 @@ position: absolute;
     font-size: 12px;
     color: #555;
 }
+
+
+/* Blendet das Icon selbst aus */
+.lidar-control-icon {
+    display: none !important;
+}
+
+/* Findet den MapLibre-Button, der das Lidar-Icon beinhaltet, 
+   und versteckt den kompletten Button (inklusive Rahmen und Hintergrund) */
+.maplibregl-ctrl:has(.lidar-control-icon),
+.maplibregl-ctrl-group:has(.lidar-control-icon),
+button:has(.lidar-control-icon) {
+    display: none !important;
+    visibility: hidden !important;
+    width: 0px !important;
+    height: 0px !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+}