gpxvis.js

JavaScript AMD modules for visualizing a GPX file.

Modules

gpx

Loads a GPX file from an URL.

map

Creates a map using the Google Maps API and allows to draw tracks and waypoints from a GPX file.

elep

Creates an elevation profile for a track using the Google Chart Tools.

events

Defines event constants and utility functions to fire and handle events.

config

Defines default configuration settings for map and elevation profile display.

Features

• Waypoint name and description is shown in an info-window on the map.

• Missing elevation data is automaticaly fetched using the Google Elevation API.

• The elevation profile can be zoomed in and out by selecting a range.

• The elevation profile is linked to the track drawn on the map and vice versa:

  • The current point (mouseover) is marked on the map and in the elevation profile.
  • The selected range is highlighted on the map.
  • The map automatically fits and centers the selected range.

Demo

A little demo is published on GitHub Pages.

Credits

• RequireJS: A JavaScript Module Loader and AMD implementation.
• Requirejs-plugins: RequireJS plugins for use with the Google APIs.
• Google Maps
• Google Charts
• Netcetera for sponsoring the work on gpxvis.js