This repository contains the source code of the website gpx.studio, an online tool for GPX editing.

Disclaimer

You are welcome to use parts of the code for your personal projects but please do not host a clone of the website. If you think something is missing from the website, please create an issue to discuss it or make a pull request if you can implement it yourself.

To play with the code locally:

• Get your own token at Mapbox and put it in the directory res under mapbox_token.txt.
• Remove the Google Analytics code (at the top of index.html and about.html).

If you wish to integrate this project in your own website, please first get in touch (except for the embedding mode of course).

Features

• Import GPX files
• Draw new routes
• Edit traces : move, insert and delete points
• Cut from the start or the end
• Change the starting time and average speed of the activity
• Add timestamps with constant speed or adapted to the elevation profile
• Undo and redo
• Duplicate trace
• Reverse trace
• Simplify trace
• Merge traces
• Support for waypoints : place and drag, edit information, duplicate
• Support for track segments (trkseg) : extraction with smart waypoints matching and merge as track segments
• Delete points and/or waypoints inside or outside a rectangle selection
• Export multiple traces as one or separately in the chosen order and respecting time precedence constraints (if any time data)
• Preserve and automatically extend speed, heart rate, cadence and temperature data
• Drag and drop to load and export files
• Support as many traces as you want with scrollable tabs
• Cycling and hiking maps, and Strava Heatmap layer
• Google Drive integration : select a file, save the new version and get a shareable link as well as code to embed the map

Future developments

• Snap trace on road network or smooth trace
• Color lines with elevation or speed data

Acknowledgements

This project would not have been possible without the following amazing projects :

• Leaflet : awesome map library
• leaflet-gpx : parsing GPX files
• Leaflet.Elevation : elevation profile
• Leaflet.Icon.Glyph : markers with icons for the waypoints
• Leaflet.TextPath : direction markers
• leaflet-distance-markers : distance markers
• leaflet-control-window : centered windows for all dialogs
• leaflet-control-geocoder : search for locations with chosen API
• tilebelt : find correct tiles to request and access elevation data
• PNG.js : read raw PNG data to decode elevation from Mapbox Terrain-RGB tiles
• simplify2 : line simplification algorithm
• js-xss : HTML sanitizer for waypoint text fields
• SortableJS : for swapping the tabs
• Font Awesome : nice icons

And the data, maps and APIs from Mapbox, OpenStreetMap, OpenTopoMap, Maps.Refuges.Info, CyclOSM, IGN and Strava.