From b07967110e61260a0b8e80a5fb0e9ccdc8580519 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Reinhard=20X=2E=20F=C3=BCrst?= <rexfue@gmail.com>
Date: Wed, 5 Nov 2025 11:39:44 +0000
Subject: [PATCH] =?UTF-8?q?Eigener=20Standort=20per=20Button=20anw=C3=A4hl?=
 =?UTF-8?q?bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/de/translation.json  |  3 ++-
 locales/en/translation.json  |  3 ++-
 public/javascripts/global.js | 10 ++++++++
 public/javascripts/map.js    | 49 ++++++++++++++++++++++++++++++++++++
 public/stylesheets/style.css | 23 +++++++++++++++++
 views/index_noise.pug        |  2 ++
 6 files changed, 88 insertions(+), 2 deletions(-)

diff --git a/locales/de/translation.json b/locales/de/translation.json
index 3e858ef..cb14a99 100644
--- a/locales/de/translation.json
+++ b/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"
 }
\ No newline at end of file
diff --git a/locales/en/translation.json b/locales/en/translation.json
index 7e6e3ca..79707f8 100644
--- a/locales/en/translation.json
+++ b/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"
 }
diff --git a/public/javascripts/global.js b/public/javascripts/global.js
index 4b33409..7a2b04d 100644
--- a/public/javascripts/global.js
+++ b/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()
diff --git a/public/javascripts/map.js b/public/javascripts/map.js
index 054b990..790b4b9 100644
--- a/public/javascripts/map.js
+++ b/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
+        }
+    );
+}
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 676816c..bf2fdb5 100644
--- a/public/stylesheets/style.css
+++ b/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;
diff --git a/views/index_noise.pug b/views/index_noise.pug
index 100c557..4a62496 100644
--- a/views/index_noise.pug
+++ b/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