diff --git a/README.md b/README.md index 8bf98ed..b1c5153 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,31 @@ # TrackMap -A web-based tool for me to analyze my daily cycling tracks. +A web-based tool for analyzing daily walking/cycling tracks with interactive map visualization and detailed statistics. -Can upload tracks as GPX files and visualize them to see daily progress. +![TrackMap Screenshot](docs/screenshots/browser-screenshot.png) + +## Features + +- **GPX File Upload**: Import cycling tracks from GPS devices and apps +- **Interactive Map**: View all tracks overlaid on an OpenStreetMap with color-coded routes +- **Track Selection**: Click tracks in sidebar to highlight and focus on individual rides +- **Detailed Statistics**: Distance, duration, average speed, elevation gain for each track +- **Automatic Popups**: View track stats by clicking tracks on map +- **Smart Zoom**: Automatic focusing on selected tracks with popup-aware positioning +- **Responsive Design**: Clean interface that works on desktop and mobile + +## Usage + +1. **Upload GPX Files**: Click "Upload GPX Files" button in the sidebar +2. **Browse Tracks**: Scroll through the track list showing dates and basic stats +3. **Select Tracks**: Click any track to highlight it on the map and view detailed statistics +4. **Explore Map**: Use map controls to zoom and pan around your routes +5. **View Statistics**: See individual track details or total summary at bottom + +## Technical Details + +- **Client-Side Only**: All processing happens in your browser +- **Vue 3**: Modern reactive JavaScript framework +- **Leaflet**: Interactive maps with OpenStreetMap tiles +- **Tailwind CSS**: Clean, responsive styling +- **GPX Parsing**: Automatic extraction of coordinates, timestamps, and elevation data diff --git a/docs/screenshots/browser-screenshot.png b/docs/screenshots/browser-screenshot.png new file mode 100644 index 0000000..7547675 Binary files /dev/null and b/docs/screenshots/browser-screenshot.png differ