Fun with Google Maps

February 26, 2007

While I was metro-ing back to my car from Katsucon I got an idea. The maps that WMATA provide of the rail system show a schematic-type layout -- they simplify everything into straight lines and condense the longer runs to make the map a more reasonable size. What would it look like if it was to scale?

I sat down Sunday morning and spent a few hours tracking down the Metro stations' coordinates. Google Maps makes this easy; they put a nice Metro logo where they think the stops are. For above-ground stations I was able to tweak things a bit; for underground stations I usually put them under the nearest intersection. Then I put together some station icons showing which lines service each station and added lines to show the routes.

Here's version 0.1.
Here's version 0.2.

I need to do more tweaking; there's a map of downtown DC somewhere that shows the actual lines and stations on a street map. I also need to add some points to the lines so the tracks can follow their actual paths -- right now they go straight from point to point. That means that the above ground tracks diverge from my lines when they go around a bend (like the western end of the orange line that follows I-66). I also want to add entrance markers when you zoom in far enough since the place where you get on the train isn't the place you enter the station. I'll need new markers for that, and smaller lines.

I also added the silver line, which (allegedly) will begin construction this year. In theory, the four Tyson's Corner stops and the Weihle Avenue (eastern Reston) stop will open in 2012; the remainder of the line through Dulles Airport and out toward Leesburg are supposed to open in 2015. I'll believe it when I see it.

Edit, Sunday night: Since I had to set up the new mail server at work this evening I had time to start getting the above-ground lines taken care of. (Copying 3 GB of mail takes a while.) The western ends of the blue, orange and silver lines, and the southern end of the yellow line are fixed up now. And I can't get the eastern end of the blue line, because when the last aerial photography in the area was taken, Largo Town Center hadn't been built yet.

I think I'll also put in info ballons with stuff like location entrances and maybe thumbnails of the pictures on the WMATA site, then include a link to the full station info on WMATA. Yeah, that's the ticket.

Edit, Monday night: OK, for some reason this is more appealing to me right now that coding. I got the southern end of the green line done, and I jumped up to the north end.

Edit, Friday night: Got more above-ground lines this week. The Green is finished at both ends, I've made the western end of the Orange line more accurate, and I need to improve the Blue and probably the Yellow in southern Fairfax County as well. I also found out today that the Yellow crosses the Potomac via bridge instead of tunnel, so I'll have to fix that one up too. Then there's the western Orange out to New Carrolton; I've got it out to the Cheverly station. After that's all done I have the Red line. So, lots to do.

I've also discovered that this thing is starting to take up lots of RAM when I view the whole Metro system at once. Once I get all my points in I'm going to need to do some conditional logic so I don't follow the tracks quite as closely when I'm zoomed way out. But first things first, assuming my under-memoried computer can handle it.

I also saw the WMATA's Google map of the system. It does some of the things I want to do -- namely info balloons for the stations -- but they just did straight-line connectors, even above ground. Which means that when it's done, mine will be better :)

Edit, Saturday afternoon: Got the Blue's western end and the Yellow's southern ends patched up (this was where I started zooming in farther, so I think all that's left for the Yellow is picking up the bridge after the Pentagon. Still on the plate is the eastern end of Orange and both ends of Red. And I think the northwestern end of the Red is underground anyway.

Edit, Sunday March 4th: Had a little more fixing to do; I didn't move in to the closer zoom level until I started the Green Line. Got the Blue patched up to where it goes underground near Rosslyn, and the Yellow now correctly follows its bridge. Which means the western end of the system now matches my original vision for the project. ("Jason! Do your impersonation of George Lucas!")

Finished up the eastern Orange Line, and got some parts of the Blue between Stadium/Armory and Addison Rd. Knocked out the Red Line in the evening. That leaves me with:

With all the above-ground track in place I'm bumping the map to version 0.2. Next I start on optimizing it a little bit for different zoom levels. There's no escaping that there's a lot of information the way I'm doing this: The page has no text and is 32 kilobytes without counting the HTML frame. That's a lot of JavaScript. Optimized polylines will take me to 0.3, then I want to do info bubbles for 0.4 and entrances for 0.5. From there I'll add in any underground maps I can find, put them into the zoom optimizations, and call it version 1.0.

And nobody will ever see it but me. But hey, that's what hobbies are, right?

◀ February 22, 2007March 12, 2007 ▶