Feb 27, 2019
This started out as more of a fun UI exploration and turned out to be a visual snapshot of CTA buses around the user. Anyway this is a love letter to css scroll-snap and a hate note to the CTAs bustracker API.
I needed a better way to pass the time waiting for a bus in 4˚ weather. When you're standing outside and looking at a — seemingly never — changing list of expected bus times, you're not in the best headspace. I've used a number of transit apps in the past and I've found none of them to be map based, I set out to solve that problem.
The CTA bustracker API is infuriatingly useless. They don't have any geolocation endpoints, which means that as far as I've been able to think up, it's almost impossible to open the site and know where the user is in relation to bus stops near by.
Currently the page is statically set to North Ave. I plan to use the google maps api to retrieve bus stations from a [lat, lng] but I haven't had the wherewithal to fight with the google maps api in the last week.
I found that scroll snap is A. well supported among modern browsers and B. so so easy to use. It, mixed with a quick and dirty flexbox horizontal menu, really made the whole fake-native thing a reality for me.