Mon 27 Aug
2007

A Subway System in Your Pocket

Body

If you’re an iPhone owner and you live in New York City, you want to be able to carry around the official Metropolitan Transit Authority subway map on your iPhone. There are a few options for this, including using a tool like FileMarker which locally saves a PDF copy of the map to be accessed through Safari. It’s a clever approach, but it seems too tricky for me.

Instead, I prefer using Photo Albums in my iPhone to view cropped versions of the subway map, a simple but effective technique I first saw demonstrated by Mike Essl, and which doubtless many others have also used.

Thumbnail Navigation

NYC Subway Map on iPhone

One thing I haven’t seen with these maps is taking advantage of the thumbnail view in Photo Albums so that, when seen altogether, the constituent ‘tiles’ are visually re-assembled. This makes the map much more navigable, because if you have a mental understanding of how the city’s boroughs are laid out, you intuitively know which tile to jump to in order to find your stop.

When divided this way, it’s also possible to actually pan the map using the built-in forward and backward arrows, shifting from one tile to the next. Though you can’t move up and down, it’s nevertheless a surprisingly logical interaction model to move laterally, as it were, across the map, returning to the left side of the next row when you’ve reached the right edge of your current row.

All of which is to say that this is what I’ve done in creating my own subway maps for iPhone, and now I’m offering them here for download, free.

Overlaps Fill the Gaps

My map tiles also feature a significant amount of overlap, which makes panning much easier. There’s twenty pixels of duplicated map on the left and right of each tile, and seventy pixels on the top and bottom, so that it’s much easier to follow a subway line as it flows from tile to tile.

Right: A sampling of subway map tiles. Note the duplicated information at the edges. There are a total of sixteen tiles for the map — four across and four down — plus one for the legend.
Map Tiles

In short, they’re the most awesome low-tech New York City subway maps for your iPhone that you can find anywhere. I’d venture to say they’re perfect… except for the fact that the standard subway map offered for download by the MTA — available as a PDF — is impossibly intricate. At iPhone size, it’s actually more difficult to read than I’d like.

What I’d like to do is to offer a version of this map, which is displayed online over at MTA.info as a GIF graphic, but not as a PDF. It’s much simpler than the fully-detailed version, and would read beautifully on the iPhone’s screen. In fact, I found a version of the map as a PDF and created tiled JPEG files for testing on my iPhone; it worked perfectly, except for the fact that the PDF that I found — the only one I was able to locate — is five years out of date. Many of the subway lines and stops have changed in small but significant ways, so I’m loathe to distribute it for fear of confusing some users. (If anyone can get their hands on a more recent version of this map — the GIF on the MTA site isn’t big enough to use, unfortunately — I will happily create a new version for distribution.)

Anyway, if you really want it, it’s available for download too. Just don’t say I didn’t warn you.

Instructions for Mac Users

Installation is easy. Just download the ZIP file, decompress it and import the contents into iPhoto. The tiles should automatically import in the proper order, starting with the top left tile, down to the bottom right tile (plus one more for the map key) . To be sure they have, resize your iPhoto thumbnails so you can see only four across at a time; together, they should look more or less like New York City. Create a new album called something like “Subway,” drag the newly imported images into it, and set your iPhone to sync with that album via iTunes. Then buy yourself a MetroCard and take the subway.

Instructions for Windows Users

I think you have to do something with the DOS command line and edit your autoexec.bat file or something.

+

Remarks 31 total remarks were added before the post was closed.

1.
Virginia Murdoch
27 Aug 2007, 02:14 am

I guess I need to come to New York and buy an iPhone so that I can try this out.

2.
Carl
27 Aug 2007, 02:29 am

The subway map is copyright MTA. I’ve heard of them sending C&D letters to people offering services like this one before. I would be careful here. You too may receive a C&D.

3.
Khoi Vinh
27 Aug 2007, 02:34 am

Carl: Thanks, I figured as much when I looked around. Anyway, get it while it lasts, folks.

4.
Samuel Spitzer
27 Aug 2007, 11:32 am

Thanks Khoi! This is great.

I’d love a higher-res version though
as street names are a bit hard to read.

5.
Jon Parker
27 Aug 2007, 12:44 pm

Very cool idea, just what I’ve been looking for. Can’t wait to try it out.

(Once I figure out why iPhoto won’t recognize my iPhone.)

6.
Khoi Vinh
27 Aug 2007, 12:49 pm

Samuel: Yes, sorry, this map is not nearly as legible as I’d like it to be. As I said, there’s a simplified version available too, which is much, much more legible — but it’s five years out of date.

The problem with a higher resolution version is that you lose the ability to visually understand the map in thumbnail mode. For this approach, anyhow, I was constrained to the 4-across dimension of 1280 pixels.

7.
josh althorpe
27 Aug 2007, 01:15 pm

Simple, practical solution. Very nice. Although this map is free to distribute it’s too ugly for your fancy iPhone. I’ve always liked this one however I’m not from NY, and therefore would not know how accurate it is.

8.
Ivan
27 Aug 2007, 03:06 pm

Now that you have an iphone, you can use www.hopstop.com for subway directions.

9.
Ted
27 Aug 2007, 03:32 pm

Brilliant!

10.
Joe Stebbins
27 Aug 2007, 04:11 pm

Thanks!

Now, give me London and give me Paris too!

11.
Ginger
27 Aug 2007, 04:13 pm

PDF version from 2007

12.
gleek
27 Aug 2007, 04:37 pm

bummer! a couple of years ago i downloaded a ipod subway map online (for both NYC and tokyo) and now it looks like the domain is gone. the map was really good and i used it all the time. looks like the people who had it up got a C&D letter.

13.
Khoi Vinh
27 Aug 2007, 04:51 pm

Ginger: That’s the version I used for these maps. I was looking for the most recent version of the more simplified map in PDF format.

14.
Stuart Wilkes
27 Aug 2007, 06:25 pm

No good for the iPhone at the moment, but for Joe - TFL provide a downloadable interactive map of London – it’s really nice - as well as the simple map, it gives you a route planner for the fastest routes between tube stations. Best thing is as it’s an app that lives on your phone, it works on the underground where there’s no phone signal…

15.
Khoi Vinh
27 Aug 2007, 11:12 pm

Wow that’s great—and it’s a product of the government agency responsible for the system! Amazing.

16.
Randy Plemel
27 Aug 2007, 11:33 pm

Great hack!

I travel to London a bit, so I went and followed your lead and made my own set for the London Underground.

So in the spirit of sharing, feel free to download a copy.

17.
Nick
28 Aug 2007, 02:07 am

How can i get thumbnail mode on my iPhone ?

18.
Samuel Spitzer
28 Aug 2007, 11:21 pm

While using this map today I really wished Apple would release a dual-axis (up/down in addition to current left/right) way of moving through screen spaces…would work brilliantly with this tiling paradigm.

19.
Hieu Ho
29 Aug 2007, 11:37 am

Great job, Khoi. This is the most usable hand held MTA interface I have seen.

20.
Greg
29 Aug 2007, 02:01 pm

Great job Khoi!  I experimented with using photos to have a copy of the map but found the iphone’s compression too high.

I ended up making a simple gif optimized image and hosting it: www.gregtakayama.com/iphone

It would be great to have a virtual server running so that you can browse offline content in the richness of safari (as opposed to photos).

21.
Jack Barse
29 Aug 2007, 04:20 pm

&tTerrific work, Khoi, and thanks for the inspiration. I’ve posted a version for the DC Metro here.

22.
Aap!Global
29 Aug 2007, 06:20 pm

Awesome NYC Maps.

In the theme of sharing.

Check out system maps formatted for your iPhone

Tokyo Metro
Greater Tokyo Rail
San Francisco BART System
Santiago de Chile System

Enjoy and share @

23.
Carlos Granier-Phelps
30 Aug 2007, 06:10 pm

Check out this article for some really nice (and visually simplified) NYC subway maps:

- and additional info here

Enjoy!

24.
Charlie
30 Aug 2007, 07:33 pm

Khoi,

This doesn’t work as well if you use Aperture to sync photos to your iPhone. Aperture generates its own JPG previews and these are sent to the iPhone… in the case of your JPGs, Aperture is re-compressing them and they look pretty terrible on the iPhone’s display.

25.
Steve
31 Aug 2007, 12:51 am

Thank ! this is excellent and a great idea…
Any chance someone having the metro/subway maps for Paris ? I will be going there soon, and that could be handy!

Steve
First ZUI news aggregator for iPhone

26.
Aap!Global
31 Aug 2007, 03:34 pm

Steve:

Paris has been added

Enjoy your trip!

27.
chris
01 Sep 2007, 11:43 pm

any chance of boston showing up here?

28.
Jonathan
08 Sep 2007, 03:59 am

Well done. Thank you!

29.
Jason
13 Sep 2007, 10:26 am

This is awesome… I don’t have an iPhone, but ordered the new iPod Touch. I’m sure it’ll work, but will try it once I get it.

I go to Toronto a lot… Any one have the subway maps for Toronto?


Thanks…

30.
Fin
14 Sep 2007, 11:10 am

I haven’t seen a Toronto map for the iPhone but this Google Maps version of the whole TO system is really useful.

31.
Luis
14 Sep 2007, 11:50 pm

This is a great map. I sort of did my own version -just with the sections I needed-
I went to the PDF version of the map online and zoom in to different sections (just like you did) and the use the “print screen” option to copy to the clipboard and then I pasted them individually to MS photo editor and saved as a JEPEG file.
It works just fine.
You may want to try that.

Categories