Browse Source

Fix: show only one hover tooltip (closest to cursor)

Previously both the Leaflet map tooltip and the elevation chart tooltip
appeared simultaneously on every hover event.

- Map hover path: onMapHover() now only draws the indicator line on the
  chart; hideTooltip() suppresses the chart tooltip since the Leaflet
  tooltip is already next to the cursor on the map.
- Chart hover path: showHoverMarker() gains a noTooltip flag; chart's
  onChartMove passes noTooltip=true so the map marker moves silently
  while the chart tooltip (closer to the cursor) is the only one shown.

No backend restart required (frontend-only change).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
k4be 8 hours ago
parent
commit
efe806648b
2 changed files with 19 additions and 14 deletions
  1. 7 4
      gpx-vis-frontend/js/elevation.js
  2. 12 10
      gpx-vis-frontend/js/map.js

+ 7 - 4
gpx-vis-frontend/js/elevation.js

@@ -36,12 +36,13 @@ const Elevation = (() => {
     }
   }
 
-  // Called by MapView when hovering a point that belongs to the current track
+  // Called by MapView when hovering a point that belongs to the current track.
+  // Cursor is on the map, so only draw the indicator — the map tooltip is
+  // already visible and is closer to the cursor than the chart tooltip would be.
   function onMapHover(point) {
     if (!bounds || !canvas) return;
     drawIndicator(point);
-    const x = PAD.left + (point.dist / bounds.totDist) * bounds.cw;
-    positionTooltip(point, x, PAD.top + bounds.ch / 2);
+    hideTooltip();
   }
 
   // Called by MapView when hover leaves the current track
@@ -251,8 +252,10 @@ const Elevation = (() => {
     drawIndicator(chartPt);
     positionTooltip(chartPt, x, e.clientY - rect.top);
 
+    // Cursor is on the chart, so move the map marker without a Leaflet tooltip —
+    // the chart tooltip is already visible and is closer to the cursor.
     if (fullPt && typeof MapView !== 'undefined') {
-      MapView.showHoverMarker(fullPt.lat, fullPt.lon, fullPt, trackMeta);
+      MapView.showHoverMarker(fullPt.lat, fullPt.lon, fullPt, trackMeta, true);
     }
   }
 

+ 12 - 10
gpx-vis-frontend/js/map.js

@@ -253,20 +253,22 @@ const MapView = (() => {
     }
   }
 
-  function showHoverMarker(lat, lon, point, meta) {
+  function showHoverMarker(lat, lon, point, meta, noTooltip) {
     if (!hoverMarker) return;
     hoverMarker.setLatLng([lat, lon]);
     if (!map.hasLayer(hoverMarker)) hoverMarker.addTo(map);
     hoverMarker.unbindTooltip();
-    const content = typeof Elevation !== 'undefined'
-      ? Elevation.formatTooltip(point, meta)
-      : fallbackTooltip(point, meta);
-    hoverMarker.bindTooltip(content, {
-      permanent: true,
-      direction: 'top',
-      className: 'map-tooltip',
-      offset: [0, -10]
-    }).openTooltip();
+    if (!noTooltip) {
+      const content = typeof Elevation !== 'undefined'
+        ? Elevation.formatTooltip(point, meta)
+        : fallbackTooltip(point, meta);
+      hoverMarker.bindTooltip(content, {
+        permanent: true,
+        direction: 'top',
+        className: 'map-tooltip',
+        offset: [0, -10]
+      }).openTooltip();
+    }
   }
 
   function hideHoverMarker() {