signalk-race-control 0.8.0 → 0.10.0

package/README.md

@@ -19,9 +19,11 @@ and a live projected finishing order — during and after the race.
 - **Individual start times** — override the race's single start time for one boat at
   a time (in its own **Start time** column, right next to Finish time): for a
   staggered/pursuit start, or to correct a boat that didn't actually get away with
-  the fleet. Left blank, a boat just uses the race's own start time as before.
-  Starting or resetting the race clears every boat's override along with its finish
-  time, ready for a clean re-run.
+  the fleet. Left blank, a boat just uses the race's own start time — shown there in
+  a dimmed/italic style once the race starts, so it reads as "racing, using the fleet
+  start" rather than as not having started; setting its own time (or clicking **Now**)
+  switches it to a real override, shown normally. Starting or resetting the race clears
+  every boat's override along with its finish time, ready for a clean re-run.
 - **Add/remove boats explicitly** — type a name (autocompletes against the VET
   register, the cross-race boat registry, and any live AIS/self vessel — matching
   anywhere in the name, not just the start) and click **Add Boat**. Boats aren't
@@ -99,18 +101,41 @@ and a live projected finishing order — during and after the race.
   slow down or take a longer approach); negative means you're behind schedule to make
   the line before the gun. Disappears once the race actually starts, since the
   pre-start approach is moot by then.
-- **Course & chart** — enter lat/lon for the start line, an ordered list of rounding
-  marks, and the finish line (or click **Use my position** if you're sitting at that
-  spot, or type a name to autocomplete against existing SignalK waypoints — e.g. ones
-  already placed from a chart plotter — and pick one to fill in its position; typing
-  lat/lon directly works just as well). Every other known waypoint (not part of this
-  race's own course) shows on the chart too, as a small dim pin with its name, so it's
-  there to reference — or type into a mark's name field — even before it's used.
+- **Course & chart** — set the start line, an ordered list of rounding marks, and the
+  finish line by whichever's easiest: type lat/lon directly, type a name to autocomplete
+  against existing SignalK waypoints (e.g. ones already placed from a chart plotter) — or
+  a real navigation aid's name (a buoy, beacon, light, mark — OpenSeaMap's own data,
+  searched live) within whatever area the chart is currently showing (tagged
+  "OpenSeaMap" to tell it apart from a saved waypoint) — and pick one to fill in its
+  position, or use the position button — it reads **Pick on
+  map** while that point is still unset (arm it, then click the spot on the chart
+  below — a click is rarely pixel-perfect on the actual mark, so if there's a real
+  navigation aid within 30m of wherever was clicked, it asks whether to snap to that
+  aid's exact position and name instead of the raw click), and switches to **Use my
+  position** once it has one, to re-centre it on wherever you are right now instead.
+  Setting a position this way (map click or self
+  position — not while still typing lat/lon by hand) also suggests a name for it from
+  OpenStreetMap, when there's a real charted place right there and the name field is
+  still empty; typing or picking a waypoint always wins over the suggestion. A mark's
+  own **Pick on map** only turns on once the start line has a position — before that the
+  chart has nothing to anchor its zoom to and is still showing the whole world, not much
+  use to click into (typed lat/lon, autocomplete, and "Use my position" all stay
+  available regardless). Every other known waypoint (not part of this race's own
+  course) shows on the chart too, as a small dim pin with its name, so it's there to
+  reference — or type into a mark's name field — even before it's used.
   The chart itself is a real background map, like freeboard-sk's: it uses whatever
-  tile-based chart resource this SignalK server has registered, or falls back to public
-  OpenStreetMap + OpenSeaMap tiles when none is configured (same fallback freeboard-sk
-  itself uses). Overlaid on it is each AIS-tracked boat's recorded track for the current
-  race — drag the **replay** slider to step back
+  tile-based chart resource(s) this SignalK server has registered, or falls back to
+  public OpenStreetMap tiles when none is configured (same fallback freeboard-sk itself
+  uses). Registering more than one chart offers them as alternative base layers via the
+  layer switcher (top right of the map) rather than stacking them all at once — a plain
+  street map on top would otherwise bury a real nautical chart underneath it. When one of
+  them is Eniro's plain map (not "Eniro sjø"), that's the one shown by default — the
+  easiest to actually read at a glance; otherwise it's whichever one loaded first.
+  OpenSeaMap's
+  navigation aids (buoys, lights, marks) are offered there too, as an overlay on top of
+  whichever base chart is active, on by default. Overlaid on all of that is each
+  AIS-tracked boat's recorded track for the current race — drag the **replay** slider to
+  step back
   through it, or leave it on **Live**. Click **Play** to have it step through on its own
   instead, at whatever speed the adjoining slider is set to (1x-60x); it starts over
   from the earliest recorded position when played from Live (there's nothing to play

package/index.js

@@ -509,6 +509,7 @@ tbody tr.dnf td { color: var(--muted); }
 .vs-self .self-tag { font-size: 0.7rem; letter-spacing: 0.04em; color: var(--muted); font-style: italic; }
 .finish-cell { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
 .finish-time-input, .start-time-input { padding: 0.3rem 0.4rem; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 4px; font-variant-numeric: tabular-nums; }
+.start-time-input.inherited-value { color: var(--muted); font-style: italic; }
 .finish-now-btn, .finish-clear-btn, .finish-dnf-btn, .undo-dnf-btn, .remove-boat-btn { padding: 0.3rem 0.6rem; font-size: 0.8rem; background: transparent; color: var(--text); }
 .finish-dnf-btn { border-color: var(--bad); color: var(--bad); }
 .dnf-pos { display: block; font-size: 0.7rem; color: var(--muted); }
@@ -1367,9 +1368,15 @@ tbody tr.dnf td { color: var(--muted); }
         }
         syncVetSelectValue(row, b.tcf);
       }
+      // See the equivalent block in app.js's render() — a boat with no
+      // start time of its own already starts with the fleet, so the
+      // input shows the inherited race start time (dimmed) instead of
+      // blank, without turning it into a real per-boat override.
+      var effectiveStart = b.startTime != null ? b.startTime : race.startTime;
       if (document.activeElement !== row.startTimeInput) {
-        row.startTimeInput.value = race.multiDay ? tsToDateTimeInputValue(b.startTime) : tsToTimeInputValue(b.startTime);
+        row.startTimeInput.value = race.multiDay ? tsToDateTimeInputValue(effectiveStart) : tsToTimeInputValue(effectiveStart);
       }
+      row.startTimeInput.classList.toggle('inherited-value', b.startTime == null && race.startTime != null);
       var canStart = !!race.startTime;
       row.startTimeInput.disabled = !canStart;
       row.startNowBtn.disabled = !canStart;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-race-control",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "SignalK plugin and webapp for tracking elapsed and handicap-corrected (Time-on-Time) race time, with a per-boat editable TCF and boat names pulled from AIS when available.",
   "main": "index.js",
   "author": "Joachim Bakke <github@heiamoss.com>",

package/public/app.js

@@ -35,6 +35,7 @@
   let chartLayerGroup = null; // holds everything renderChart() redraws, cleared and rebuilt each call
   let chartActiveRaceId; // which race's bounds were last auto-fit, so switching races re-fits once
   let chartFitDone = false;
+  let mapPickTarget = null; // { latInput, lonInput, btn, onPositionChanged } while armed, else null
 
   const raceSelect = document.getElementById('raceSelect');
   const newRaceBtn = document.getElementById('newRaceBtn');
@@ -1071,15 +1072,24 @@
   // instances (one per course point row) can coexist without stepping on
   // each other the way sharing the boat autocomplete's module-level state
   // would.
-  function attachAutocomplete(input, dropdown, getPool, onSelect) {
+  // getExtra (optional) — async (query) => [{name, lat, lon, source}] —
+  // supplements getPool's synchronous, immediate matches with a slower
+  // source merged in once it resolves (used for the course-point rows'
+  // live OpenStreetMap search; see searchOsmPlaces). Debounced on its own
+  // so the instant local matches aren't held up waiting for it, and
+  // request-numbered so a slow older lookup can't clobber a newer one.
+  function attachAutocomplete(input, dropdown, getPool, onSelect, getExtra) {
     let items = [];
     let activeIndex = -1;
+    let extraRequestId = 0;
+    let extraDebounceTimer = null;
 
     function hide() {
       dropdown.hidden = true;
       dropdown.innerHTML = '';
       items = [];
       activeIndex = -1;
+      clearTimeout(extraDebounceTimer);
     }
     function renderActive() {
       Array.from(dropdown.children).forEach((el, i) => el.classList.toggle('active', i === activeIndex));
@@ -1088,15 +1098,7 @@
       onSelect(item);
       hide();
     }
-    function showFor(query) {
-      const q = query.trim().toLowerCase();
-      if (!q) {
-        hide();
-        return;
-      }
-      const matches = getPool()
-        .filter((it) => it.name.toLowerCase().includes(q))
-        .slice(0, 20);
+    function renderMatches(matches, q) {
       items = matches;
       activeIndex = -1;
       if (!matches.length) {
@@ -1118,6 +1120,7 @@
             '</mark>' +
             escapeHtml(item.name.slice(idx + q.length));
         }
+        if (item.source === 'osm') div.innerHTML += '<span class="suggestion-source">OpenSeaMap</span>';
         // mousedown (not click) fires before the input's blur, same reason
         // as the boat-name suggestions above.
         div.addEventListener('mousedown', (e) => {
@@ -1128,6 +1131,30 @@
       });
       dropdown.hidden = false;
     }
+    function showFor(query) {
+      const q = query.trim().toLowerCase();
+      clearTimeout(extraDebounceTimer);
+      if (!q) {
+        hide();
+        return;
+      }
+      const localMatches = getPool()
+        .filter((it) => it.name.toLowerCase().includes(q))
+        .slice(0, 20);
+      renderMatches(localMatches, q);
+      if (!getExtra) return;
+      extraDebounceTimer = setTimeout(() => {
+        const requestId = ++extraRequestId;
+        getExtra(query)
+          .then((extraItems) => {
+            if (requestId !== extraRequestId || !extraItems || !extraItems.length) return;
+            const seen = new Set(localMatches.map((m) => m.name.toLowerCase()));
+            const merged = localMatches.concat(extraItems.filter((it) => !seen.has(it.name.toLowerCase()))).slice(0, 20);
+            renderMatches(merged, q);
+          })
+          .catch(() => {});
+      }, 400);
+    }
 
     input.addEventListener('input', () => showFor(input.value));
     input.addEventListener('focus', () => {
@@ -1152,12 +1179,105 @@
     });
   }
 
-  // One name+lat+lon(+optional "use my position") row, shared by start
-  // line, finish line, and mark entry. The name field autocompletes against
-  // existing SignalK waypoints (e.g. ones already placed on a chart
-  // plotter) — picking one fills in lat/lon (and the name) from it, so a
-  // start/mark/finish position doesn't have to be typed by hand if a
-  // waypoint for it already exists.
+  // Best-effort: searches OpenSeaMap's own underlying data — OSM's
+  // seamark:* tags, the same data its tiles are rendered from, queried
+  // via the Overpass API — for named navigation aids (buoys, beacons,
+  // lights, marks) within the chart's current visible area. Used to
+  // supplement the course editor's waypoint autocomplete: a rounding mark
+  // is far more likely to already be a real charted navigation aid than
+  // an arbitrary place name, so this is scoped to seamark:type features
+  // specifically rather than OSM place names in general. Silently returns
+  // nothing on any failure, timeout, or when the chart hasn't been
+  // created yet (course section not expanded) — same spirit as the
+  // reverse-geocode name suggestion.
+  // Public Overpass mirrors are individually flaky (rate limits, regional-
+  // only data, outages) — tried one at a time, in order, falling through
+  // to the next on any failure or timeout. Deliberately sequential, not
+  // raced in parallel: a fast mirror with an incomplete regional extract
+  // would otherwise "win" with a confident-looking empty result and mask
+  // a real answer a fuller (but slower) mirror would have found. Returns
+  // [] if every mirror fails.
+  const OVERPASS_ENDPOINTS = ['https://overpass.kumi.systems/api/interpreter', 'https://overpass.osm.ch/api/interpreter'];
+  async function queryOverpass(overpassQuery) {
+    for (const base of OVERPASS_ENDPOINTS) {
+      const controller = new AbortController();
+      const timer = setTimeout(() => controller.abort(), 7000);
+      try {
+        const res = await fetch(`${base}?data=${encodeURIComponent(overpassQuery)}`, { signal: controller.signal });
+        if (!res.ok) continue;
+        const data = await res.json();
+        if (data && Array.isArray(data.elements)) return data.elements;
+      } catch (e) {
+        // try the next endpoint
+      } finally {
+        clearTimeout(timer);
+      }
+    }
+    return [];
+  }
+
+  function seamarkElementsToResults(elements) {
+    const seen = new Set();
+    const results = [];
+    elements.forEach((el) => {
+      const name = el.tags && (el.tags['seamark:name'] || el.tags.name);
+      if (!name || typeof el.lat !== 'number' || seen.has(name.toLowerCase())) return;
+      seen.add(name.toLowerCase());
+      results.push({ name, lat: el.lat, lon: el.lon, source: 'osm' });
+    });
+    return results;
+  }
+
+  async function searchOsmPlaces(query) {
+    const q = query.trim();
+    if (!q || !chartMap) return [];
+    const escaped = q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const b = chartMap.getBounds();
+    const bbox = `${b.getSouth()},${b.getWest()},${b.getNorth()},${b.getEast()}`;
+    const overpassQuery =
+      `[out:json][timeout:9];(node["seamark:type"]["seamark:name"~"${escaped}",i](${bbox});` +
+      `node["seamark:type"]["name"~"${escaped}",i](${bbox}););out body 8;`;
+    return seamarkElementsToResults(await queryOverpass(overpassQuery));
+  }
+
+  // Used right after a map click: is there a real charted navigation aid
+  // within snapping distance of wherever was clicked? A click is rarely
+  // pixel-perfect on the actual mark, so offering to snap to the nearest
+  // one (rather than silently using the imprecise raw click) means the
+  // recorded position is exactly right when there's something real there
+  // to be exact about.
+  const SNAP_RADIUS_M = 30;
+  async function findNearbySeamark(lat, lon) {
+    if (!chartMap) return null;
+    const overpassQuery = `[out:json][timeout:9];node(around:${SNAP_RADIUS_M},${lat},${lon})["seamark:type"];out body 5;`;
+    const elements = await queryOverpass(overpassQuery);
+    const candidates = seamarkElementsToResults(elements);
+    if (!candidates.length) return null;
+    candidates.sort((a, b) => distanceMeters(lat, lon, a.lat, a.lon) - distanceMeters(lat, lon, b.lat, b.lon));
+    return candidates[0];
+  }
+
+  function distanceMeters(lat1, lon1, lat2, lon2) {
+    const R = 6371000;
+    const rad = Math.PI / 180;
+    const dLat = (lat2 - lat1) * rad;
+    const dLon = (lon2 - lon1) * rad;
+    const a = Math.sin(dLat / 2) ** 2 + Math.cos(lat1 * rad) * Math.cos(lat2 * rad) * Math.sin(dLon / 2) ** 2;
+    return 2 * R * Math.asin(Math.sqrt(a));
+  }
+
+  // One name+lat+lon+position-button row, shared by start line, finish
+  // line, and mark entry. The name field autocompletes against existing
+  // SignalK waypoints (e.g. ones already placed on a chart plotter) —
+  // picking one fills in lat/lon (and the name) from it, so a position
+  // doesn't have to be typed by hand if a waypoint for it already exists.
+  // The one button toggles with whether this row already has a position:
+  // "Pick on map" while empty (arm it, then click the chart below to fill
+  // lat/lon from wherever was clicked), "Use my position" once it has one
+  // (a quick way to re-centre it on wherever you are right now instead).
+  // Mark rows' own map-picking gating (see updateMarkPickGating) is
+  // recomputed on every position-setting action here, on any row, since a
+  // start line change is typically what unlocks it.
   function buildPointRow(point) {
     const row = document.createElement('div');
     row.className = 'course-point-row';
@@ -1191,15 +1311,47 @@
     lonInput.placeholder = 'Lon';
     lonInput.value = point ? point.lon : '';
 
-    const useHereBtn = document.createElement('button');
-    useHereBtn.type = 'button';
-    useHereBtn.className = 'secondary';
-    useHereBtn.textContent = 'Use my position';
-    useHereBtn.addEventListener('click', async () => {
+    const posBtn = document.createElement('button');
+    posBtn.type = 'button';
+    posBtn.className = 'secondary pick-on-map-btn';
+
+    function hasPosition() {
+      return latInput.value !== '' && lonInput.value !== '';
+    }
+    function updatePosBtnLabel() {
+      posBtn.textContent = hasPosition() ? 'Use my position' : 'Pick on map';
+    }
+    // Cheap enough to run on every keystroke — label state and mark
+    // gating both just check whether lat/lon are non-empty.
+    function notifyPositionChanged() {
+      updatePosBtnLabel();
+      updateMarkPickGating();
+    }
+    // The heavier, best-effort name suggestion only makes sense after a
+    // real discrete action (a map click, a self-position fetch) — not on
+    // every keystroke while someone's still typing lat/lon by hand.
+    function handlePositionSet() {
+      notifyPositionChanged();
+      maybeSuggestNameFromPosition(nameInput, latInput.value, lonInput.value);
+    }
+
+    latInput.addEventListener('input', notifyPositionChanged);
+    lonInput.addEventListener('input', notifyPositionChanged);
+
+    posBtn.addEventListener('click', async () => {
+      if (!hasPosition()) {
+        if (mapPickTarget && mapPickTarget.btn === posBtn) {
+          cancelMapPick();
+        } else {
+          armMapPick(latInput, lonInput, nameInput, posBtn, nameInput.placeholder || 'this point', handlePositionSet);
+        }
+        return;
+      }
       const pos = await fetchSelfPosition();
       if (pos) {
         latInput.value = pos.lat;
         lonInput.value = pos.lon;
+        handlePositionSet();
       } else {
         setCourseStatus('Could not read a current position from SignalK.', true);
       }
@@ -1213,11 +1365,74 @@
         nameInput.value = wp.name;
         latInput.value = wp.lat;
         lonInput.value = wp.lon;
-      }
+        notifyPositionChanged();
+      },
+      searchOsmPlaces
     );
 
-    row.append(nameWrap, latInput, lonInput, useHereBtn);
-    return { row, nameInput, latInput, lonInput };
+    updatePosBtnLabel();
+    row.append(nameWrap, latInput, lonInput, posBtn);
+    return { row, nameInput, latInput, lonInput, pickBtn: posBtn, hasPosition };
+  }
+
+  // Best-effort: suggests a name for an unnamed point from OpenStreetMap's
+  // reverse geocoding once a position is actually set (by map click or
+  // self-position — not while still typing lat/lon by hand), so a
+  // start/finish pin or a rounding mark doesn't have to be named from
+  // scratch when there's a real charted place right there (a headland, a
+  // skerry, a harbour). Never overwrites a name already typed or already
+  // filled in from picking a waypoint; silently does nothing on any
+  // failure, same spirit as the VET/KTK/waypoint lookups elsewhere.
+  async function maybeSuggestNameFromPosition(nameInput, lat, lon) {
+    if (nameInput.value.trim()) return;
+    try {
+      const res = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lon}&zoom=16&addressdetails=0`);
+      if (!res.ok) return;
+      const data = await res.json();
+      if (data && data.name && !nameInput.value.trim()) nameInput.value = data.name;
+    } catch (e) {
+      // best-effort only
+    }
+  }
+
+  // Arms "pick on map" mode: the next click on the chart fills this row's
+  // lat/lon from wherever was clicked. Clicking the same button again, a
+  // different row's pick button, or Escape all cancel it.
+  function armMapPick(latInput, lonInput, nameInput, btn, label, onPositionChanged) {
+    cancelMapPick();
+    mapPickTarget = { latInput, lonInput, nameInput, btn, onPositionChanged };
+    btn.classList.add('active');
+    courseChart.classList.add('picking');
+    setCourseStatus(`Click the map below to place "${label}".`);
+  }
+
+  function cancelMapPick() {
+    if (!mapPickTarget) return;
+    mapPickTarget.btn.classList.remove('active');
+    mapPickTarget = null;
+    courseChart.classList.remove('picking');
+    setCourseStatus('');
+  }
+
+  // Marks need somewhere on the map worth clicking into — before the start
+  // line has a position, the chart has nothing to anchor its zoom to and
+  // is still showing the whole world (see chartFitDone). This only ever
+  // gates the "Pick on map" state of a mark's button, never "Use my
+  // position" — once a mark already has its own position (typed by hand,
+  // or picked from a waypoint), re-centring it on self is always fine
+  // regardless of the start line.
+  function startLineHasPosition() {
+    return !!(startLineRefs && startLineRefs.some((r) => r.latInput.value !== '' && r.lonInput.value !== ''));
+  }
+
+  function updateMarkPickGating() {
+    const startOk = startLineHasPosition();
+    markRefs.forEach((r) => {
+      if (!r.pickBtn) return;
+      const gated = !r.hasPosition() && !startOk;
+      r.pickBtn.disabled = gated;
+      r.pickBtn.title = gated ? 'Set the start line first — the map needs a position to zoom to before you can pick one for a mark.' : '';
+    });
   }
 
   function renderMarkRows() {
@@ -1275,6 +1490,7 @@
   function loadCourseFormFromRace() {
     const c = (raceState && raceState.course) || { startLine: null, marks: [], finishLine: null };
 
+    cancelMapPick();
     startLineRefs = [buildPointRow(c.startLine ? c.startLine[0] : null), buildPointRow(c.startLine ? c.startLine[1] : null)];
     startLineRefs[0].nameInput.placeholder = 'Pin end name';
     startLineRefs[1].nameInput.placeholder = 'Committee boat end name';
@@ -1289,6 +1505,7 @@
 
     markRefs = (c.marks || []).map((m) => buildMarkRow(m));
     renderMarkRows();
+    updateMarkPickGating();
     setCourseStatus('');
   }
 
@@ -1498,14 +1715,44 @@
     chartMap = L.map(courseChart, { attributionControl: true }).setView([0, 0], 2);
     chartLayerGroup = L.layerGroup().addTo(chartMap);
     addChartBaseLayers(chartMap);
+    chartMap.on('click', async (e) => {
+      if (!mapPickTarget) return;
+      const target = mapPickTarget;
+      const clickedLat = e.latlng.lat;
+      const clickedLon = e.latlng.lng;
+      target.latInput.value = clickedLat.toFixed(6);
+      target.lonInput.value = clickedLon.toFixed(6);
+      cancelMapPick();
+      if (target.onPositionChanged) target.onPositionChanged();
+
+      // A click is rarely pixel-perfect on the actual mark — if there's a
+      // real charted navigation aid right where this one landed, ask
+      // before quietly using the imprecise raw click instead.
+      const nearby = await findNearbySeamark(clickedLat, clickedLon);
+      if (!nearby) return;
+      if (!confirm(`Snap to nearby mark "${nearby.name}"?`)) return;
+      target.latInput.value = nearby.lat.toFixed(6);
+      target.lonInput.value = nearby.lon.toFixed(6);
+      if (target.nameInput && !target.nameInput.value.trim()) target.nameInput.value = nearby.name;
+      if (target.onPositionChanged) target.onPositionChanged();
+    });
     return chartMap;
   }
 
-  // Prefers whatever tile-based chart resource this SignalK server has
+  // Prefers whatever tile-based chart resource(s) this SignalK server has
   // registered (e.g. a locally cached raster chart) — same as freeboard-sk
-  // itself would use. Falls back to public OpenStreetMap + OpenSeaMap
-  // tiles when none is configured, which is also freeboard-sk's own
-  // fallback with no chart provider installed.
+  // itself would use. Falls back to public OpenStreetMap tiles when none
+  // is configured, which is also freeboard-sk's own fallback with no
+  // chart provider installed. When more than one chart is registered
+  // they're offered as alternative base layers (only one shown at a time,
+  // picked via the layer control) rather than stacked on top of each
+  // other — stacking silently buried whichever chart happened to load
+  // last under whatever loaded after it, e.g. a plain street map with no
+  // navigation aids covering an actual nautical chart underneath it.
+  // OpenSeaMap's navigation-aids overlay (buoys, lights, marks) is always
+  // offered too, on top of whichever base is active, since a registered
+  // chart isn't guaranteed to already include them the way Kartverket's
+  // does.
   async function addChartBaseLayers(map) {
     let tileCharts = [];
     try {
@@ -1514,6 +1761,8 @@
     } catch (e) {
       tileCharts = [];
     }
+    const baseLayers = {};
+    let defaultKey = null;
     if (tileCharts.length) {
       tileCharts.forEach((c) => {
         const opts = { maxZoom: c.maxzoom || 19, minZoom: c.minzoom || 0, attribution: c.name || '' };
@@ -1523,17 +1772,31 @@
             [c.bounds[3], c.bounds[2]]
           ];
         }
-        L.tileLayer(c.url, opts).addTo(map);
+        const key = c.name || c.id;
+        baseLayers[key] = L.tileLayer(c.url, opts);
+        // Eniro's plain map (not "Eniro sjø", and not Kartverket/Hitta,
+        // which both render very dark) is the easiest one to actually
+        // read at a glance — preferred as the default when it's
+        // registered, same as any other order these come back in.
+        if ((c.id || '').toLowerCase() === 'eniro') defaultKey = key;
       });
     } else {
-      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      baseLayers['OpenStreetMap'] = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 19,
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-      }).addTo(map);
-      L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
+      });
+    }
+    baseLayers[defaultKey || Object.keys(baseLayers)[0]].addTo(map);
+
+    const overlays = {
+      'Navigation aids (OpenSeaMap)': L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
         maxZoom: 18,
         attribution: '&copy; <a href="https://www.openseamap.org">OpenSeaMap</a>'
-      }).addTo(map);
+      }).addTo(map)
+    };
+
+    if (Object.keys(baseLayers).length > 1 || Object.keys(overlays).length) {
+      L.control.layers(baseLayers, overlays, { collapsed: true }).addTo(map);
     }
   }
 
@@ -2271,9 +2534,21 @@
         row.vetHandicapVersion = handicapVersion;
       }
       syncVetSelectValue(row, b.tcf);
+      // A boat with no start time of its own already starts with the
+      // fleet — effectiveStartTime (server-side) falls back to the race's
+      // own start time, and elapsed/corrected already reflect that. The
+      // input showing blank instead of that time made it look like the
+      // boat hadn't started at all even while it was actively being
+      // timed; showing the inherited value (dimmed, to mark it as
+      // inherited rather than a boat-specific override) fixes that
+      // without changing what's actually stored — only "Now" or typing a
+      // value turns it into a real per-boat override (e.g. a pursuit
+      // start), same as before.
+      const effectiveStart = b.startTime != null ? b.startTime : raceState.startTime;
       if (document.activeElement !== row.startTimeInput) {
-        row.startTimeInput.value = raceState.multiDay ? tsToDateTimeInputValue(b.startTime) : tsToTimeInputValue(b.startTime);
+        row.startTimeInput.value = raceState.multiDay ? tsToDateTimeInputValue(effectiveStart) : tsToTimeInputValue(effectiveStart);
       }
+      row.startTimeInput.classList.toggle('inherited-value', b.startTime == null && raceState.startTime != null);
       const canStart = !!raceState.startTime;
       row.startTimeInput.disabled = !canStart;
       row.startNowBtn.disabled = !canStart;
@@ -2468,6 +2743,10 @@
   addMarkBtn.addEventListener('click', () => {
     markRefs.push(buildMarkRow(null));
     renderMarkRows();
+    updateMarkPickGating();
+  });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && mapPickTarget) cancelMapPick();
   });
   saveCourseBtn.addEventListener('click', saveCourse);
 

package/public/style.css

@@ -120,6 +120,13 @@ button.confirming {
   font-variant-numeric: tabular-nums;
 }
 
+/* Shows the race's own start time when this boat has no override of its
+   own — dimmed to mark it as inherited, not a boat-specific start. */
+.start-time-input.inherited-value {
+  color: var(--muted);
+  font-style: italic;
+}
+
 .controls {
   margin-top: 0.75rem;
   display: flex;
@@ -300,6 +307,15 @@ main {
   align-items: center;
 }
 
+.course-point-row .course-name-autocomplete .suggestions {
+  /* The name field itself is only 7rem wide to fit inline in the row, but
+     the dropdown it opens shouldn't be squeezed to match — that made boat
+     and waypoint names unreadable. right:auto lets it grow past the
+     parent's edge instead of being pinned to it. */
+  right: auto;
+  min-width: 16rem;
+}
+
 .course-point-row .course-name-autocomplete {
   position: relative;
   width: 7rem;
@@ -330,6 +346,16 @@ main {
   font-size: 0.75rem;
 }
 
+.course-point-row button.pick-on-map-btn.active {
+  background: var(--accent);
+  color: #04202e;
+  border-color: var(--accent);
+}
+
+.chart-map.picking {
+  cursor: crosshair;
+}
+
 .course-actions {
   margin-top: 0.75rem;
   display: flex;
@@ -441,6 +467,20 @@ main {
   opacity: 0.85;
 }
 
+.chart-map .leaflet-control-layers {
+  background: var(--panel);
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+
+.chart-map .leaflet-control-layers-toggle {
+  filter: invert(1);
+}
+
+.chart-map .leaflet-control-layers label {
+  color: var(--text);
+}
+
 .replay-controls {
   margin-top: 0.5rem;
   display: flex;
@@ -591,6 +631,13 @@ main {
   font-weight: 700;
 }
 
+.suggestions .suggestion-item .suggestion-source {
+  float: right;
+  font-size: 0.7rem;
+  color: var(--muted);
+  font-style: italic;
+}
+
 .suggestions .suggestion-item:hover,
 .suggestions .suggestion-item.active {
   background: rgba(56, 189, 248, 0.15);