3d Marathon Mapping

The Catalina Eco Marathon is a grueling race through some pretty tough mountainous terrain. It isn't easy to convey just how how hard the Catalina Eco Marathon can be to run but Mapbox have given it a good try with their interactive map of the course.

The Catalina Eco Marathon Map uses MapboxGL's new extrude property to overlay a 3d elevation chart over the course of the marathon route. The elevation chart visualizes just how steep parts of the course actually are. The 3d elevation route is itself interactive and you can mouse-over sections of the course to find out the elevation at any point.

The map includes an inset panel which displays a 2d elevation chart of the course. You can interactive with this chart to find out the elevation and distance of different parts of the course. The 2d chart is also synchronized to the map, which means that the map view also updates to show the location of the selected part of the marathon course.