CTA transit map

Lots of people have them. I like mine. Check it out.

How I did this:

  • Installed PostgreSQL and PostGIS
  • Tried to load data from the City of Chicago Maps SHP file.
  • Discovered the City uses a weird, us-ft based projection. Installed proj4 to reproject data.
  • Reinstalled postgis to get proj4 support.
  • Realized that doing reprojection inline was crazy, and I couldn’t figure out the right incantation anyway. Installed gdal, which includes a tool called ogr2ogr.
  • Recreated my map database schema with ogr2ogr with the following incantation: ogr2ogr -f PostgreSQL -t_srs EPSG:4326 PG:dbname=maps srcdir. Explanation: -f PostgreSQL specifies output format; -t_srs EPSG:4326 says to translate coordinates from the input spec (which it can read from the .PRJ file) to the standard EPSG mapping #4326 which is mercator lat/long; srcdir contains the unzipped SHP/PRJ/DBF files.
  • Wrote a python script that outputs javascript to create routes and points for lines and stations.
  • Added a zoomlevel field to the stations, a relative ranking of importance/crowdedness, added support for that to the javascript. Once you get to zoom level 4 (two levels in from the starting level) all stations are visible. As you zoom out you see only major stations, then only endpoints, then the airports and Clark/Lake, then just Clark/Lake.

Note that this does not query the database in realtime, once the page is loaded everything is client side. The database is only used for semi-permanent storage of custom markers like zoomlevel and as a reasonably easy way of accessing the data (I’m better with postgres data APIs than I am with csv or parsing shpfiles or whatever).

This entry was posted in tech. Bookmark the permalink.

12 Responses to CTA transit map

  1. John Garcia says:

    Cool work! Which reminds me I have to hack this google map API. Thanks for the instrcutions.

  2. Anonymous Commuter says:

    this is incredibly cool – you, sir, are a prince among coders.

  3. dbt says:

    FYI: I wouldn’t reuse my GIS data from the javascript src. It’s been flattened in spots, and excessively so in a few spots.

    Round two — Bus maps — is going to be much harder.

  4. Jeremy says:

    Very nice. One problem… there’s no way to pinpoint where you’re trying to get to. Any way to add search capabilities?

    Google maps really needs to add bike paths and public transport (at least trains) to their base site.

  5. Ed Knittel says:

    Looks good. I did a CTA map months ago – http://www.tastypopsicle.com/maps/cta.asp. When I did mine I had no idea that the CTA has all of the points for their track plotted out already. I unfortunately had to use a lot of time plotting individual points around the track by hand. Good job on the Blue and Green lines. Where they split is a doosey because, as you saw, you actually have to treat those as separate lines. Otherwise, Google tries to pplt the end points together.

    I’d love to see you points that you were able to convert from the CTA to see how close I was able to get to it.

  6. dbt says:

    If you view source you can see my line data, it’s packaged in its own javascript file. I like your map quite a bit, Ed, in fact that’s where I got the idea to use circles for stations instead of the stock google red markers. :)

  7. Ed Knittel says:

    Ahhhh! I see. What I enjoy is how we approached the same idea, but if you look at the implementation (ie. the javascript and XML) we came up with 2 completely different methods (arrays vs separate “points”).

    Oh, and the circles “just work”. I used the markers at first and it looked terrible. Someone on the Google Maps discussion group said I should try circles for stations and it does make the whole map more attractive.

  8. Chris says:

    I’d like to add this site to my list of Chicago-area Googlemaps, if that’s possible. Would it be ok to post a link on my site to your map?


  9. dbt says:

    Chris, that’s fine .. where is that site, out of curiosity?

  10. yaniv says:

    Is it possible to download this app as an extension in Google Earth?

  11. dbt says:

    The El lines are already available in google earth, no separate kml file necessary.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>