This repository contains the source code of the Trail Riders Map, an online tool for route planning around UK green roads.

This tools is using up-to-date Pubilc Right of Way data imported from UK council definitive maps.

Run the code

To play with the code locally:

1. Get your own API token at Mapbox and put it in res/config.json
2. Launch a local server in the root directory, for example using python3 -m http.server
3. (Optional) To test the software with a routing server:
   • download BRouter and follow the instructions here on how to launch a local instance
   • change the URL of the routing server in res/config.json

Main features

• Load, edit and create new GPX files
• Support for multiple tracks (<trk>) and track segments (<trkseg>): extraction with smart waypoints matching and merge as track segments
• Support for waypoints (<wpt>): place and drag, edit information, duplicate
• Support for files with timestamps, temperature, heartrate, cadence and power data
• Change the starting time and speed of the activity
• Reverse the direction of a trace
• Reduce the number of track points
• Merge multiple traces together
• Delete points and/or waypoints inside or outside a rectangle selection
• View and rework the structure of the file
• Export multiple traces as one or separately in the chosen order and respecting time precedence constraints (if any time data)
• Drag and drop to load and export files
• Support as many traces as you want with scrollable tabs
• Support for custom map layers
• Google Drive integration and add-on: select a file, save the new version and get a shareable link as well as code to embed the map

Acknowledgements

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

• GPX Studio: The seed to this project donate here
• Leaflet: awesome map library
• leaflet-gpx: parsing GPX files
• Leaflet.Heightgraph: elevation profile
• Leaflet.Icon.Glyph: markers with icons for the waypoints
• Leaflet.TextPath: direction markers
• Leaflet.VectorGrid: to display some vector tiles
• leaflet-distance-markers: distance markers
• leaflet-control-window: centered windows for all dialogs
• leaflet-control-geocoder: search for locations with chosen API
• leaflet-locatecontrol: center the map on user location
• leaflet-overpass-layer: get POI from Overpass 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 of course OpenStreetMap for the worldwide map data on which are based most of the map layers and the routing server.