Eigener Standort per Button anwählbar

locales/de/translation.json

@@ -49,5 +49,6 @@
   "Peaks": "Spitzen",
   "Day": "Tag",
   "Night": "Nacht",
-  "CenterMap": "Karte zentrieren auf"
+  "CenterMap": "Karte zentrieren auf",
+  "MyLocation": "Mein Standort"
 }

locales/en/translation.json

@@ -49,5 +49,6 @@
   "Peaks": "Peaks",
   "Day": "Day",
   "Night": "Night",
-  "CenterMap": "Center map on"
+  "CenterMap": "Center map on",
+  "MyLocation": "My Location"
 }

public/javascripts/global.js

@@ -73,6 +73,16 @@ import * as spin from './spinner.js'
     }
 
     // Register events
+    // Button 'My Location' pressed
+    document.addEventListener('DOMContentLoaded', () => {
+        const btnMyLocation = document.querySelector('#btnMyLocation');
+        if (btnMyLocation) {
+            btnMyLocation.addEventListener('click', () => {
+                map.goToMyLocation();
+            });
+        }
+    });
+
     // Button 'Save' pressed
     document.querySelector('#btnSave').addEventListener('click', async () => {
         let curtab =  getCurrentTab()

public/javascripts/map.js

@@ -53,3 +53,52 @@ const buildMarkers = async (params, mapparams) => {
 export const setNewCenter = (center) => {
     mapparams.map.setView(center)
 }
+
+export const goToMyLocation = () => {
+    if (!navigator.geolocation) {
+        alert('Geolocation wird von diesem Browser nicht unterstützt');
+        return;
+    }
+
+    navigator.geolocation.getCurrentPosition(
+        (position) => {
+            const lat = position.coords.latitude;
+            const lon = position.coords.longitude;
+            const accuracy = position.coords.accuracy;
+            
+            // Karte zur aktuellen Position zentrieren
+            mapparams.map.setView([lat, lon], 15);
+            
+            // Optional: Marker an aktueller Position setzen
+            const myLocationMarker = L.marker([lat, lon], {
+                icon: L.icon({
+                    iconUrl: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCI+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iOCIgZmlsbD0iIzQyODVGNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIzIi8+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzQyODVGNCIgc3Ryb2tlLXdpZHRoPSIyIiBvcGFjaXR5PSIwLjMiLz48L3N2Zz4=',
+                    iconSize: [40, 40],
+                    iconAnchor: [20, 20]
+                })
+            }).addTo(mapparams.map);
+            
+            myLocationMarker.bindPopup(`📍 Ihr Standort<br/>Genauigkeit: ±${Math.round(accuracy)}m`).openPopup();
+        },
+        (error) => {
+            let errorMsg = 'Position konnte nicht ermittelt werden.';
+            switch(error.code) {
+                case error.PERMISSION_DENIED:
+                    errorMsg = 'Bitte erlauben Sie den Zugriff auf Ihren Standort.';
+                    break;
+                case error.POSITION_UNAVAILABLE:
+                    errorMsg = 'Standortinformationen sind nicht verfügbar.';
+                    break;
+                case error.TIMEOUT:
+                    errorMsg = 'Die Anfrage ist abgelaufen.';
+                    break;
+            }
+            alert(errorMsg);
+        },
+        {
+            enableHighAccuracy: true,
+            timeout: 5000,
+            maximumAge: 0
+        }
+    );
+}

public/stylesheets/style.css

@@ -74,6 +74,7 @@ header #buttonsRight #h1datum {
   border: solid 1px seagreen;
   overflow: hidden;
   z-index: 1;
+  position: relative;
 }
 #map #infoTable table, #map #infoTable tr, #map #infoTable td {
   margin: auto;
@@ -84,6 +85,28 @@ header #buttonsRight #h1datum {
   margin-top: 10px;
   text-align: center;
 }
+#map #btnMyLocation {
+  position: absolute;
+  top: 80px;
+  right: 10px;
+  z-index: 1000;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 2px solid rgba(0,0,0,0.2);
+  border-radius: 4px;
+  background-color: white;
+  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+}
+#map #btnMyLocation:hover {
+  background-color: #f4f4f4;
+}
+#map #btnMyLocation:active {
+  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+}
 
 #mapdateactsens {
   width: 98vw;

views/index_noise.pug

@@ -28,6 +28,8 @@ block content
     .tab-content#thetabs
       .tab-pane.fade.show.active#t_map(role="tabpanel" aria-labelledby="map-tab")
         #map
+          button.btn.btn-light#btnMyLocation(type="button" title=t("MyLocation"))
+            span 📍
         #maptaberr.errdiv
         #mapdateactsens
           #actsensors