Development journal / RideMeter-Simple GPS Computer

RideMeter development journal: a simple GPS cycling computer

From outings with folding bikes to a phone-based cycling computer: RideMeter's auto-pause, ride recording, MapKit navigation, and coordinate-conversion challenges.

This was my first attempt at an iOS app after discovering vibe coding. My previous programming work had been before our trip around China, more than a year earlier. Back then, I mainly wrote things I needed for work, usually userscripts and Chrome extensions.

What is a userscript?

A userscript is a small program that runs in your browser to modify or enhance an existing web page. It is similar to a browser extension, but usually lighter, with each script addressing one specific problem. A userscript can remove ads, adjust a page layout, add download buttons, fill in forms, or even give a website features it did not originally have. The Chinese nickname “Youhou” usually refers to the Tampermonkey browser extension. Install Tampermonkey, then install a script, and the script runs automatically when you visit the relevant website. In other words, the website supplies the original page, and the userscript adapts it inside your browser.

Where the idea came from

Back to my first iOS app:

After returning to Hangzhou from our trip around China, Yang and I occasionally went cycling. I sold the road bike I had built for RMB 15,000 and bought Yang a Chinese-made Brompton-style folding bike. Together with my Dahon folding bike, both fit easily in the car's trunk, so we could go anywhere for a gentle ride. Before that, I had been the sort of cyclist who wanted to maintain 30 km/h even on the commute and felt lost without a cycling computer. I even paid for Strava, which was seriously expensive.

Riders like me usually have a cycling computer on the bike, sometimes a separate one for each bike. But it is not always with you: perhaps you are riding a shared bike, or simply left the computer at home. I take mine home to charge and usually detach it when parking so it does not get stolen. In those moments, a phone can take its place.

The cycling setup behind RideMeter
The cycling setup behind RideMeter

A cycling computer differs from an ordinary navigation app in several important ways:

  1. Navigation should use cycling routes. Amap can do that too.

  2. The timer should pause when you stop. Most navigation apps do not do this, and casual riders may not need it, but it matters for training and competitive riding. If stationary time counts, it drags down your average speed and makes it harder to assess how you rode that section.

  3. The speed threshold for recording should be adjustable, for example to start counting above 5 km/h or 10 km/h. Some people chasing impressive Strava statistics set that threshold much higher, at 15 or even 20 km/h. With a 15 km/h threshold, slow sections and time at traffic lights do not bring down the recorded performance.

Introducing RideMeter

RideMeter
RideMeter

My practice project is therefore an extremely simple cycling computer. Its dark interface aims to use as little power as possible on an OLED screen, while the black-and-yellow colors suggest speed and movement.

The feature list is short: navigation; live speed, average speed, distance, and riding time; and sharing ride data. Route recording and data display also work without active navigation, in cruise mode. The business model is just as simple: AdMob ads and a one-time purchase to remove them.

I wanted this little app to work around the world without adding a marginal service cost for each user. That is why I chose Apple's MapKit rather than a Chinese navigation API or Google Maps. This is the benefit of a truly global company like Apple: it handles the difficult international infrastructure, and I can integrate it in a straightforward way.

A development pitfall

The biggest problem was converting map coordinates. If you have never built a map app, you may not know that maps in mainland China often use a different coordinate system. “Latitude and longitude” do not always mean the same reference system. GPS normally provides WGS-84 coordinates. Under local regulations and mapping requirements, Chinese internet maps commonly use transformed coordinates: Amap and Tencent mainly use GCJ-02, often nicknamed “Mars coordinates,” and Baidu adds its BD-09 transformation. Plot raw GPS coordinates on those maps and the result can be hundreds of meters off.

After building a demo, Yang and I went on several rides to test it, and the navigation position was wrong each time. Then I remembered a similar problem from working on the carpooling product Aipinche in 2015. I checked with GPT, which confirmed the WGS-84 ⇄ GCJ-02 conversion issue. I asked Codex to add the coordinate conversion, and the offset disappeared.