Option 1: Although geographically accurate, it’s not as helpful in navigating.

Option 2: It’s not bad, but it’s also not the DC metro map.

After that I decided to email WMATA to ask if they would share the source asset. There’s no doubt the original map is in SVG format, but alas they “don’t publish” the SVG version.

The response from WMATA

I won’t conjecture too much on it, but let’s just say I can understand why a design firm would keep the source svg of the map locked down. Hint: it prevents any $10/hr intern from making updates to it. 🤓

So with the easy options exhausted, I decided to make my own SVG map based exactly on the published PDF metro map. I pulled the PDF into Sketch and had it “automatically” convert to SVG. The results were ok; it had outlined everything as paths as best it could, but some parts were broken and there were a bunch of manual tweaks necessary to make it useful. The most time consuming part was editing all of the labels to make them svg text elements instead of paths — this cut the file size down tremendously and fixed some weird scaling issues. I also needed to organize the paths and encode the station elements with their corresponding StationId’s so I could programmatically identify them. This is what would make the map interactive after-all!

Sample of the generated SVG

Once I had a workable SVG map, creating the website took almost no time at all. I already had a server sending realtime train updates for the iOS app and the other major component — interacting programmatically with SVG — is fairly simple with the d3.js library. A little pan-zoom, some simple effects, a splash of design, and bam! A website was born. Check it out and let me know what you think! https://dcmetro.devshack.io. I’m always looking for suggestions to improve it.

Shamless plug: consider purchasing the DC Metro app! It’s a great companion app for riding metro and has saved my butt more than once. When I lived near NoMa-Gallaudet, it was the difference between a leisurely walk to the station and an all out sprint to catch a train before getting stuck in a 20 minute train gap.

That’s all for today folks. Feel free to reach out to me on twitter @mikesurowiec.