So.. I Did This Thing

So.. I Did This Thing

and I’m pretty proud of it.

Our local transit agency Startran has a website where you can track buses. Take a look at that and tell me what you see. I’ll give you a hint, it’s a map. A map with no textual data. Bad for blind users. Sure, if you’re using IE, turn on the reading of untagged graphics, and hunt around you can kind of find the pop-up label for the bus you want and see what the next two stops are, but seriously, that’s annoying, stupid, and not everyone knows how to do it (also, that trick doesn’t work on my iPhone). There has to be a better way.

After my e-mail to the company who makes the AVL software went unanswered, I did what all good geeks do: I solved the problem myself.

Enter, the Startrancker (an awful Portmanteau of Startran and tracker, the renaming contest begins now in the comments.

Basically, I repurposed some of the code from the original scripts to get the data (a fake json object that is converted into a real json object in the scripts) from the Startran website, pull it into an array, and display the WebLabel for each vehicle. The WebLabel contains the route name, and the next two “time marking” stops, along with the estimated time of arrival. I took this a step farther in order to provide blind users an idea of the vehicle’s actual location. After each vehicle’s WebLabel there is a link to track that specific vehicle. If a rider locates the route they want to travel, then the vehicle on that route (some routes have more than one vehicle running them at a time) and activates the tracking link, the display changes to show the WebLabel of the vehicle, and the approximate street address provided by reverse geocoding the latitude and longitude. Both displays refresh every 45 seconds and are only approximations of actual vehicle location, so I’m not responsible if you miss your bus because you were only relying on my interface :).

This is still very beta, and there’s probably improvements that can be made, but it seems to be working decently for now.

If you go to the site when there are no vehicles in service (like say between 19:00-06:00 central Mon-Sat and all day Sunday) the site will just show a heading for the title, because I have to add in a handler for no data.

I had originally tried putting the locations of all vehicles on the single display, but the Google Maps interface got pissed off at the number of requests. I decided also that I could use an ARIA alert (if a screen reader user leaves their browser open on a tracking screen, the updated vehicle location will be automatically announced) if I did it this way.

There’s also some weird bug with my anonymous function doing the reverse geocoding that wont let me update the array with the vehicle’s location, so it’s simply appended to the div and not put in the array (lazy, but it works until I figure out why the real thing isn’t).

it’s ugly, I know, it’ll get styled later.

Oh, and finally, all the code needed to trigger the single display of a vehicle is an onclick and not a registered handler the way I wanted. This:

$(‘.trackVehicle’).click(function() {
…code goes here…

failed to attach a click event to every member of the trackVehicle class the way I intended.

All-in-all, I’m happy with the way the project turned out. I learned a bunch of stuff about a few things I didn’t know before, and I’m still going to be learning as I debug the parts that i’m not happy with.

Comments are closed.