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/

Example

Open Trail Map

Usage

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

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

Dependencies

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

• Leaflet 0.7.7
• leaflet-search 1.8.4
• leaflet-legend 1.0.0
• leaflet-locatecontrol 0.48.0
• bootstrap 3.3.5
• font-awesome 4.4.0
• osmtogeojson 2.2.5

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:

• d3 3.5.6
• jquery 1.11.3

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,
	id:'YOUR_ID',
	accessToken: 'YOUR_TOKEN'
    }).addTo(map);

#####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>

To Do

Trail data is now loaded from a dedicated AWS server, rather than the public Overpass API. As a result, response times are much shorter, but it only supplies data for North America because of limited resources. Download times are still quite long, so additional simplification and compression of the trail data on the backend would improve performance.