A Scrollytelling Climb of Mt Fuji

Hiroya Kato has written up an interesting tutorial on how to create a Scrollytelling map which uses Mapbox's Free Camera API to follow a route on a 3D map. You can see what this scrollytelling approach involves by viewing Hirova's demo map Climbing Mount Fuji.

As you scroll through Climbing Mount Fuji you are taken on a journey along Mt Fuji's Yoshida route from the fifth station to the summit. What is clever about Hirova's scrollytelling template is that it uses two different GeoJSON files. One GeoJSON file is used to draw the Yoshida route on top of the map as a white polyline. The other GeoJSON file actually controls the free camera - or the actual scrollytelling. This second GeoJSON file contains a simplified version of the same Yoshida route to ensure that the camera follows the route to the summit of Mt Fuji but doesn't take every twist and turn.By not following every little deviation in the route the camera pans much more smoothly up the mountain while still following the actual route on the map.

If you want to create your own scrollytelling route map then you can follow Kato's tutorial Building ScrollyTelling with Free Camera API in Mapbox GL JS v2. One thing missing from Kato's scrollytelling map is any textual context. If you want to add a story element to the map then you will need to add some scroll driven events. This might be possible by combining Kato's scrollytelling template with some of the code from Mapbox's own Scrollytelling template. Which you can learn more about on Mapbox's tutorial How to Build a Scrollytelling Map.