crazed monkey

As with my old subway map, the most difficult parts of creating the new map didn’t involve any programming. The hardest and most time-consuming part by far was cleaning the TTC ride guide and projecting it onto Google’s tiles. I made heavy use of Adobe Illustrator for this part, removing the unnecessary bits which Google’s maps already have (streets, street names, landmarks, etc.) and then scaling, rotating and moving the map around so that the routes matched their respective streets. Sure, that should have been relatively simple but it wasn’t. First, Illustrator’s selection tools leave much to be desired. Secondly, Illustrator is a pig. The 1MB PDF which is the TTC ride guide ballooned to over 30MB inside Illustrator, and oftentimes even the most minute transformations took tens of minutes to complete. Even after all that work, the lines don’t quite match up, especially on the city’s outskirts, but it’s good enough.

All this tedious work leaves me with a greater appreciation of the TTC ride guide. The PDF version of that document has been around for at least a decade, and yet a computer I purchased last year had trouble manipulating it. There’s no way the map could have been made manually; it has to be computer-generated.

In addition to being unwieldy on large files, Illustrator wouldn’t let me export the image for zoom level 2 of the map. Apparently it was too large to be saved to PNG. I had thought zoom level 3 would be enough but, as someone was quick to point out, that level isn’t enough as it doesn’t contain names for smaller streets. I’m currently trying to figure out a way around that, although it’s difficult as the image for zoom level 2 will be 13794 by 8192.

Through my work with the Toronto transit map I’ve created a few tools which others will find useful. The first is a simple script to download and collate the Google tiles for a given area into one large image. The second is a command-line tile cutter which uses free software and which has a few more features than the automatic tile cutter for Photoshop. I will be releasing those shortly.

Posted on November 13th, 2006 in transitmap, ttc - No Comments »

About a year ago I played around with the Google Maps API and created a map containing the TTC subway system. It wasn’t intended to be all that useful as the TTC’s own map contains much more information. Still, that didn’t stop my map from rising to the top of the Google rankings for TTC-related searches, resulting in hundreds of visits. A few people sent me emails and comments thanking me for making the map, and it even got a mention in the print version of the June 2006 issue of HUB. I didn’t see much reason for the fuss as the map could have been so much better.

For the past little while I’ve been working on an update, one which makes use of new features in the Google Maps API and which should prove to be even more useful than the TTC’s own system map. This map encompasses not only the subway system, but also the full TTC ride guide, including street car, bus, and train lines. Best of all, the map now has search capability as well as integration with the TTC subway rider efficiency guide. Enjoy.

Many will note, and will no doubt complain, that the map stops just west of the airport and just north of Steeles. I did this to limit the size of the map for bandwidth purposes, and because the lines further north and to the west diverge considerably from the streets on Google’s map. You will notice that even west of the airport the lines diverge. I would have stopped the map further east but felt that I needed to include the airport for the sake of completion. As for those north of Steeles and west of the airport, this is a Toronto transit map. Anything else is just gravy.

Posted on November 11th, 2006 in transitmap, ttc - 99 Comments »

I just spent a few minutes factoring out my TTC subway map Javascript code so that it can be called to insert the TTC subway into any Google Map:

<div id="map">
<script src="http://crazedmonkey.com/ttcgooglemap/ttcgooglemaps.js"
type="text/javascript"></script>
<script type="text/javascript">
<!--
    var map = new GMap( document.getElementById( "map" ) );
    map.addControl( new GSmallMapControl() );
    map.centerAndZoom( new GPoint( -79.386871, 43.660241 ), 4 );

    // Add your own markers and polylines here.

    drawTtcSubwayMap( map );
-->
</script>

There are two other additional functions, drawTtcSubwayMapColor() and writeTtcSubwayStations(), which can be used to specify the colors for the different subway lines and to display the colour-coded list in a div, respectively. I might add more helper methods later if there is a demand for them.

You can affect how the stations appear in the info pop-up by styling div elements of the station class.

Originally I had thought to limit access to my Javascript file to those who asked permission to use it. Doing so would make me aware of how people were using the map. For now, people are free to link the Javascript in their pages. All I ask is that you leave a comment on my weblog with a link to your page, and include the following HTML somewhere near the map:

<p>TTC station code and coordinates provided by
<a href="http://crazedmonkey.com/">Ian Stevens</a> and his
<a href="http://crazedmonkey.com/ttcgooglemap/">TTC Subway Google Map</a>.</p>

Linking, not copying, the script has its advantages, namely that any changes or additions that I make will propagate to your map. There are also a few known bugs, all of which have to do with Internet Explorer, that I hope to address soon.

Posted on July 29th, 2005 in programming, transitmap, ttc - 17 Comments »

To make stations on my TTC subway map easier to locate, I have added an alphabetical, clickable list of subway stations, colour-coded by subway line. Enjoy.

Posted on July 16th, 2005 in programming, transitmap, ttc - 11 Comments »

I spent a little time this weekend playing with the Google Maps API and creating an overlay of the TTC subway. Not surprisingly, creating the station markers and route lines was easy. The most difficult part, however, was obtaining a list of subway stations and their addresses in a text format for easy extraction.

Translating the subway station addresses into GPoint objects was a little difficult given that there appears to be no free geocoding service for Canadian addresses. However, Google Maps can work as a geocoder, albeit a somewhat slow one, sometimes taking several seconds to produce a result. If you have access to a Unix command-line, you can make use of the following script:

#!/bin/sh
wget -q -O- http://maps.google.com?q=\\
`echo $1 | tr " " "+"` | sed -n -e \\
"s/.*<point lat=\"\\([^\"]*\\)\" lng=\"\\([^\"]*\\)\".*/new GPoint( \\2, \\1 )/p"

If I have one beef with the API, it’s with the GIcon class and the requirement to set the icon shadow, the icon and shadow sizes and the anchor point. A shadow should not be required and image sizes can be inferred. However, the icon will not display if any of these properties are not set.

Update: I have since added a clickable list of subway stations to the map.

Update: Now any Google Map can contain the TTC subway map.

Posted on July 2nd, 2005 in programming, transitmap, ttc - 22 Comments »