From 89f60e894b251b1f693bbaeda4408237aa383106 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 18 Mar 2026 20:16:16 +0000
Subject: [PATCH] Fix geolocation on iOS Safari: explicit button + error
 feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace silent on-load getCurrentPosition with an opt-in button on
step 1. iOS Safari requires a user gesture for the permission prompt
to appear; calling it on page load suppresses the dialog. The button
triggers the request on tap, shows "Getting location…" while waiting,
and surfaces permission-denied / timeout errors with clear messages.

https://claude.ai/code/session_015myTTMs6yDsAGarATe5ePZ
---
 templates/index.html | 34 ++++++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 2b5127c..2637cc6 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -158,11 +158,27 @@
   <script>
     let gpsCoords = null;
 
-    // Request GPS immediately so it's ready when we need it
-    if (navigator.geolocation) {
+    function getLocation() {
+      const el = document.getElementById('loc-status');
+      if (!navigator.geolocation) {
+        el.textContent = 'Location not supported by this browser.';
+        return;
+      }
+      el.innerHTML = '<span style="color:#888">Getting location…</span>';
       navigator.geolocation.getCurrentPosition(
-        pos => { gpsCoords = { lat: pos.coords.latitude, lon: pos.coords.longitude }; },
-        () => {}
+        pos => {
+          gpsCoords = { lat: pos.coords.latitude, lon: pos.coords.longitude };
+          el.innerHTML = '<span style="color:#388e3c">📍 Location captured</span>';
+        },
+        err => {
+          const msgs = {
+            1: 'Permission denied — allow location in Safari settings.',
+            2: 'Position unavailable.',
+            3: 'Location request timed out.',
+          };
+          el.innerHTML = `<span style="color:#e53e3e">${msgs[err.code] || err.message}</span>`;
+        },
+        { timeout: 15000 }
       );
     }
 
@@ -188,10 +204,14 @@
         3: 'End of ride 2',
       };
       dots(n, n - 1);
+      const locBlock = n === 1 ? `
+        <button class="btn btn-gray" style="margin-bottom:10px" onclick="getLocation()">📍 Share location (optional)</button>
+        <div id="loc-status" style="font-size:0.85rem;text-align:center;min-height:1.2em;margin-bottom:6px"></div>` : '';
       render(`
         <div class="step-label">Step ${n} of 3</div>
         <div class="step-title">${labels[n]}</div>
         <div class="info-box">Point your camera at the odometer and take a photo.</div>
+        ${locBlock}
         <label class="cam-btn" for="img">
           📸 Open camera
           <input type="file" id="img" accept="image/*" capture="environment"
@@ -313,12 +333,6 @@
     async function startOver() {
       await fetch('/reset', { method: 'POST' });
       gpsCoords = null;
-      if (navigator.geolocation) {
-        navigator.geolocation.getCurrentPosition(
-          pos => { gpsCoords = { lat: pos.coords.latitude, lon: pos.coords.longitude }; },
-          () => {}
-        );
-      }
       showStep(1);
     }