Graham van de Ruit

Editorial & information designer

  About   |   Links   |   Teaching   |



Google Maps API, Paper.js, Chroma.js

TrackMap.js is a little JavaScript file I wrote to create a method of displaying and sharing GPS tracks. It uses the Google Maps API, Paper.js and Chroma.js.

Click on a track to view its elevation profile and other information and to download the GPS file (.gpx). Roll over the elevation profile to view location-specific information. Click here to download the GPS file containing all the tracks and waypoints in this map.

TrackMap.js reads all track and waypoint information from a single .txt file exported from Garmin’s free BaseCamp program and automatically selects colours for the tracks, displays them, centres the map, calculates track length and total ascent and descent, and creates the elevation profile which it renders with Paper.js. Creating a new map is as simple as exporting a new .txt file from BaseCamp and linking to that.

My plan is to implement TrackMap.js on a larger scale, and I would be thrilled if others found it useful too. It is not fit for distribution as a library yet, but contact me if you would like to use it or develop it further.