Swiss maps have long been praised for their accuracy, quality, and beauty. Since 1938 the Swisstopo– Swiss Federal Office of Topography, has been producing maps for hikers, Alpinists, cyclists, planners, tourists, and explorers. I decided to design a ski map with such attention to detail using Mapbox Studio and the Mapbox Streets and Mapbox Terrain tilesets.
Ski features
Ski-friendly maps typically start with a topographic map and then layer in information about steep slopes, ski routes, and snowboard routes. A topographic map is a detailed and accurate visualization of cultural and natural features characterized by a quantitative representation of relief, typically using contour lines.
Contour lines visually join points of equal elevation (height) to indicate valleys and hills, and the steepness of slopes. The contour interval of a contour map is the difference in elevation between successive contour lines.
Mapbox Terrain includes elevation contour lines from zoom level 9 and higher. You can use the index field to highlight or label every 2nd, 5th, or 10th line.
Ski data and styling
In addition to contour detail, the map style highlights specific ski features such as gondolas, chair lifts, and piste paths. Defining these line variations in Mapbox Studio required line layer styling and heavy filtering of Mapbox Streets data.
In Studio, I created a general contour layer and an index contour layer, the latter by applying an Add filter of index=5. To show prominence, I styled the index contours with a heavier weight line and added their elevation labels. Check out the source files repo to view details.
I treated chair lifts and gondolas similarly, starting with filtering data into separate layers. In Mapbox Streets, both data types are classified under bridge data, specifically class=aerialway for chair lifts and type=gondola for gondolas.
To differentiate lines, I used a medium dash line for gondolas and a more dotted closer line pattern for chair lifts. To get the look just right, I finessed the width and dasharray fields and altered the zoom ramps.
Adding interactivity
Finally, I added several ski and snowboard destinations to the map with Mapbox GL JS. I used the .flyTo method to animate between some of our favorite mountain destinations. When you click a location, the map smoothly changes its view making it feel like you’re flying there. Check out Camera Options to see how to set the speed, bearing, and pitch of your map animations.
Take a look at the map style source files and code for the GL JS animation.
Learn more about how to style with Mapbox Studio: