adrian holovaty

April 19, 2005, 2:15 AM ET

Chicago Transit Authority map on Google Maps

Tonight I finally had a chance to implement something I've wanted to do for a while -- add an alternate background map to Google Maps as a proof of concept. To see it in action, just click the following link while using the Mozilla Firefox browser:

CTA on Google Maps extension

(If you get a message about Firefox preventing this site from installing software, you'll want to click "Edit Options..." and add this site to the list of allowed sites.)

Then, restart your browser and go to Google Maps. You'll notice a new "CTA map" link in the upper right, next to Map and Satellite.

Go to any location in Chicago (or the near suburbs), making sure you're on zoom level 5 -- the fifth peg from the top, in the zoom navigation widget. Then click "CTA map," and the map's background should change to a somewhat-evenly-aligned map of the Chicago Transit Authority bus and el routes. Here are some examples:

• Sample intersection
• Sample search results
• Sample driving directions

Pretty cool!

Much can be improved, of course -- this was just a quick hack. It only handles one zoom level at the moment, and the map is misaligned in places. But it's still quite a useful addition to Google Maps for fellow Chicagoans.

How I did it

• Downloaded the CTA's official maps and combined them into a single image in Photoshop.
• Downloaded a bunch of Google map tile images for reference, noting the coordinates in their URLs (example), and spliced them together.
• Stretched and skewed the CTA map so that it was aligned as closely as possible to the Google map. This was the most time-consuming part of the process, and it didn't turn out as perfect as I'd have liked. I blame it on the CTA map designers for not being precise enough. :-)
• Chopped the aligned CTA map into 128-by-128-pixel tiles that matched their corresponding Google map tiles exactly -- by size, shape and coordinates.
• Wrote a server-side Python script that handles dispatching images. (Ideally a future version of the extension would embed the map images in itself directly.)
• Wrote the Firefox extension, first using Greasemonkey, then using my Greasemonkey compiler to convert it to an extension.

UPDATE, April 26: Changed this entry to focus on my Firefox extension, which is easier to install than the Greasemonkey script I had provided previously.