a web app to view Open Street Map trails and paths
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Open Trail Map

Open Trail Map is a web application to view trails, bike paths and dirt roads in the OpenStreetMap database. It allows a user to search for any location in North America and then select a trail to view distances, elevation stats and an elevation profile.

for further information: http://michaelskaug.com/open_trail_map/


Open Trail Map


The entry point is index.html. To run the app, start a web server in this repository's directory with, for example:

python -m SimpleHTTPServer 8000

and then navigate to http://localhost:8000/# in a web browser


Open Trail Map is built on Leaflet in addition to some plugins and libraries:

These can be installed individually (if you do this, make sure that index.html points to the correct location for the files) or in one step with npm:

npm install

The following are also required, but they are loaded via a CDN, so they don't need to be installed separately:

Open Trail Map also uses Leaflet.Elevation to display the elevation profiles, but the (modified) code comes packaged with this project.

Map Components

Open Trail Map interacts with several service providers, some of which require a user account and a security key. #####Map tiles Leaflet can load map imagery from many locations with the L.tilelayer() command. For example, I used MapBox:

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
	attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy <a href="http://mapbox.com">Mapbox</a>',
	maxZoom: 18,
	accessToken: 'YOUR_TOKEN'

#####Google Maps API Open Trail Map also uses the Google Maps Javascript API to access geocoding and elevation data. This service requires an account and is loaded in the html:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=geometry"></script>