quoije/yaris-obd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(map): reverse geocode location + recenter button on dashboard and history

Browse Source 
- Dashboard: recenter button in GPS card header (hidden until first fix)
- Dashboard: estimated location name under lat/lon via Nominatim reverse geocode (throttled 30s)
- History: recenter button fits map back to trip bounds
- Both buttons use crosshairs icon, hidden until data is available

Co-authored-by: Copilot <[email protected]>
This commit is contained in:
Mathieu Moran
2026-08-10 02:43:23 -04:00
co-authored by Copilot
parent 08a3bef558
commit f1145a4dbb
4 changed files with 63 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+15 -9
View File
@@ -95,21 +95,27 @@
<div class="row g-3 mb-3">
<div class="col-lg-4 col-xl-3">
<div class="card shadow-sm h-100">
<div class="card-header py-2">
<div class="card-header py-2 d-flex justify-content-between align-items-center">
<h6 class="text-primary fw-bold m-0">Live GPS</h6>
<button id="btn-recenter" class="btn btn-outline-secondary btn-sm" type="button" title="Recenter map" hidden>
<i class="fas fa-crosshairs" aria-hidden="true"></i>
</button>
</div>
<div class="card-body p-0">
<div id="map"></div>
</div>
<div class="card-footer py-2 d-flex gap-4 bg-white border-top">
<div>
<div class="text-xs text-muted fw-bold text-uppercase">Lat</div>
<div id="gpsLocationX" class="fw-semibold small">—</div>
</div>
<div>
<div class="text-xs text-muted fw-bold text-uppercase">Lon</div>
<div id="gpsLocationY" class="fw-semibold small">—</div>
<div class="card-footer py-2 bg-white border-top">
<div class="d-flex gap-4 mb-1">
<div>
<div class="text-xs text-muted fw-bold text-uppercase">Lat</div>
<div id="gpsLocationX" class="fw-semibold small">—</div>
</div>
<div>
<div class="text-xs text-muted fw-bold text-uppercase">Lon</div>
<div id="gpsLocationY" class="fw-semibold small">—</div>
</div>
</div>
<div id="gps-location-name" class="text-muted small" style="font-size:0.75rem;min-height:1rem"></div>
</div>
</div>
</div>