Add manual location input for non-HTTPS environments

GPS geolocation only works on HTTPS or localhost. Added manual lat/lon
input fields so users can enter their coordinates directly when
accessing the app over HTTP on a local network.

- Added latitude/longitude input fields to both ADS-B tab and dashboard
- GPS button now checks for secure context before attempting geolocation
- Shows helpful error message directing users to use manual input
- Input fields update observer location and redraw range rings on change

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

templates/adsb_dashboard.html

@@ -621,10 +621,14 @@
                         <input type="checkbox" id="showRangeRings" onchange="drawRangeRings()" style="accent-color: var(--accent-green);">
                         Show Range Rings
                     </label>
-                    <button id="geolocateBtn" onclick="getGeolocation()" style="width: 100%; padding: 8px; background: rgba(0,255,136,0.2); border: 1px solid rgba(0,255,136,0.3); border-radius: 4px; color: var(--accent-green); font-family: 'JetBrains Mono', monospace; font-size: 11px; cursor: pointer; margin-bottom: 5px;">
+                    <label style="font-size: 10px; color: var(--text-secondary); display: block; margin-bottom: 3px;">Observer Location</label>
-                        📍 My Location
+                    <div style="display: flex; gap: 5px; margin-bottom: 5px;">
+                        <input type="text" id="obsLat" value="51.5074" placeholder="Lat" onchange="updateObserverLoc()" style="flex: 1; padding: 5px; background: rgba(0,0,0,0.3); border: 1px solid rgba(0,255,136,0.3); border-radius: 3px; color: var(--accent-green); font-family: 'JetBrains Mono', monospace; font-size: 10px;">
+                        <input type="text" id="obsLon" value="-0.1278" placeholder="Lon" onchange="updateObserverLoc()" style="flex: 1; padding: 5px; background: rgba(0,0,0,0.3); border: 1px solid rgba(0,255,136,0.3); border-radius: 3px; color: var(--accent-green); font-family: 'JetBrains Mono', monospace; font-size: 10px;">
+                    </div>
+                    <button id="geolocateBtn" onclick="getGeolocation()" style="width: 100%; padding: 6px; background: rgba(0,255,136,0.2); border: 1px solid rgba(0,255,136,0.3); border-radius: 4px; color: var(--accent-green); font-family: 'JetBrains Mono', monospace; font-size: 10px; cursor: pointer;">
+                        📍 Use GPS
                     </button>
-                    <div style="text-align: center; font-size: 10px; color: var(--text-secondary);" id="observerLoc">51.5074, -0.1278</div>
                 </div>
                 <div style="padding: 0 15px 10px;">
                     <label style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); display: block; margin-bottom: 5px;">Aircraft Filter</label>
@@ -929,13 +933,41 @@
             rangeRingsLayer.addTo(radarMap);
         }
 
-        // Get user geolocation
+        // Update observer location from input fields
+        function updateObserverLoc() {
+            const latInput = document.getElementById('obsLat');
+            const lonInput = document.getElementById('obsLon');
+
+            if (latInput && lonInput) {
+                const lat = parseFloat(latInput.value);
+                const lon = parseFloat(lonInput.value);
+
+                if (!isNaN(lat) && !isNaN(lon) && lat >= -90 && lat <= 90 && lon >= -180 && lon <= 180) {
+                    observerLocation.lat = lat;
+                    observerLocation.lon = lon;
+
+                    if (radarMap) {
+                        radarMap.setView([observerLocation.lat, observerLocation.lon], 8);
+                    }
+
+                    drawRangeRings();
+                }
+            }
+        }
+
+        // Get user geolocation (only works on HTTPS or localhost)
         function getGeolocation() {
             if (!navigator.geolocation) {
                 alert('Geolocation not supported');
                 return;
             }
 
+            // Check if we're on a secure context
+            if (!window.isSecureContext) {
+                alert('GPS location requires HTTPS. Please enter your coordinates manually in the lat/lon fields above.');
+                return;
+            }
+
             const btn = document.getElementById('geolocateBtn');
             if (btn) btn.textContent = '📍 Locating...';
 
@@ -944,19 +976,22 @@
                     observerLocation.lat = position.coords.latitude;
                     observerLocation.lon = position.coords.longitude;
 
-                    const locEl = document.getElementById('observerLoc');
+                    // Update input fields
-                    if (locEl) locEl.textContent = `${observerLocation.lat.toFixed(4)}, ${observerLocation.lon.toFixed(4)}`;
+                    const latInput = document.getElementById('obsLat');
+                    const lonInput = document.getElementById('obsLon');
+                    if (latInput) latInput.value = observerLocation.lat.toFixed(4);
+                    if (lonInput) lonInput.value = observerLocation.lon.toFixed(4);
 
                     if (radarMap) {
                         radarMap.setView([observerLocation.lat, observerLocation.lon], 8);
                     }
 
                     drawRangeRings();
-                    if (btn) btn.textContent = '📍 My Location';
+                    if (btn) btn.textContent = '📍 Use GPS';
                 },
                 (error) => {
-                    alert('Location error: ' + error.message);
+                    alert('Unable to get location. Please enter coordinates manually.\n\nError: ' + error.message);
-                    if (btn) btn.textContent = '📍 My Location';
+                    if (btn) btn.textContent = '📍 Use GPS';
                 },
                 { enableHighAccuracy: true, timeout: 10000 }
             );

templates/index.html

@@ -3207,11 +3207,15 @@
                                 Show Range Rings
                             </label>
                         </div>
-                        <button class="preset-btn" id="adsbGeolocateBtn" onclick="getAdsbGeolocation()" style="width: 100%; margin-top: 10px;">
+                        <div class="form-group" style="margin-top: 10px;">
-                            📍 My Location
+                            <label>Observer Location</label>
-                        </button>
+                            <div style="display: flex; gap: 5px;">
-                        <div class="info-text" style="margin-top: 5px; text-align: center;">
+                                <input type="text" id="adsbObsLat" value="51.5074" placeholder="Latitude" style="flex: 1;" onchange="updateObserverLocation()">
-                            <span id="adsbObserverLoc">51.5074, -0.1278</span>
+                                <input type="text" id="adsbObsLon" value="-0.1278" placeholder="Longitude" style="flex: 1;" onchange="updateObserverLocation()">
+                            </div>
+                            <button class="preset-btn" id="adsbGeolocateBtn" onclick="getAdsbGeolocation()" style="width: 100%; margin-top: 5px;">
+                                📍 Use GPS Location
+                            </button>
                         </div>
                         <div class="form-group" style="margin-top: 10px;">
                             <label>Aircraft Filter</label>
@@ -8257,13 +8261,44 @@
             rangeRingsLayer.addTo(aircraftMap);
         }
 
-        // Get user's geolocation
+        // Update observer location from input fields
+        function updateObserverLocation() {
+            const latInput = document.getElementById('adsbObsLat');
+            const lonInput = document.getElementById('adsbObsLon');
+
+            if (latInput && lonInput) {
+                const lat = parseFloat(latInput.value);
+                const lon = parseFloat(lonInput.value);
+
+                if (!isNaN(lat) && !isNaN(lon) && lat >= -90 && lat <= 90 && lon >= -180 && lon <= 180) {
+                    observerLocation.lat = lat;
+                    observerLocation.lon = lon;
+
+                    // Center map on location
+                    if (aircraftMap) {
+                        aircraftMap.setView([observerLocation.lat, observerLocation.lon], 8);
+                        aircraftMap._userInteracted = true;
+                    }
+
+                    // Redraw range rings
+                    drawRangeRings();
+                }
+            }
+        }
+
+        // Get user's geolocation (only works on HTTPS or localhost)
         function getAdsbGeolocation() {
             if (!navigator.geolocation) {
                 alert('Geolocation is not supported by your browser');
                 return;
             }
 
+            // Check if we're on a secure context
+            if (!window.isSecureContext) {
+                alert('GPS location requires HTTPS. Please enter your coordinates manually in the lat/lon fields above.');
+                return;
+            }
+
             const btn = document.getElementById('adsbGeolocateBtn');
             if (btn) btn.textContent = '📍 Locating...';
 
@@ -8272,27 +8307,27 @@
                     observerLocation.lat = position.coords.latitude;
                     observerLocation.lon = position.coords.longitude;
 
-                    // Update display
+                    // Update input fields
-                    const locDisplay = document.getElementById('adsbObserverLoc');
+                    const latInput = document.getElementById('adsbObsLat');
-                    if (locDisplay) {
+                    const lonInput = document.getElementById('adsbObsLon');
-                        locDisplay.textContent = `${observerLocation.lat.toFixed(4)}, ${observerLocation.lon.toFixed(4)}`;
+                    if (latInput) latInput.value = observerLocation.lat.toFixed(4);
-                    }
+                    if (lonInput) lonInput.value = observerLocation.lon.toFixed(4);
 
                     // Center map on location
                     if (aircraftMap) {
                         aircraftMap.setView([observerLocation.lat, observerLocation.lon], 8);
-                        aircraftMap._userInteracted = true;  // Prevent auto-fit
+                        aircraftMap._userInteracted = true;
                     }
 
                     // Redraw range rings
                     drawRangeRings();
 
-                    if (btn) btn.textContent = '📍 My Location';
+                    if (btn) btn.textContent = '📍 Use GPS Location';
                     showInfo(`Location set: ${observerLocation.lat.toFixed(4)}, ${observerLocation.lon.toFixed(4)}`);
                 },
                 (error) => {
-                    if (btn) btn.textContent = '📍 My Location';
+                    if (btn) btn.textContent = '📍 Use GPS Location';
-                    alert('Unable to get your location: ' + error.message);
+                    alert('Unable to get location. Please enter coordinates manually.\n\nError: ' + error.message);
                 },
                 { enableHighAccuracy: true, timeout: 10000 }
             );