Making an Interactive DC Metro Map
After building and soft launching the Doors Closing — DC Metro App I planned on making a light web version to provide some free value to people and possibly drive a few app purchases.
TLDR; I made an interactive DC Metro Map → https://dcmetro.devshack.io
I knew I wanted the site to almost entirely be the standard DC Metro map that is seen throughout the stations. To me, it is well designed and represents the routes in a useful way.
Unfortunately a quick search for an SVG map (one which would scale and work at any resolution) of the DC Metro yielded less than satisfactory results.
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.
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!
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.
