A web-based GPX file viewer that allows you to visualize GPS tracks on various basemaps.

• Multi-file Support: Load and view multiple GPX files simultaneously from a local directory
• Interactive Map Controls: Pan, zoom, and switch between different map styles
• Multiple Basemaps: Choose from OpenStreetMap, OpenTopoMap, and premium Thunderforest maps (Landscape and Outdoors)
• File Management: Search and filter GPX files, select multiple files with Ctrl/Cmd+click or Shift+click for range selection, or use Select All/Deselect All buttons for quick bulk operations
• Track Customization: Adjust track opacity with a slider control
• Visual Markers: Start points (red), end points (green), and waypoints (blue) are clearly marked
• Auto-fit: Map automatically adjusts to show all selected tracks
• API Key Protection: Thunderforest API keys are kept secure on the server side

• Frontend: Vanilla JavaScript with Leaflet.js for mapping and Leaflet.GPX for GPX file parsing
• Backend: TypeScript HTTP handler that serves static files and proxies map tile requests
• Map Tiles: Supports both free (OpenStreetMap, OpenTopoMap) and premium (Thunderforest) tile providers
• File Access: Uses the modern File System Access API for Chrome/Edge browsers, with automatic fallback to webkitdirectory for broader browser compatibility

1. Val Town Account: This application runs on Val Town's serverless platform
2. Thunderforest API Key (Optional): Required only if you want to use premium Thunderforest maps

To use Thunderforest premium maps (Landscape and Outdoors styles), you need to set up an API key:

1. Get a Thunderforest API Key:

   • Visit Thunderforest
   • Sign up for a free account (includes 150,000 free map requests per month)
   • Navigate to your API Keys section in the dashboard
   • Copy your API key

2. Set Environment Variable in Val Town:

   • In your Val Town project, go to the Environment Variables section
   • Add a new environment variable:
     • Name: thunderforestAPIKey
     • Value: Your Thunderforest API key (e.g., abc123def456ghi789)

1. Deploy to Val Town: The main.tsx file is configured as an HTTP trigger
2. Access the Application: Visit your Val Town URL to open the GPX viewer
3. Load GPX Files: Click "Select GPX Directory" to choose a folder containing your GPX files

1. Select Directory: Click the "Select GPX Directory" button and choose a folder containing .gpx files
2. Browse Files: Use the file list on the left to navigate your GPX files
3. Select Tracks:
   • Single click to select one file
   • Ctrl/Cmd+click to select multiple files
   • Shift+click to select a range of files
   • Use "Select All" button to select all visible files
   • Use "Deselect All" button to deselect all visible files
4. Search: Use the search box to filter files by name
5. Bulk Selection:
   • "Select All" button selects all currently visible files (respects search filter)
   • "Deselect All" button deselects all currently visible files
6. Customize View:
   • Change basemap using the dropdown menu
   • Adjust track opacity with the slider
7. Navigate: Use standard map controls to pan and zoom

• OpenStreetMap: Free, general-purpose map (no API key required)
• OpenTopoMap: Free topographic map (no API key required)
• Thunderforest Landscape: Premium landscape-focused map (requires API key)
• Thunderforest Outdoors: Premium outdoor activities map (requires API key)
• USGS National Map: The National Map from USGS

This application works with most modern browsers:

• Chrome/Edge 86+: Full support with modern File System Access API
• Firefox, Safari, and older browsers: Fallback support using webkitdirectory attribute
• All browsers: ES6+ JavaScript features and WebGL for map rendering required

• GPX Files: Standard GPS Exchange Format files with tracks, routes, and waypoints
• File Extensions: .gpx files only
• Content: Supports tracks with multiple segments, waypoints, and route data

├── main.tsx          # HTTP handler and tile proxy server
├── index.html        # Main application HTML
├── map.js            # Frontend JavaScript for map functionality
└── README.md         # This file

• / - Serves the main application
• /tiles/* - Proxies Thunderforest tile requests (keeps API key secure)
• /config.js - Provides map configuration
• /map.js - Serves the main JavaScript file

• API keys are stored securely as environment variables
• Thunderforest requests are proxied through the server to prevent key exposure
• CORS headers are properly configured for tile requests

1. "Select GPX Directory" not working:
   • Modern browsers (Chrome/Edge 86+) use the File System Access API
   • Older browsers automatically use a fallback method with broader compatibility
   • If neither works, ensure JavaScript is enabled and try a different browser
2. Thunderforest maps not loading: Check that your thunderforestAPIKey environment variable is set correctly
3. No GPX files found: Ensure your directory contains files with .gpx extension
4. Maps not displaying: Check browser console for JavaScript errors and ensure internet connectivity

• "API key not configured": Set the thunderforestAPIKey environment variable
• "Error accessing directory": Browser doesn't support File System Access API or permission denied
• "No GPX files found": Selected directory contains no .gpx files