mirror of
https://github.com/smittix/intercept.git
synced 2026-04-24 14:50:00 -07:00
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>
This commit is contained in:
@@ -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;">
|
||||
📍 My Location
|
||||
<label style="font-size: 10px; color: var(--text-secondary); display: block; margin-bottom: 3px;">Observer Location</label>
|
||||
<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');
|
||||
if (locEl) locEl.textContent = `${observerLocation.lat.toFixed(4)}, ${observerLocation.lon.toFixed(4)}`;
|
||||
// Update input fields
|
||||
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);
|
||||
if (btn) btn.textContent = '📍 My Location';
|
||||
alert('Unable to get location. Please enter coordinates manually.\n\nError: ' + error.message);
|
||||
if (btn) btn.textContent = '📍 Use GPS';
|
||||
},
|
||||
{ enableHighAccuracy: true, timeout: 10000 }
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user