Ski maps for travel apps

Amy Lee Walton
Thu, 19 Jan 2017 08:00:00 -0500

I’m designing a new ski map in Studio; highlighting the elevation in the terrain, showing each ski trail, and showing all the gondolas and chair lifts going up the mountain. tl;dr scroll to the bottom and download the style to start messing around in your own Studio account so you can get the exact details right for your app.

I started by filtering data and styling the map to expose steep terrains and ski trails. The steep slopes are styled like they’re carved into the mountainside by tracing our terrain data’s elevation contour lines. I did this by accentuating index contours to highlight every 2nd, 5th, or 10th line with a heavier weight line, and then styled in elevation labels.

In addition to styling contour details, I highlighted ski-specific features such as gondolas, chair lifts, drag lifts, magic carpets, and piste paths. I designed these paths distinctly by adding line style variations and data filtering in Studio. The chair lifts and gondolas are designed by filtering data from the class=aerialway for type=chair_lift and type=drag_lift separately from the styling of type=gondola.

To differentiate chair lifts from gondolas, I used a thinner line stroke coupled with wider, more spaced dashes for chair lifts and a closer more dotted line pattern coupled with a thick line stroke for gondolas. To get the look just right, I finessed both width and dash array fields, altering each layer using zoom ramps for more a controlled transition.

And done. Zoom around the map!.

Download the style in Studio

Download the source style files for this map to make your own version of this style.

Feel free to ask me any questions as you are designing on Twitter @amyleew - and share what you build. If you have any questions or need help getting this map into your travel app, drop the folks at support and sales a line.