Living in a moderately hilly town, I used to make a sport of finding a bike route from A to B while avoiding steep roads. I know other cyclists seek out steep hills for training purposes, but I’m just trying to get to my destination without arriving sweaty. I dreamed of a mapping app to help me, and finally I’ve made one. (Too late, since I now have a e-bike to defang the hills.) It’s not a routing app but rather a webapp to help identify steep roads: Steepest road in town.
There are many ways of assessing steepness, and the app has a couple measures and one main tunable parameter, the minimum length. The top 15 stretches are drawn in red and others are in indigo. Also, long inclines are drawn in a tan color underneath the others. Even gentle inclines that go on and on without a break can seem tough to climb. And they could be of interest to skateboarders.
Details about the app are available on the GitHub project page, so I’ll just mention a few design issues here. Claude did almost all of the coding. It had a passable app put together in just a few hours, but I’ve probably spent 50 hours on rework and tuning over the past few weeks to get to a state I’m happy with.
I’m most pleased with my idea for showing relative elevation by varying the road width.
Most steepness maps just color the roads by the grade (examples below), but it’s not obvious which way is uphill versus downhill. Unlike general maps, this app is considering long stretches of roads, not just the instantaneous grades, so it has a long run of road segments to draw wider and wider as the elevation increases. The widths restart with each run; notice how the short uphill section just beyond the red stretch resets the road width since there is a flat segment in between them. Long and/or curvy roads present a challenge for wide paths, and the widths are capped in those cases.
I’m also pleased with the way the halo highlight (in teal above) worked out. It took a bit of work for curvy roads, and I was thinking about pulling in a proper polygon offsetting library, but it turned out fine.
Here’s an image of northwest Seattle near Fremont with my app and two others (Steep Streets and Steep Streets Seattle) that just use steepness coloring.
Regrets
Two color gradients. I color the top ranked roads in red and others in indigo. It helps highlight the top roads but makes it hard to compare grades. Given how well the halo-highlighting worked out, I’m tempted to try using only red for the gradient and using a halo for the top stretches.
Slow street map server. Loading streets for a new location can take a minute or so and might fail altogether. I didn’t look around, but I wonder if there’s a better server, even if for a small fee. If fast enough, it would allow for auto-refresh while panning and zooming the map.
Terrain grade vs road grade. I don’t know if there’s a better source of road elevations, but interpolating from the terrain grade does lead to odd values when the road is next to a cliff or embankment. I did get the app to make exceptions for bridges and tunnels, at least.
Steepest road in Chapel Hill
My other motivation for the app was to test my theory that a road in my neighborhood was the steepest in town. I’ve seen cyclists looping up and down that hill, presumably in an Everesting exercise, so I figured it must be up there. I had to crank the minimum length up to 500m, but then it made it to #1.
