Browse Source

Fix navigation controls - long-press and double-tap only

- Removed quick-tap navigation (was interfering with map panning)
- Keep long-press (500ms hold) as primary navigation method
- Added double-tap as fallback for browsers with touch issues
- Double-click also works on desktop in navigation mode
- No single taps trigger navigation, allowing normal map interaction

This ensures map panning works normally while providing two clear
methods to set navigation destinations.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
master
HikeMap User 1 month ago
parent
commit
34cfebdf42
  1. 42
      index.html

42
index.html

@ -4152,6 +4152,8 @@
let isPressing = false;
let pendingDestination = null;
let touchStartTime = 0;
let lastTapTime = 0;
let lastTapLocation = null;
// Navigation confirmation dialog handlers
document.getElementById('navConfirmYes').addEventListener('click', () => {
@ -4242,18 +4244,34 @@
mapContainer.addEventListener('touchend', function(e) {
if (navMode) {
const now = Date.now();
const timeSinceLastTap = now - lastTapTime;
// Check for double-tap (two taps within 300ms at roughly same location)
if (timeSinceLastTap < 300 && lastTapLocation && pendingDestination) {
// Double-tap detected - show navigation dialog
e.preventDefault();
e.stopPropagation();
// If press-and-hold didn't trigger (quick tap), show navigation dialog immediately
const tapDuration = Date.now() - touchStartTime;
if (tapDuration < 300 && !isPressing && pendingDestination) {
// Quick tap detected - show navigation dialog
document.getElementById('pressHoldIndicator').style.display = 'none';
const message = `Navigate to ${pendingDestination.track.name}?`;
document.getElementById('navConfirmMessage').textContent = message;
document.getElementById('navConfirmDialog').style.display = 'flex';
lastTapTime = 0; // Reset to prevent triple tap
lastTapLocation = null;
} else {
// Store this tap for double-tap detection
lastTapTime = now;
if (e.touches.length === 0 && e.changedTouches.length > 0) {
const touch = e.changedTouches[0];
lastTapLocation = { x: touch.clientX, y: touch.clientY };
}
}
if (isPressing) {
e.preventDefault();
}
cancelPressHold();
} else if (isPressing) {
e.preventDefault();
@ -4315,7 +4333,21 @@
});
map.on('dblclick', (e) => {
if (currentTool === 'draw' && isDrawing) {
if (navMode) {
// In navigation mode, double-click sets destination
L.DomEvent.stopPropagation(e);
L.DomEvent.preventDefault(e);
// Find nearest track point
const nearest = findNearestTrackPoint(e.latlng);
if (nearest && nearest.distance < 50) {
// Show navigation dialog
pendingDestination = nearest;
const message = `Navigate to ${nearest.track.name}?`;
document.getElementById('navConfirmMessage').textContent = message;
document.getElementById('navConfirmDialog').style.display = 'flex';
}
} else if (currentTool === 'draw' && isDrawing) {
L.DomEvent.stopPropagation(e);
finishDrawing();
}

Loading…
Cancel
Save