diff --git a/public/ar_debug_console.js b/public/ar_debug_console.js
new file mode 100644
index 0000000000000000000000000000000000000000..6d7914a446dd9e7c884a6cc0cddc2c8d115554b5
--- /dev/null
+++ b/public/ar_debug_console.js
@@ -0,0 +1,62 @@
+// 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");
+}
diff --git a/public/ar_overviewmap.js b/public/ar_overviewmap.js
new file mode 100644
index 0000000000000000000000000000000000000000..2db762ee2505031d8826bd0d714f897ff027b752
--- /dev/null
+++ b/public/ar_overviewmap.js
@@ -0,0 +1,70 @@
+
+
+
+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: '© <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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <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
diff --git a/public/index.html b/public/index.html
index b394514704beb9b95268e7ba3261d960278dbacc..bf4b17e6e5ff2f8d7d518492e7ee2b36d94a5d71 100644
--- a/public/index.html
+++ b/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,20 @@
</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>
+
<!-- Audio-Element für Button-Klick -->
<audio id="button-sound" src="sounds/button-sound.mp3" preload="auto"></audio>
@@ -317,7 +367,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();
@@ -353,6 +403,7 @@
});
closeDynamicMenu();
if (menuId === 'menu-bar') clearSelectedModel();
+ else if (menuId === 'map-window') init_map();
}
function clearSelectedModel() {
@@ -563,6 +614,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');
diff --git a/public/previewImages/map-icon.png b/public/previewImages/map-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..19888390d674e7adf4a58786abc81e8fe4fa9560
Binary files /dev/null and b/public/previewImages/map-icon.png differ
diff --git a/public/previewImages/map-user.png b/public/previewImages/map-user.png
new file mode 100644
index 0000000000000000000000000000000000000000..d126c3ccc2b28dd0c53ec4abfc570aaf3f1f7055
Binary files /dev/null and b/public/previewImages/map-user.png differ