Wednesday, February 04, 2015

3d Elevation Profiles

Mapbox has created a really great cycle route planning map for Washington DC which also provides a 3d dimensional elevation profile of the route.

Capital Bikeshare allows you to drop two markers on a map to set your starting point and destination. It then works out a cycling route between the closest Capital Bikeshare destination to your starting point and the closest station to your destination.

The magic really happens however when you click on the 'elevation profile' button. If you open the map in a WebGL enabled browser the map will tilt to an oblique view and a 3d elevation profile will be drawn on top of the entire route.

If you right-click on the map you can rotate the map view and the 3d elevation profile magically rotates with map.

The map was created with Mapbox GL. The map degrades well if you view it on a non-WebGL enabled browser but you really don't get the full 3d effect.

Turf.js was used to power the nearest bike station search.

No comments: