A web-based GPX file viewer that allows you to visualize GPS tracks over 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)
• Weather Overlay: Real-time NOAA weather radar overlay with checkbox control
• File Management: Search and filter GPX files, select multiple files with Ctrl/Cmd+click or Shift+click for range selection
• 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 local directory browsing

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
4. Search: Use the search box to filter files by name
5. Customize View:
   • Change basemap using the dropdown menu
   • Toggle weather radar overlay using the layer control checkbox
   • Adjust track opacity with the slider
6. 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)

This application requires a modern browser that supports:

• File System Access API (Chrome 86+, Edge 86+)
• ES6+ JavaScript features
• WebGL for map rendering

• 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: Ensure you're using a supported browser (Chrome/Edge 86+)
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

This project is an MIT Licensed open source project. Much of the code was written using Cursor and Townie.ai so use at your own risk.