Six Years Perfecting Maps on WatchOS

I love going on wilderness adventures. I am rarely happier than when I am far off into the mountains without a soul in sight. As a result, I have spent a lot of time learning how to safely explore and navigate when I am away from civilization. The most important habit I’ve found for not getting lost is to be very regular in checking your location as you go, and the best way I’ve found to do that is to have a map on my wrist.

For more than six years I’ve been working towards creating the best possible mapping experience on the Apple Watch. With yesterday’s launch of Pedometer++ 8, I feel like this design journey has reached a meaningful destination. I would contend that Pedometer++’s watchOS mapping support is the absolute best available on the App Store.

Early Efforts

I have wanted a good map on my wrist since the Apple Watch launched. This wasn’t realistically possible until watchOS 6, which brought SwiftUI to the platform and, for the first time, made “real” apps possible. But in those early days, the screens were tiny, and the processors slow.

This was my very first attempt that shipped in Pedometer++. These maps were generated completely on the server, which involved sending the relevant workout data roundtrip every time I wanted to refresh the display. This system let me validate the idea, but it was never going to be practically useful for navigation or regular use, and could never work offline.

Custom Mapping Engine

I knew that if I wanted to make progress towards this goal, I’d need to work at a lower level, so I got to work building a fully SwiftUI-native map rendering engine. SwiftUI was the only choice because it’s all that watchOS supported, and proved to be helpful for putting maps into widgets.

In 2021, I got this engine to a place where I could reliably and performantly render a map on watchOS. With it, I can render any tile-based maps and overlay location information on top.

Map Designs

Next came the question of how best to surface data to users. App design on watchOS is a really fun — but frustrating — challenge. You are designing for a relatively tiny screen, which must be operated one-handed. In this case, I want the user to be able to read the map and use it to navigate, while also having access to other workout-related information.

In the end, I settled on a “modal” approach where the user can switch between a map screen and a metrics screen using a button on the top-left corner. This interface provided one context where the user can freely pan/zoom around the map and another where I can use the more standard watchOS tabbed page interface for metrics and controls.

Dark Mode, Liquid Glass, & Cartography

Around the same time I was still wrestling with the design challenges, Apple announced new design languages focusing on layering stacking elements. I was previously using Thunderforest Outdoors as my basemap, but I found that it wasn’t well-suited for the new glassy aesthetics.

So, I commissioned a custom map. Working with the incredible cartographer Andy Allen, we created a completely new basemap. We simplified the map visually, increased the contrast, and made the elements more saturated to prevent them from becoming a muddy mess. This also allowed for a dedicated dark mode variant that is incredibly legible at arm’s length.

Striving for Great

I enlisted the help of designer Rafa Conde to find a fresh perspective. They proposed a layout where metrics are layered on the top-left corner, with the map being the top page of a vertical stack. This design handles interactivity by requiring a tap on the map first to enter “browse mode.”

After walking a few hundred miles with it, I was confident it was the correct approach. It is legible, useful, and beautiful. It finally gives me a design which feels native on the platform, but also novel and unique.

Postscript: Considering MapKit

While my work on watchOS mapping massively predates the arrival of Apple’s MapKit onto the platform, it is worth explaining why I decided to do all of this custom work to avoid using it:

• MapKit on watchOS always shows in dark mode, which closes the door on user choice and accessibility.
• I still find MapKit a bit limiting in terms of animations and overlays.
• MapKit’s coverage is improving, but there are far too many places where the MapKit map is essentially blank compared to rich topographic details available in custom solutions.