Displays GPX Activities on an Open Street Maps view using the Open Layers framework.
- Web-based activity browsing using Open Street Maps (zoom, pan, as usual).
- Capable of displaying many activities at the same time
- Activities are color-coded (dark blue for runs, red for biking, green for walks, light blue for others)
- Mouse over an activity for details (date/time, distance, etc.)
- Click on an individual activity to highlight and see details
- Activity timeline list on the right panel
- Select an activity from the timeline to highlight and zoom to that activity
- Enable and disable the display of activity categories with the controls below the map
- Select multiple activities by holding shift while clicking on the map tracks.
- Click and drag the mouse (while holding Control) to select activities on the map from a "DragBox" rectangle.
See TODO file for possible future enhancements.
Install node.js if you don't have that yet.
Install the node.js package dependencies (parcel and open layers):
npm install parcel
npm install ol
Copy GPX data files to ./data/gpx/
Copy "cardioActivities.csv" to ./data/csv/
Start the small local parcel web server:
npm start
Browse to http://localhost:1234
Enjoy your map.
cardioActivities is a CSV file with the following header row and one example row:
Activity Id,Date,Type,Route Name,Distance (mi),Duration,Average Pace,Average Speed (mph),Calories Burned,Climb (ft),Average Heart Rate (bpm),Friend's Tagged,Notes,GPX File
abababab-abab-abab-abab-abababababab,2020-05-02 15:16:17,Walking,,0.70,12:31,17:17,3.36,62.0,3,,"","",2020-05-02-151617.gpx
This is the default csv export format from Run Keeper. Go to "Account Settings" -> "Export Data" to export your Run Keeper data.