The Tour

On April 28th, Temple University organized 22-mile bike tour from Main Campus in Philadelphia to Temple Ambler.

More Info on the Tour

The Animated Map

The map shows a marker that follows the tour route over a satellite image. As the route progresses, a reddish line marks the path traveled. A window above the marker indicates the distance covered from the point of origin Temple University Main Campus to the marker's location. The animation starts automatically when the page loads but can be paused Pause Button or restarted Restart Button using the buttons in the top right corner.



Click here to see the map in full screen.

The process

The map was build using Mapbox GL JS libraries, Mapbox Assembly for styling and Turf to retreive and calculate the distance.

  1. A .gpx file was dowloaded from here .
  2. The .gpx file was converted to a Geojson format using QGIS.
  3. A basic HTML file to initiate the map was created following Mapbox examples on their web.
  4. Temple University logos were added to the start and end points of the tour.
  5. The code and data were hosted in github and deployed using github pages.

Settings

  • We used the satellite-streets-v12 as the basemap.
  • We used path = turf.lineString() and pathDistance = turf.lineDistance(path) to get the total distance.
  • The const alongPath = turf.along(path, distanceTraveled) .geometry.coordinates; retrieves latitude and longitude on the path.