Category: Information

How I created a map of Illinois Amtrak routes in TileMill in less than 30 minutes

October 22, 2012 / / 2 Comments

This interactive map was created for a Grid Chicago article to show the cities and Amtrak routes mentioned. Click and drag it around or hover your mouse on the red train station markers. 

Want to create a map like that and publish it on your own website? It’s easy. I’ll show you how to do it in less than 30 minutes. First, download the following files:

All shapefiles are from the United States Department of Transportation, Bureau of Transportation Statistics’s National Transportation Atlas 2012 edition except for Illinois places, which comes from the Census Bureau’s TIGER project.

At the end of this tutorial, you’ll have a good introduction on how to find geographic data, build a map with TileMill, style the map, and publish it for the public. Your map will not look like mine as this tutorial doesn’t describe how to add labels or use the hover/info feature.

Tutorial to make Amtrak Illinois map

  1. Unzip the four ZIP files you downloaded and move their contents into a folder, like /Documents/GIS/Amtrak Illinois/shapefiles. This is your project folder.
  2. Install TileMill and open it.
  3. Set up a project. In the Projects pane, click “New Project”. In the filename field, title it “amtrak_illinois”. Ensure that the checkbox next to “Default data” is checked – this shows a world map and helps you get your bearings (but it’s not absolutely necessary).
  4. Get familiar with TileMill’s layout. Your new project will open with the map on the left side and your Carto style code on the right side. There are four buttons aligning the left edge of your map. From top to bottom they are: Templates, Font list, Carto guide, and Layers.
  5. Add a layer. We’re going to add the four shapefile layers you downloaded. Click the “Layers” button and then click “Add layer”. In the ID field, type in “amtrak_routes”. For Datasource, browse to your project folder and find “amtrak.shp” – this file has the Amtrak route lines. Then click “Done”. Click “Save & Style”.
  6. Style that layer. When you click “Save & Style” after adding a layer, your attention will be called to the Carto style code on the right side of TileMill. A section of code with the “amtrak_routes” #selector will have been inserted with some default colors and styles. If you know CSS, you will be familiar with how to change the Amtrak routes line styles. Change the “line-color” to “#000”. After “line-color”, add a new line and insert “line-opacity: 0.5;”. This will add some transparency to the line. Press the “Save” button above the code.
  7. Add remaining layers. Repeat Step 5 and add 3 more layers: “amtrk_sta.shp” (ID field: “amtrak_stations”), “state.shp” (ID field: “states”), and “tl_2012_17_place.shp” (ID field: “illinois_cities”).
  8. Hide bus stations. The Amtrak stations layer shows bus and ferry stations as part of Amtrak’s Thruway connections. You probably don’t want to show these. In your Carto style code, rename the #selector from “#amtrak_stations” to “#amtrak_stations[STNTYPE=’RAIL’]”. That makes the following style code only apply to stations with the “rail” type. Since there’s no style definition for things that aren’t of that type, they won’t appear.

Screenshot of my map.

Prepare your map for uploading

TileMill has many exporting options. You can save it as MBTiles and publish the map for free using MapBox (TileMill’s parent), or you can export it as image files (but it won’t be interactive), or you can display the map using the Leaflet JavaScript map library (which I use for the Chicago Bike Map app). This tutorial will explain how to export MBTiles and upload to MapBox, the server I’m using to display the map at the top of this page.

  1. Change project settings. To upload to MapBox, you’ll have to export your project as MBTiles, a proprietary format. Click the “Export” button above your Carto style code and click “MBTiles”. You’ll be asked to provide a name, description, attribution, and version. Input appropriate text for all but version.
  2. Adjust the zoom levels. Adjust the number of zoom levels you want (the more you have the longer it takes to export and upload your project, and you might exceed MapBox’s free 50 MB account limit). My map has zoom levels 8-11.
  3. Adjust the bounds. You’ll then want to draw your bounds: how much of the map’s geographic extents you want to export. Zoom to a level where you can see the entire state of Illinois in your map. Hold down the Shift key and drag a box around the state, plus a buffer (so viewers don’t fall of your map when they pan to the edges).
  4. Export your map. Click Export and watch the progress! On a four-year-old MacBook it took less than one minute to export the project.
  5. Bring the export to your project folder. When export finishes, click the “Save” button and browse to your project folder. Click the file browser’s save button.
  6. Upload to MapBox. Login to MapBox’s website and click “Upload Layer”. Browse to your project folder, select the .mbtiles folder, and click “Upload file”. Upon a successful upload, your map will display.
  7. Embed it in your website. Click the “Share” button in the upper left corner of your map and copy the embed code. Paste this into the HTML source code of a webpage (or in a WordPress post) and save that (I’m not going to provide instructions on how to do that).

Now you know how to find geographic data, build a custom map using the TileMill application, begin to understand how to style it, and embed your map for the public on a website or blog.

N.B. I was originally going to use QGIS to build a map and then publish a static image before I realized that TileMill + MapBox (the website) can build a map but publish an interactive feature instead of a static image. I’m happy I went that route. However, I did use QGIS to verify the data and even create a new shapefile of just a few of the key train stations on the Lincoln Service (the centerpiece of my Grid Chicago article).

The new term for #robotcar journalism is COWARDD

October 20, 2012 / / 0 Comments

#robotcar: A journalistic writing style that anthropomorphizes automobiles or hides the fact that a human was operating an automobile involved in a crash.

The new term:
COWARDD, or (C)hoosing (O)bscuring (W)ords (A)bsolves (R)esponsibility of (D)eadly (D)riving.

Thank you to Gary Kavanagh for devising it.

For examples of #robotcar, see these articles on Grid Chicago.

Be your own traffic and road planner

October 16, 2012 / / 0 Comments

Wanna know how many cars were measured to pass by on a street near you (in Chicago)?

Want to know how wide a street is?
Want to do this without leaving your house?

You can.

1. Find the “ADT” (average daily traffic) for roads in Chicago on the city’s Traffic Tracker website. Average is a misnomer, though, because that implies more than one count has been taken or estimate has been made. The last time the city counted cars in Chicago was 2006; I imagine the difference in counts taken this year would be statistically significant (meaning any differences would not be by chance or random).

To find a location in Traffic Tracker:

  1. You can pan and zoom the map until you find it, or you can select one street and then select an intersection street and click the magnifying glass.
  2. Then click the checkbox next to Traffic Signals.
  3. Click on a green dot (with number label) to find direction counts and the count date.

Okay, now let’s measure the street width.

Google Earth and Maps have this tool. For Google Earth, it’s as simple as finding the ruler tool in the toolbar, selecting your units, and then clicking on the start and end points. The distance will also be displayed live as you move your cursor.

Finding the distance in Google Maps has a few more steps:

  1. Turn on the measurement tool, in Maps Labs. Go to Google Maps and click “Maps Labs” at the bottom of the left pane.
  2. In the popup dialog pane, click the radio button next to “Enable” for Distance Measurement Tool.
  3. Click Save Changes.
  4. Find the street you want to measure.
  5. Click the ruler button in the lower left corner of the map.
  6. Click one side of the street and then click the other side of the street. You can keep clicking to get distances of a polyline (a multi-segmented line) that you draw.
  7. Change the map units to your desire (there are tens of archaic ones available).

Now you’ve got two more tools with which to arm yourself in understanding your streets and your neighborhood.

Stolen Bike Registry data: Which train stations have the most bike theft?

September 28, 2012 / / 0 Comments

If you can help it, don’t park your bike on the sidewalk under the tracks at the Clybourn Metra Station. Too many opportunities for theft here. 

The Stolen Bike Registry is a website created by Chicagoans for people to notify the community that their bike has been stolen. I make no claims to the accuracy or completeness (or anything) about this list or the dataset from which it was created. Because of less than optimal data collection practices, and a diversity of website users, the location information is difficult to comb through and present. I’ve used Google Refine to clean up some of the location data so that I can pick out the theft locations that represent CTA or Metra stations.

This is a list of the most reported bike theft locations that are CTA or Metra stations, from about June 13, 2006, to April 2, 2011, representing 1,740 bike theft reports*. It’s not known how many bike thefts were reported to the police because they don’t know.

CTA (13 stations)

Logan Square Blue Line CTA 8
Rockwell Brown Line CTA 5
Addison Brown Line CTA 2
Fullerton Red/Brown Line CTA 2
Paulina Brown Line CTA 2
Western & Milwaukee (Blue Line) CTA 2
Western Brown Line CTA 2
Addison Blue Line CTA 1
Chicago Brown Line CTA 1
Damen Blue Line CTA 1
Ashland Orange Line CTA  1
Cumberland Blue Line CTA 1
Wellington Brown Line CTA 1

The new bike racks at Clybourn Metra station are in a more visible spot. Maybe there’s even a security camera pointed at them some of the time. 

Metra (24 stations)

Clybourn Metra 19
Ravenswood Metra 18
Edgebrook Metra 4
Evanston Main Street Metra 2
Forest Glen Metra 2
Healy Metra 2
Lake Cook Metra 2
Ogilvie Metra 2
57th Street Metra 1
College Avenue Metra Train Station 1
Corner of Maple & Church in downtown Evanston, near Metra 1
Glenview Metra Station 1
Harlem Metra Station Berwyn, IL 1
Irving Park Metra Stop 1
Jefferson Park Metra 1
LaSalle Street Metra 1
Mayfair Metra 1
Metra Station at Davis Street, Evanston 1
Morton Grove Metra Station 1
Prairie Crossing Metra Station 1
Rogers Park Metra 1
Union Station Metra 1
Western Metra Station 1
Wilmette Metra 1

* Reports come from around the world. 10 dates have been excluded because their dates were anomalous, empty, or not possible.

Updated September 30 to correct a Metra station and combine it with another.

The United States uses way too much text for regulatory traffic signs

September 19, 2012 / / 21 Comments

Look at these two signs in Berlin (right outside the American embassy). They’re universal across the European Union – and probably in adjacent non-EU countries. The upper one means “yield” and the lower one with the white arrow means “compulsory right turn”. In the United States, there are several signs that mean the same thing. The simplest one we have comes in two forms: symbol and text. That makes two different signs, but there’s a third one. It’s also a text sign but has extra words!

American symbol sign (actually a symbol with text): The sign has an arrow pointing in an upward curve toward the right and the word “only”. Photo by Joseph Dennis. 

Yet there is no need to mix a symbol and a word, as both parts of the message (“right turn” and “only maneuver you can make here”) can be communicated with symbols. In the EU, the right turn sign has two states, both depicted by symbols: off and on. Off meaning you cannot turn right there and is depicted with an arrow pointing right, on a white background, circumscribed with a red circle. The “on” version means you must turn right there and is depicted with an arrow pointing right, on a blue background. (It would be pointless to have a sign saying you can turn right somewhere.)

The next sign is the text-only version of the “right turn only” sign.

American text sign: The sign says “right turn only”. Photo by Michael Jantzen. 

And then there’s the most ridiculous one, “right lane must turn right”. In many places, Chicago included, bikes and buses are excepted.

A group of people protest the stupidity of this sign design. I mean, a bunch of Tea Partiers protest our socialist road system. Or something. Photo by Susan Adams. 

All of the signs depicted above mean the same thing! Why have we developed four unique ways to communicate a single meaning?

While I’m on the subject of right turns, here’re two signs in San Francisco, on Market Street at Octavia Boulevard. Octavia is the end of the Central Freeway, so people driving here are in the mindset of fast highway driving. Cars cannot be turned right here and bicyclists are warned to look out for people making illegal right turns. In other words, “Beware car drivers who break the law”.

Photo of “right turn prohibited” symbol sign and “[bikes] watch for prohibited right turns” text sign by Adam Fritzler.