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:
(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:
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.
Comments
Posted by Wilson on April 19, 2005, at 4:11 p.m.:
This is very cool, and a great illustration of the potential of both Google maps and Greasemonkey. I don't see any reason why Google shouldn't be working on transit maps like this (with train directions) for Chicago, New York and San Francisco (at the very least).
Posted by eszter on April 19, 2005, at 4:34 p.m.:
This is a really wonderful service you've created for CTA users, thank you! I have often been frustrated by the CTA maps and had hoped such an option would come along. (Some adddresses in Evanston are a bit misaligned. Thought I'd mention it in case you were going to work on it any more.) Thanks much!
Posted by matt on April 19, 2005, at 4:36 p.m.:
this is amazing work. you're right that the cta map isn't always totally precise: bryn mawr and broadway, for example, display a block or two northeast of their actual location, but still...just incredible. greasemonkey is one of the coolest firefox things going, and this is now one of my favorite greasemonkey scripts.
Posted by Adrian on April 19, 2005, at 4:38 p.m.:
eszter -- You're welcome. Yeah, the outer edges of the map (Evanston, etc.) are rather misaligned. I didn't spend too much time on perfecting it, as this is just a proof of concept, but I'll consider improving it.
If any Photoshop experts out there want to do a better job of lining up the images, feel free to contact me, and I'll send you the PSD file.
Posted by pat on April 19, 2005, at 4:42 p.m.:
Wonderful, I was think of something like this the other day, although I was thinking of doing it more like the craigslist housing maps. Anyhow this is a wonderful service and I hope to see more updates to it.
Posted by ian on April 19, 2005, at 5:06 p.m.:
freaking great. part of the 'challenge' in inserting additional layers of thematic imagery is that it will quickly become apparent that many maps represent a distorted view of reality--to fit on the printed page all kinds of creative liberties are taken. try this with the MTA map in NYC and you'll go nuts!! I did. Now go one step further and introduce transparency so a user can geo-reference BOTH layers at the SAME time. this makes it super useful, like this http://urbanmapping.com/flashdemo.html
Posted by Happy Steve on April 19, 2005, at 5:21 p.m.:
WOW! That is amazingly cool. Although I'd be a little hesitant to install any script that's filled with large amounts of encoded data (if you do embed the map into it one day).
Posted by anonymous on April 19, 2005, at 8:19 p.m.:
Great job, this script is awesome. I agree with the above poster that there seem to be some addresses that are off. I tried my neighborhood and for some reason the program was quite a few blocks away from the actual intersection. My address is a half a block from an EL stop but the program told me my address was right next to an El stop that is two stops north of my stop.
Posted by Seth on April 19, 2005, at 9:34 p.m.:
This is way cool. You've inspired me to start one for Boston.
Posted by Andrew Dupont on April 20, 2005, at 2:06 a.m.:
FYI: this script doesn't work on the G4-optimized nightly build of Firefox I use. Probably the fault of Greasemonkey rather than this specific script, but just thought I'd let you know.
This is phenomenal work, by the way.
Posted by Jose on April 20, 2005, at 3:54 a.m.:
omg wtf bbq You are a genius.
Posted by Jeremy Dunck on April 20, 2005, at 4:45 a.m.:
Andrew, I'm pretty sure that failure is GM's fault. 0.3 is coming out any day now, and should be better on current nightlies... FF breaks stuff fairly often on nightlies, though.. part and parcel.
Posted by Jeff on April 20, 2005, at 5:33 a.m.:
This is outstanding stuff.
Posted by FataL on April 20, 2005, at 8:12 a.m.:
This script also works in Opera 8.0 final. That kind of functionality in browsers just perfect, it opens unlimited oportunites.
Posted by Chris on April 20, 2005, at 10:49 a.m.:
You could embed the images in the javascript itself by base64 encoding the image. This article explains in mroe detail:
http://www.gadgetopia.com/2004/06/30/InlineData.html
Doesn't work in IE though unfortunately.
Posted by jeff on April 20, 2005, at 5:14 p.m.:
nice work. interested in a job?
Posted by Chris on April 20, 2005, at 7:03 p.m.:
Adrian,
That's awesome!
I loved the Google satellite views because you can see whether an area has sidewalks, overpasses, etc. -- in other words, how walkable a neighborhood/location is.
And now with your GM-powered possibility of transit map overlays (underlays?), Google Maps just gets sweeter!
Posted by sedela on April 20, 2005, at 8:43 p.m.:
you might know already but the London Tube has been incorp. into Google Maps...http://maps.google.co.uk/
enter in, say, "st. pancras station, london, uk"
Posted by sedela on April 21, 2005, at 4:42 p.m.:
i'd also say that north side does better than southside. some south side addresses i tested landed me in the lake. :)
Posted by Andrew on April 22, 2005, at 5:22 p.m.:
Any chance that this could be made to work with the Chicago Craigslist rental map hack?
http://www.paulrademacher.com/housing/
That would be one hell of a useful hack for me, since I'm moving to Chicago this summer and need to find a place.
I tried the obvious solution of adding the website to the "Included pages" in Greasemonkey's Manage User Scripts page, but that doesn't seem to have worked.
Anyone else have any ideas? I'm no programmer, but I can get by if someone points me in the right direction.
gariak@yahoo.com
Posted by jordan314 on April 23, 2005, at 10:34 a.m.:
Dude. Awesome work. I was hoping someone would do something like this. It's very helpful. Another neat trick would be to somehow combine it with the RTA trip planner database:
http://tripsweb.rtachicago.com.
This is something that someone should get paid to do because it would be so useful. But the integration alone that you did is very helpful. I noticed my browser contacting your server to download the CTA map--hopefully the bandwidth isn't killing your server?
Posted by Lucas on May 2, 2005, at 11:55 p.m.:
I would LOVE to see this implemented for NYC. Though of course, the transportation system is ridicuously extensive, it would be super useful.
Posted by Kim Scarborough on May 3, 2005, at 6:35 p.m.:
That's great. Maybe you could package the maps in the extension so that it didn't have to download them from your site?
Posted by Adrian on May 3, 2005, at 7:58 p.m.:
Kim -- That's the plan. I'll update this entry when I've done so.
Posted by Bruce Pleat on May 16, 2005, at 10:23 p.m.:
I don't know if this'll help all the budding transit system mappers out there, but there's a really useful program for PDAs that uses transit system data from over 300 cities around the world. It's called Métro. Check out http://nanika.net/Metro/index.html for more info. Works on Palm, PocketPC, Symbian, and more.
Maybe there's some way to cross-link the data to save everyone lots of trouble?
Posted by Ethan Zlomke on May 17, 2005, at 3:46 p.m.:
There's a history of the London underground at:
http://www.tfl.gov.uk/tube/maps/realunderground/realunderground.html
It's a flash movie that shows their 1933 map, the 2004 map, and a "geographical" map. The man who redrew the underground map apparently based it on circuit diagrams to make it easier to read and that's most likely why it's so hard to line up transit maps with geographical reality.
Posted by anonymous on May 18, 2005, at 5:21 p.m.:
i cannot get it to work! it sounds great, dangit!
Posted by Mark on May 20, 2005, at 12:58 a.m.:
Hi all,
Check this
http://www.isi.edu/~yaoyichi/map_imagery_conflation.html
automatic alignment, can someone do this on the google map?
Mark
Posted by anonymous on May 20, 2005, at 6:42 a.m.:
DAMN!!!! this is just what i;ve been thinking about for the nyc subway system. you've done a stellar job with this!
Posted by byron on May 23, 2005, at 9:53 p.m.:
Here's a link to a more geographically correct NYC subway map, in case anyone is attempting something similar for NYC.
http://nycsubway.org/maps/spui/
Posted by payton on May 24, 2005, at 6:33 a.m.:
The CTA rail system is on the City of Chicago's GIS-ed maps: maps.cityofchicago.org. Also, Chicago CartoGraphics (who does the CTA map) would probably have been happy to have given access to the map overlay files--which might have saved some time.
.pc
Posted by Adrian on May 24, 2005, at 7:56 a.m.:
Thanks for the heads up, Payton! I'd seen that Chicago GIS page before but hadn't explored it in depth. Very interesting...
Posted by Transit Planner/GIS Maryland on June 1, 2005, at 5:59 p.m.:
How do you download the maps - I tried and was not able to right-click on the map to bring the save as... context menu. I also printed using adobe distiller, but the images come out grainy and subsequent images come out shaped differently.
Posted by Matt on June 10, 2005, at 1:46 p.m.:
Amazing...When I get my head round it I am going to give it a go myself...
You are one clever chap.
Posted by Brian on June 20, 2005, at 11:51 p.m.:
Doesn't work for me. I see the link for CTA maps, but when I click it nothing happens. It turns back to show me that it knows i clicked it, but the map itself doesnt' change. I can however view the satellite maps. Hmmm...
Posted by Adrian on June 21, 2005, at 12:51 a.m.:
A couple of days ago, Google changed some of its map code, and that broke the CTA map view. I haven't had time to fix it.
Posted by anonymous on June 24, 2005, at 5:35 p.m.:
Please do. This is incredibly useful...pretty much the reason I installed Greasemonkey.
Posted by Will on June 28, 2005, at 5:34 p.m.:
if you or someone else will rewrite the map code and are willing to comment it up with some instructions on how to match and name the overlay parts for each google map part - I will custom illustrate the subway maps for NYC.
email me at: wjames5 (at) nyc.rr.com
Posted by cj on July 11, 2005, at 9:15 p.m.:
i will try to do this in NYC!
Posted by Will on July 11, 2005, at 10:47 p.m.:
The NYC map is now LAUNCHED!
Here: http://www.onnyturf.com/subwaymap.html
only two zoom levels right now, but upgrades coming fast this week!
Posted by John on July 15, 2005, at 5:06 p.m.:
Doesn't work on my machine at all...I have Firefox 1.0.5 and GreaseMonkey 0.3.3. The CTA link doesn't even show up.
Posted by insomni on July 21, 2005, at 11:01 p.m.:
I also can't get it to work, using either the extension or the Greasemonkey script. I'm using Firefox 1.0.5, GM 0.3.5.
Posted by Chicago girl on July 27, 2005, at 2:48 a.m.:
"Posted by Adrian on June 20 at 6:52 PM ET:
A couple of days ago, Google changed some of its map code, and that broke the CTA map view. I haven't had time to fix it."
Just a note to say that there are people out here interested in this fix! A great idea. Hope you have time, soon.
Posted by anonymous on July 27, 2005, at 4:54 p.m.:
What about the potential for mapping multi-layered data on a smaller scale? We have challenges with patients navigating our hospital campuses. Getting to the campus is just the first step. Trying to find the Dr office, or outpatient registration, etc. is very challenging.
Maybe tie it into a GIS "geiger counter" that beeps from a phone telling them if they are going closer or further from a target location.
I saw google went down to a 40 yard increment on it's scale. Not even multilayered, but a what about just having a person use a PDA / google to locate a department? Is it do-able? I'm assuming the departments can all be plotted with GIS coordinates and somehow used.
Posted by fred on August 5, 2005, at 6:43 a.m.:
Please please please fix this to work with new googlemaps. This is one of the most useful scripts I've ever had.
Posted by Englebert on August 5, 2005, at 9:21 p.m.:
Adrian,
I am going to work on a new version of CTA Maps for Google maps. Could you send me the PSD for the CTA maps to my e-mail address? It is goodoffers@gmail.com. Thanks!
-Englebert.
Posted by seagull98 on August 18, 2005, at 3:30 a.m.:
Very similar for New Jersey Transit system at
http://trainsnj.com
NJ (New Jersey) transit map and driving directions to NJ transit train stations using Google maps.
Posted by david on August 24, 2005, at 2:43 a.m.:
I just discovered this and wish I had seen it before the new Google Maps came out. It's kind of ridiculous, but can you e-mail me when you release a new version? I desperately need this tool!
-David
davidrubenstein AT gmail.com
Posted by Michael Ho on August 27, 2005, at 8:30 p.m.:
a more accurate website for the NYC subway. I'm working on creating a faster and more accurate heuristic, but it works pretty well at the moment.
Posted by Tim on August 29, 2005, at 7:47 p.m.:
Philadelphia's SEPTA rail system google-mapped.
Posted by mrr on September 8, 2005, at 10:03 p.m.:
For some reason, I'm only getting the hybrid option, not the CTA option...anyone have any ideas why? Thanks!
Posted by beef on September 10, 2005, at 4:04 a.m.:
I wish I knew how to code this, cause I'd get it working. But, is anybody working on updating it?
Posted by David on September 10, 2005, at 11:03 p.m.:
The Vancouver map is LAUNCHED!
Vancouver transit map google-mapped.
Other maps will be soon on line.
Posted by siddharth on September 19, 2005, at 12:22 p.m.:
I am not familiar with the maps api but i wonder if there is an alternative if not easier way of doing this.
what if i take a bus/train route search for driving directions between 2 consecutive stops on the route.
google maps draws a highlite on this path.
If the 2 consecutive points are close enough u could get the entire path
It is not good as the method mentioned above, but i am not good with photoshop ;)
Posted by Steven Vance on September 26, 2005, at 7:39 a.m.:
Here is a separate website with CTA maps overlayed on Google maps: http://www.tastypopsicle.com/maps/cta.asp
Posted by anonymous on October 5, 2005, at 12:32 a.m.:
thank you
Posted by William on October 14, 2005, at 9:44 p.m.:
The Charlottetown Map is LAUCHED !
Charlottetown Transit Map google mapped.
Posted by Aaron on October 27, 2005, at 1 a.m.:
I did the same thing with my cities transit maps and google earth. Just imported a .tiff (I wanted trasparency so only the roads and route info showed on top of the satellite images). I moved it to align with the map and then scaled it as well. It fits great.
Posted by christine on October 28, 2005, at 1:20 a.m.:
so, for those of us who don't know a thing about coding or writing scripts and barely understand what greasemonkey is...
can you elaborate?
i'm planning to start with raleigh's CAT system, then include TTA routes, and maybe systems from the suburbs over christmas break, and i'm with ya right up until step 5
but like pat early in your comments, i'm wanting to do it more like the craigslist housing.
ideally, users could type in a street address, and the mashup would show what, if any, bus lines serve the area.
Posted by Todd on October 30, 2005, at 10:23 p.m.:
Adrian,
Still waiting on your fix! What's holding you up? ;-)
By the way, this site was referenced in a New York Times article, which is how I got here in the first place. I will keep coming back until you post the fix.
Todd
Posted by Matt on October 31, 2005, at 7:05 a.m.:
This is such a great extension! I'm really excited to use it when you fix it up. Thanks so much!
Posted by highcontrast on November 3, 2005, at 8:49 p.m.:
the link wont show up for me!
Posted by Steve on December 1, 2005, at 7:27 a.m.:
Any chance you'll be eventually redoing this using one of the polylines tools from some API or something, so that one doesn't have to use firefox and an extension to view it?
I'd love to see a cross browser version of this...
Posted by John on December 2, 2005, at 11:45 p.m.:
Ed Knittel has done something very similar to this (Chicago Transit Authority and Google Maps) that works in other browsers as well as Firefox.
Posted by noddables on March 4, 2006, at 5:43 p.m.:
i tried to install this extension, but apparently it's not compatible with the latest version of firefox, which is 1.5.0.1. do you plan to update it?
also, are you/your extension on the firefox extensions page (https://addons.mozilla.org/extensions)? i searched and couldn't find you. this looks like a really useful extension. assuming it is, you ought to be listed on this page so more firefox users living in/moving to/visiting chicago can find you.
Posted by anonymous on March 10, 2006, at 1:34 a.m.:
I'm with noddables here. Sounds like a bad a$$ extension. If you have time a 1.5.0.1 version would be cool!
Posted by yani1shu on April 4, 2006, at 5:29 p.m.:
How come i can't get the button to show up. i installed the extension and restarted firefox. using v. 1.0.7
Posted by jfinlayson on April 4, 2006, at 10:44 p.m.:
> How come i can't get the button to show up. i installed the extension and restarted firefox. using v. 1.0.7
Because a change in Google Maps broke it. That was 10 months ago, so at this point I wouldn't count on it ever being fixed. If Mr. Holvaty was sufficiently motivated to fix it, I think he would have done it a long time ago. Creation is fun and a reward in itself. Maintenance is a job. I suspect he will continue to move on to more interesting work.
Posted by bgkennedy2000 on May 14, 2006, at 6:42 p.m.:
I just downloaded firefox. Admittedly, I don't know what I'm doing, but firefox told me that your map isn't compatible w/ the newest version. What can I do?
I really, really, want to get that CTA map.
Posted by Thibaud on June 28, 2006, at 1:50 p.m.:
Didn't work for Firefox 1.5.0.4. It says: "sorry dude, this was designed for Firefox 0.9 or 1.0."
Posted by Wong on June 29, 2006, at 5:33 p.m.:
"Didn't work for Firefox 1.5.0.4. It says: "sorry dude, this was designed for Firefox 0.9 or 1.0."
I heard that a team are working at this project right now.
Posted by Spencer Thayer on August 1, 2006, at 8:34 p.m.:
Will you be updating this for Firefox 1.5!? Please do because this is an amazing fucking idea. Since this wont work for my browser I can't see it, but I am curious will this include the new Pink line?
Posted by Bela on August 15, 2006, at 8:19 p.m.:
Agreement with Spencer. I can't open this with my Firefox 1.5, but it looks like an amazing idea. This is exactly what I searched for, but unfortunately, I can't open it.
Comments have been turned off for this page.