XC Maps

Cross country course maps for the 21st century


My role

Producer and designer

The inspiration behind this project

I've competed in hundreds of cross country races from the time I was in middle school all the way through college. Before a meet, my coach would hand out a map of the course and point out any tricky spots along the way. Most of the maps were hand-drawn or crudely outlined on a static satellite image of the area. They were difficult to read and did little to prepare runners for what to expect on the course (hills, turns, etc.) My parents usually called me the day before a race to verify where the start and finish lines were and get directions to the course. Cross country races are long and confusing for spectators who are trying to find specific mile markers on the course. I wanted to create an interactive map to make spectators’ lives easier and allow runners to become familiar with a course before even stepping foot on it.

Map functionality

For spectators

Spectators can use the map on their phones to find their current location on the course. They can also use it to find the start and finish line, as well as mile markers on the course. Before a race, spectators can use the map to find relevant meet information like driving directions, where to park, race schedules, and bathroom locations.

For runners and coaches

Runners and coaches can use the map to see more detailed information about the course. The map shows elevation along the course, allows runners to virtually run the course with the course animation feature, shows both satellite and map views, and provides a street view in select locations so that runners can virtually tour the course.

The technology

I built this web app with html, css, javascript, Google Maps API, Facebook API, and Instagram API. I also created a separate .json file to store individual map data points - making it easy to add more courses in the future.

The results

The result is an interactive map where runners, spectators, and coaches can learn more about a cross country course and share relevant information with one another.


Elon University Men's course

Logo design

Mobile and desktop views

See it live
← Previous project