first map implementation

public/ar_debug_console.js

+// Debug-Konsole aktivieren
+const debugConsoleEnabled = true;
+
+if (debugConsoleEnabled) {
+    const debugConsole = document.getElementById('debug-console');
+    const debugToggleBtn = document.getElementById('debug-toggle-btn');
+    debugConsole.style.display = 'block';
+    debugToggleBtn.style.display = 'block';
+
+    // Toggle-Funktion hinzufügen
+    let isDebugVisible = true;
+    debugToggleBtn.addEventListener('click', () => {
+        toggleDebugConsole();
+    });
+
+    // Konsole überschreiben
+    (function() {
+        const oldConsoleLog = console.log;
+        console.log = function(...args) {
+            oldConsoleLog.apply(console, args); // Normale Konsole weiterhin nutzen
+
+            // Logs in das Debug-Element schreiben
+            debugConsole.innerHTML += args.join(' ') + '<br>';
+            debugConsole.scrollTop = debugConsole.scrollHeight; // Automatisch nach unten scrollen
+        };
+
+        const oldConsoleError = console.error;
+        console.error = function(...args) {
+            oldConsoleError.apply(console, args);
+            debugConsole.innerHTML += '<span style="color: red;">' + args.join(' ') + '</span><br>';
+            debugConsole.scrollTop = debugConsole.scrollHeight;
+        };
+
+        // JavaScript-Fehler global abfangen
+        window.onerror = function(message, source, lineno, colno, error) {
+            const errorMsg = `[ERROR] ${message} at ${source}:${lineno}:${colno}`;
+            debugConsole.innerHTML += `<span style="color: red;">${errorMsg}</span><br>`;
+            debugConsole.scrollTop = debugConsole.scrollHeight;
+
+            // Auch in der normalen Konsole anzeigen
+            oldConsoleError(errorMsg);
+        };
+
+        // Unhandled Promise Rejections abfangen
+        window.addEventListener('unhandledrejection', function(event) {
+            const errorMsg = `[PROMISE ERROR] ${event.reason}`;
+            debugConsole.innerHTML += `<span style="color: orange;">${errorMsg}</span><br>`;
+            debugConsole.scrollTop = debugConsole.scrollHeight;
+
+            oldConsoleError(errorMsg);
+        });
+    })();
+
+    function toggleDebugConsole() {
+        isDebugVisible = !isDebugVisible;
+        debugConsole.style.display = isDebugVisible ? 'block' : 'none';
+        debugToggleBtn.innerText = isDebugVisible ? 'Close' : 'Open Console';
+    }
+
+    toggleDebugConsole();
+    console.log("Debug Console enabled");
+}

public/ar_overviewmap.js

+
+
+
+function init_map() {
+    const mapContainer = document.getElementById('map-container');
+    if (mapContainer) {
+        var mymap = L.map(mapContainer);
+        var OpenStreetMap_DE = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
+            maxZoom: 30,
+            minZoom: 15,
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        });
+        // select one basemap from https://leaflet-extras.github.io/leaflet-providers/preview/
+        var CartoDB_Positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+            subdomains: 'abcd',
+            maxZoom: 30,
+            minZoom: 15
+        });
+        CartoDB_Positron.addTo(mymap);
+ 
+        // Marker initialisieren
+        var userIcon = L.icon({
+            iconUrl: 'previewImages/map-user.png',  // Dein Männchen-Bild
+            iconSize: [32, 32],               // Die Größe des Icons
+            iconAnchor: [16, 32],             // Der Punkt des Markers, der auf der Position zeigt
+            popupAnchor: [0, -32]             // Die Position des Popups relativ zum Marker
+        });
+
+        // Marker initialisieren
+        var userMarker = L.marker([0, 0], { icon: userIcon }).bindPopup('Ihre Position').addTo(mymap);
+        let initPosition = false;
+        let lastPosition = { lat: 0, lng: 0 }; // Letzte bekannte Position
+        const updateThreshold = 1.5; // Schwellenwert für den Abstand (in Metern)
+        
+        // Funktion, um die Position zu aktualisieren
+        function updatePosition(position) {
+            const userLat = position.coords.latitude;
+            const userLng = position.coords.longitude;
+
+            const currentPosition = L.latLng(userLat, userLng);
+            const lastKnownPosition = L.latLng(lastPosition.lat, lastPosition.lng);
+            const distance = currentPosition.distanceTo(lastKnownPosition);
+
+            // Nur aktualisieren, wenn der Abstand größer als der Schwellenwert ist
+            if (distance > updateThreshold || !initPosition) {
+                if (!initPosition) {
+                    mymap.setView([userLat, userLng], 20); // Zentrische Ansicht beim ersten Mal
+                    initPosition = true;
+                }
+
+                // Marker auf die neue Position setzen
+                userMarker.setLatLng([userLat, userLng]);
+                console.log(`Setze Position auf lat=${userLat} lng=${userLng}, Abstand: ${distance}m`);
+                lastPosition = { lat: userLat, lng: userLng };
+            }
+        }
+
+        // Die Position alle 5 Sekunden aktualisieren
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(updatePosition);
+            navigator.geolocation.watchPosition(updatePosition, function(error) {
+                console.error("Fehler bei der Geolokalisierung:", error);
+            }, {enableHighAccuracy: true, maximumAge: 2000,timeout: 5000});
+        } else {
+            console.error("Geolocation wird nicht unterstützt.");
+        }
+    }
+ }
+ 
\ No newline at end of file

public/index.html

@@ -214,11 +214,47 @@
 </head>
 
 <body>
+  <!-- Debug -->
+  <div id="debug-container" style="
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: 9999;
+      font-family: monospace;
+      font-size: 12px;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+  ">
+      <div id="debug-console" style="
+          width: 100%;
+          max-height: 200px;
+          overflow-y: auto;
+          background: rgba(0, 0, 0, 0.7);
+          color: #00ff00;
+          padding: 5px;
+          display: none;
+      "></div>
+      <button id="debug-toggle-btn" style="
+          background: rgba(0, 0, 0, 0.7);
+          color: #00ff00;
+          font-size: 14px;
+          border: none;
+          padding: 5px 10px;
+          cursor: pointer;
+          display: none;
+      "></button>
+  </div>
+
   <!-- Standardmenü -->
   <div id="menu-bar" style="display: none;">
     <div class="menu-item" id="add-section" onclick="showMenu('add-menu')">
       <img src="previewImages/add-icon.png" alt="Hinzufügen" />
     </div>
+    <div class="menu-item" onclick="showMenu('map-window')">
+      <img src="previewImages/map-icon.png" alt="Karte" />
+    </div>
     <div class="menu-item" id="options-section" onclick="showMenu('options-menu')">
       <img src="previewImages/options-icon.png" alt="Optionen" />
     </div>
@@ -285,6 +321,19 @@
     </div>
   </div>
 
+  <div id="map-window" class="menu-placeholder" style="display: none; flex-direction: column; width: 100vw; height: 100vh;">
+    <div id="map-container" style="z-index: 1500; flex: 15; width: 100%; height: 100%;"></div>
+    <div class="menu-item" onclick="showMenu('menu-bar')" style="cursor: pointer; flex: 1; align-items: center; justify-content: center;">
+        <img src="previewImages/back-icon.png" alt="Zurück" style="width: 30px; height: 30px;" />
+    </div>
+  </div>
+
+
+
+  <script src="ar_debug_console.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <!-- Leaflet einbinden -->
+  <script src="ar_overviewmap.js"></script>
   <script>
     // Variablen
     let selectedModel = 'robot';
@@ -314,7 +363,7 @@
       }
     };
 
-    const menus = ['menu-bar', 'add-menu', 'edit-menu', 'options-menu'];
+    const menus = ['menu-bar', 'add-menu', 'edit-menu', 'options-menu', 'map-window'];
 
     window.onload = () => {
       initializeAddMenu();
@@ -344,6 +393,7 @@
       });
       closeDynamicMenu();
       if (menuId === 'menu-bar') clearSelectedModel();
+      else if (menuId === 'map-window') init_map();
     }
 
     function clearSelectedModel() {
@@ -553,6 +603,15 @@
       infoDialog.style.display = "none";
     }
 
+    function refreshMapDialog() {
+      const mapDialog = document.getElementById('map-dialog');
+      mapDialog.style.display = 'flex';
+    }
+
+    function closeMapDialog() {
+      const mapDialog = document.getElementById('map-dialog');
+      mapDialog.style.display = 'none';
+    }
 
     async function activateXR() {
       const canvas = document.createElement('canvas');