Welcome to TrailReplay
Transform your GPX trail data into beautiful, interactive 3D animations
TrailReplay is a powerful yet simple web application that turns your GPS trail data into stunning visual stories. Whether you're a runner, cyclist, hiker, or multi-sport athlete, TrailReplay helps you relive and share your outdoor adventures through animated maps, detailed statistics, and exportable videos.
💡 Pro Tip: TrailReplay works entirely in your browser - no data is uploaded to servers, ensuring your privacy and enabling offline use!
See What You Can Create
Example of a stunning 3D trail animation made with TrailReplay
This example showcases the kind of immersive 3D trail animation you can create from your own GPX data using TrailReplay's powerful features.
Download Sample GPX Files
Try TrailReplay with these example activities
Core Features Overview
Everything you can do with TrailReplay
📁 Multi-File Upload
Upload multiple GPX files to create complex journeys. Perfect for multi-day adventures or comparing different routes.
🧩 Journey Builder
Combine multiple tracks into a single journey with custom transportation segments between activities.
🎬 3D Animation
Watch your trail come to life with smooth 3D animations, customizable icons, and real-time statistics.
📹 Video Export
Export your animated trail as a video file to share on social media or save as a memory.
📝 Trail Annotations
Add notes, photos, and points of interest to specific locations along your trail for storytelling.
🔄 Icon Timeline
Change activity icons during the animation to represent different activities or conditions.
🗺️ Multiple Map Styles
Choose from satellite, terrain, or street map styles. Enable 3D terrain for dramatic elevation visualization.
📊 Live Statistics
Real-time distance, elevation, and timing data updates as the animation plays.
🌍 Multi-Language
Full support for English and Spanish with automatic language detection.
Getting Started
Your first TrailReplay animation in 5 minutes
-
Upload Your GPX File
Drag and drop a GPX file onto the upload area, or click "Choose Files" to browse. You can upload multiple files at once. -
Build Your Journey
Your uploaded tracks appear in the Journey Builder. Reorder them by dragging, and add transportation segments between tracks if needed. -
Customize the Visualization
Choose your map style, trail color, activity icons, and animation settings. Enable 3D terrain for dramatic effect. -
Play Your Animation
Click the Play button to start the animation. Use the progress bar to jump to specific moments. -
Add Annotations (Optional)
Click "Add Note" to add annotations at specific points. These will appear during animation playback. -
Export Your Video
Click "Export Video" to save your animation as a WebM video file for sharing.
Advanced Features
Power user tips and advanced functionality
🧩 Journey Builder Advanced
The Journey Builder allows you to create complex multi-activity journeys:
- Reorder Tracks: Drag tracks to change the sequence of your journey
- Custom Timing: Override automatic timing calculations with custom durations
- Transportation Segments: Add car, boat, plane, train, or walking segments between tracks
- Auto-Preview: Changes are automatically applied to the visualization
🔄 Dynamic Icon Changes
Tell your story with changing icons:
- Click "Add Icon Change" and then click on the map or progress bar
- Choose a new icon that represents different activities or conditions
- Perfect for triathlons, adventure races, or changing weather conditions
📝 Smart Annotations
Add context to your trail:
- Choose from preset icons (📍 location, ⚠️ warning, 📸 photo, etc.)
- Add titles and descriptions for each annotation
- Annotations appear automatically during animation
- Click annotations in the list to jump to that point
🎥 Video Export Options
Professional-quality video exports:
- WebM Format: High-quality, web-optimized videos
- Clean Interface: UI elements are hidden during export
- 30 FPS: Smooth animation at 30 frames per second
- Custom Bitrate: 2.5 Mbps for optimal quality/size balance
⚠️ Video Export Tips: For best results, let the map fully load before exporting. If you see white areas (loading tiles), wait a moment or slow down the animation speed.
Map Customization
Make your visualization perfect for your story
🎨 Visual Customization
Map Styles
🛰️ Satellite: High-resolution satellite imagery
🗻 Terrain: Topographic with elevation shading
🗺️ Street: Detailed street-level mapping
🗻 Terrain: Topographic with elevation shading
🗺️ Street: Detailed street-level mapping
3D Terrain
Enable 3D terrain for dramatic elevation visualization. Choose between Mapzen Terrarium (global) or OpenTopography SRTM data sources.
Trail Styling
Customize trail color with preset options or custom colors. Adjust marker size and enable/disable background circles.
Auto Follow
Camera automatically follows the animated marker, or disable for a fixed view of the entire trail.
Troubleshooting & Tips
Common issues and how to solve them
📁 File Upload Issues
- Format: Only GPX files are supported (not TCX, FIT, or other formats)
- Size: Very large files (>1000 points) may slow down performance
- Content: GPX files must contain track points with coordinates and timestamps
🎥 Video Export Issues
- White Areas: Wait for map tiles to load before exporting
- Browser Support: Chrome and Firefox work best for video export
- Performance: Close other browser tabs for better recording performance
🗺️ Map Display Issues
- Slow Loading: Disable 3D terrain if the map loads slowly
- Missing Tiles: Check your internet connection
- Poor Performance: Try switching to a simpler map style
💡 Performance Tips:
- Simplify large GPX files by reducing track points
- Use satellite view for best visual impact
- Record videos at lower animation speeds for smoother results
- Clear browser cache if experiencing issues
Technical Details
How TrailReplay works under the hood
🔧 Technology Stack
- MapLibre GL JS: Open-source mapping and 3D visualization
- Three.js: Additional 3D graphics capabilities
- MediaRecorder API: Browser-native video recording
- Turf.js: Geospatial calculations and analysis
- Web Workers: Background processing for large files
🔒 Privacy & Security
- Client-Side Only: All processing happens in your browser
- No Data Upload: Your GPX files never leave your device
- No Tracking: No analytics or user tracking
- Open Source: All code is publicly available
🌐 Browser Support
- Chrome 80+: Full feature support including video export
- Firefox 75+: Full feature support
- Safari 14+: Basic features (video export may be limited)
- Edge 80+: Full feature support