Make "find my location" actually follow GNSS, gated on the sidebar toggle
CI / check (push) Successful in 44s
CI / deploy (push) Successful in 18s

Two fixes based on feedback after the last commit:

1. The map wasn't following the position at all -- only the first fix
   recentered, later updates just moved the marker. Now every fix
   recenters (easeTo, not flyTo, after the first one, so it doesn't
   repeat that zoom swoop on every update) -- matches how
   GeolocateControl's own trackUserLocation always behaved.

2. GNSS should only be used when explicitly turned on via the sidebar
   "GNSS" icon, not whenever a receiver happens to have a fix --
   simpler to test against the simulator that way, and puts the
   visitor in control of whether GNSS is engaged at all. GnssControl
   now owns following the map on its own (same flyTo-once/easeTo-after
   pattern) whenever it's enabled; LocateControl checks
   GnssControl#isEnabled() and, when true, just jumps to
   #getPosition()'s current fix and reuses its existing .gnss-marker
   instead of polling/marking on its own. Only falls back to the
   browser's own geolocation when GNSS is off.

Verified end to end with the GNSS simulator: enabling sidebar GNSS
recenters immediately and keeps following over several polls;
clicking Locate while GNSS is on jumps to the same position without
creating a second marker or touching its own active state; turning
GNSS back off and clicking Locate correctly falls through to the
browser geolocation path instead.
This commit is contained in:
randy committed 2026-09-08 00:56:25 +02:00
1 parent aec665179f
commit 6e5676c890
4 files changed
+93 -76

No files matched your search

+33 -54
View File
@@ -1,24 +1,24 @@
import { Marker } from "/vendor/maplibre-gl/maplibre-gl.mjs";
const GNSS_URL = "/api/gnss/position";
const POLL_INTERVAL_MS = 1500; // matches gnss.js's own polling cadence
// Replaces MapLibre's own GeolocateControl (browser Geolocation API only)
// with one that prefers this app's own GNSS receiver (gpsd, via
// /api/gnss/position) when it has a fix, falling back to the browser's own
// geolocation otherwise — "find my location" should mean this app's own
// receiver first, not a phone/laptop's separate (and often less accurate,
// e.g. wifi-based) location service, when both are available.
// with one that prefers this app's own GNSS receiver when it's turned on
// (the sidebar "GNSS" icon, GnssControl) over a phone/laptop's separate
// (and often less accurate, e.g. wifi-based) location service. GNSS itself
// is only ever used here when explicitly enabled via that sidebar
// control — not just whenever a receiver happens to have a fix — so this
// doesn't do any polling of its own for that case; GnssControl already
// does, and already keeps the map following it once enabled, the same way
// this control's own browser-geolocation fallback follows below.
//
// Reuses MapLibre's own geolocate button styling (same classes/icon
// GeolocateControl itself uses, maplibre-gl.css) rather than a new icon —
// visually a drop-in replacement, just sourced differently.
export class LocateControl {
constructor() {
constructor(gnssControl) {
this._gnssControl = gnssControl;
this._active = false;
this._marker = null;
this._watchId = null;
this._pollTimer = null;
}
onAdd(map) {
@@ -32,7 +32,7 @@ export class LocateControl {
icon.className = "maplibregl-ctrl-icon";
icon.setAttribute("aria-hidden", "true");
this._button.appendChild(icon);
this._button.addEventListener("click", () => this._toggle());
this._button.addEventListener("click", () => this._click());
this._container = document.createElement("div");
this._container.className = "maplibregl-ctrl maplibregl-ctrl-group";
@@ -49,7 +49,21 @@ export class LocateControl {
return "top-left";
}
_toggle() {
_click() {
if (this._gnssControl.isEnabled()) {
// GNSS already follows the map on its own once enabled (GnssControl)
// and has no separate "off" state to toggle from here — just jump to
// its current fix now, for the same instant feedback clicking this
// button has always given.
const position = this._gnssControl.getPosition();
if (position) {
this._map.flyTo({ center: position, zoom: Math.max(this._map.getZoom(), 15) });
} else {
window.alert("Waiting for a GNSS fix…");
}
return;
}
if (this._active) {
this._stop();
} else {
@@ -57,46 +71,9 @@ export class LocateControl {
}
}
async _start() {
_start() {
this._active = true;
this._button.classList.add("maplibregl-ctrl-geolocate-active");
let data;
try {
const response = await fetch(GNSS_URL);
data = await response.json();
} catch (err) {
data = { available: false };
}
if (data.available) {
this._trackGnss();
} else {
this._trackBrowser();
}
}
// Keeps the marker updated on every poll, but only recenters the map on
// the very first fix — GeolocateControl's own default behavior keeps
// recentering on every update too, but replicating its "stop fighting
// the user once they've panned away" state machine isn't worth it here;
// once is enough for what this button is for.
_trackGnss() {
const poll = async () => {
let data;
try {
const response = await fetch(GNSS_URL);
data = await response.json();
} catch (err) {
return; // transient — try again next poll rather than falling back mid-track
}
if (data.available) this._setPosition(data.lon, data.lat);
};
poll();
this._pollTimer = setInterval(poll, POLL_INTERVAL_MS);
}
_trackBrowser() {
this._watchId = navigator.geolocation.watchPosition(
(position) => this._setPosition(position.coords.longitude, position.coords.latitude),
() => {
@@ -107,6 +84,11 @@ export class LocateControl {
);
}
// Recenters on every fix, following the position the way GeolocateControl
// itself does while tracking — flyTo (with its zoom swoop) only for the
// first fix, since that's the one jumping from wherever the map already
// was; easeTo for later updates, a plain pan/zoom-preserving follow
// rather than repeating that same swoop on every update.
_setPosition(lon, lat) {
if (!this._marker) {
const el = document.createElement("div");
@@ -115,16 +97,13 @@ export class LocateControl {
this._map.flyTo({ center: [lon, lat], zoom: Math.max(this._map.getZoom(), 15) });
} else {
this._marker.setLngLat([lon, lat]);
this._map.easeTo({ center: [lon, lat] });
}
}
_stop() {
this._active = false;
this._button.classList.remove("maplibregl-ctrl-geolocate-active");
if (this._pollTimer) {
clearInterval(this._pollTimer);
this._pollTimer = null;
}
if (this._watchId !== null) {
navigator.geolocation.clearWatch(this._watchId);
this._watchId = null;