From b98bac9cff41bc123e70ad4a8d64a191c64f89d0 Mon Sep 17 00:00:00 2001
From: "(jenkins)" <(jenkins)>
Date: Thu, 16 Apr 2026 22:57:59 +0100
Subject: [PATCH] feat: add geolocation button to map to center view on user
 position

---
 frontend/src/App.jsx        | 34 +++++++++++++++++++++++++++++++++-
 frontend/src/styles/App.css | 24 ++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 80a0429..8585f4a 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -630,6 +630,22 @@ const APP = () => {
     return 'https://demotiles.maplibre.org/style.json';
   };
 
+  const handleLocateMe = () => {
+    if (!navigator.geolocation) return;
+    navigator.geolocation.getCurrentPosition(
+      (pos) => {
+        const { latitude: lat, longitude: lon } = pos.coords;
+        selectedPointRef.current = { lat, lon };
+        setSelectedPoint({ lat, lon });
+        if (startMarkerRef.current) {
+          startMarkerRef.current.setLngLat([lon, lat]);
+        }
+        mapRef.current?.flyTo({ center: [lon, lat], zoom: 5 });
+      },
+      (err) => console.error('Geolocation error:', err)
+    );
+  };
+
   const handleShowLineOfSight = async () => {
     setLoading(true);
     setSelectedCity(null);
@@ -661,7 +677,23 @@ const APP = () => {
 
   return (
     <div className="app-container">
-      <div className="map-container" ref={mapContainerRef} />
+      <div className="map-container" ref={mapContainerRef}>
+        {!isLocked && (
+          <button
+            className="locate-btn"
+            onClick={handleLocateMe}
+            title="Use my current location"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <circle cx="12" cy="12" r="3"/>
+              <line x1="12" y1="2" x2="12" y2="6"/>
+              <line x1="12" y1="18" x2="12" y2="22"/>
+              <line x1="2" y1="12" x2="6" y2="12"/>
+              <line x1="18" y1="12" x2="22" y2="12"/>
+            </svg>
+          </button>
+        )}
+      </div>
 
       <div className="controls">
         <div className={`control-group ${isLocked ? 'disabled-controls' : ''}`}>
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index 2aa8b33..8c1c91c 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -13,6 +13,30 @@
   z-index: 1;
 }
 
+.locate-btn {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 10;
+  width: 36px;
+  height: 36px;
+  background: white;
+  border: none;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #333;
+  transition: background 0.15s, color 0.15s;
+}
+
+.locate-btn:hover {
+  background: #f0f0f0;
+  color: #1a73e8;
+}
+
 .controls {
   width: 350px;
   background: white;