Day 33. Backcountry routes in 3D 🏍️
Motorcycle routes through Southern California’s backcountry terrain, visualized with elevation and perspective.
The Backcountry Discovery Route (BDR) network maps unpaved roads designed for adventure riding. This project combines MapLibre GL for the base map with Three.js for the animated 3D motorcycle object, powered by WebGL for smooth performance. Route data comes from ridebdr.com and tracestrack.com.
What makes this visualization interesting is not the route itself, but how elevation changes the way distance and difficulty are perceived. A flat map shows mileage. A 2.5D view, enhanced with hillshading, reveals climbs, descents, and the relationship between terrain and the path chosen.
Technically, the map tiles remain 2D, with hillshading providing depth cues. A custom layer animates the motorcycle, while Three.js movements are synchronized with the MapLibre route animation, keeping the 3D object aligned with the map as it moves.
Built with riders in mind, but the approach applies anywhere topography shapes experience: hiking trails, road planning, or infrastructure projects. When elevation matters, perspective matters.
Live demo: California BDR
The project
| Piece | Role |
|---|---|
| Base | MapLibre GL + hillshading |
| 3D | Three.js motorcycle on custom layer |
| Data | ridebdr.com, tracestrack.com |
| Sync | Route animation aligned with 3D object |
How to follow
- Blog: blog.maptheclouds.com
- LinkedIn: Day 33 post
- Live demo: California BDR
- Hashtag: #100DayMapChallenge
#100DayMapChallenge · Day 33/100 · LinkedIn
Previous: Day 32: SF DA Org Chart