Category: Transportation

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

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).

Some reasons why the CTA doesn’t make its own mobile apps

Where’s the train?

“Twitter updated their app and now it sucks”. (Here’s some evidence.)

Have you heard that before? Thankfully there are tens – perhaps hundreds – more options to post to and read Twitter on your appy device.

The Chicago Transit Authority provides 1.7 million rides per day. A lot of passengers like to know where the trains and buses are. And it’s possible to know with many tools like Bus Tracker and Train Tracker, both of which are available through APIs, SMS, and websites.

Some people (eh, I can’t exactly point out who right now) have noted (complained?) that the CTA doesn’t make its own app for smartphones and tablets. I’m glad they don’t!

Here are more reasons why the CTA doesn’t make its own mobile apps:

  1. It would be racist of the CTA. (Pretty much everything the CTA does is racist according to someone but making an app would only be useful to those with compatible devices, so it’s probably more accurate to say income discrimination.)
  2. Bus service is getting cut but they’re spending money on making apps.
  3. There are 4 platforms to write apps for (at least 4 – not sure if any CTA passengers would demand Symbian or webOS).

The best reason?

Developers can do it better. So the CTA gives them the tools.

Skateboarding on State Street with his son

This is a somewhat efficient mode of transport. I believe the operator would become exhausted faster when carrying an additional person on a wheeled device that probably has a lot of friction. Anyway, it’s cool to see a family having fun, and to see that moving two people about doesn’t require much space.

Urban Street Window Works

Urban Street Window Works

Read about the new Bucktown bike based business Urban Street Window Works on Grid Chicago. They wash windows, remove graffiti, and apply film to protect from acid etching.

Is there a member of the ITE who will stand up against bad road designs?

Sharing the road is one place to start. Why should one on a two-wheeled, muscle-powered device pedal along side a garbage truck with blind spots? Wait, why does an automobile even have blind spots? This enormous right-turn lane is one example of “dangerous by design”. 

Update October 5, 2012: For a great example on why I cannot – and why you should not – support bad road designs is this story of a fatal bike crash on a major biking “commuterway” in Chicago. We must stop building narrow bike lanes to the left of parked cars and we can be done with this type of crash for good.

The infrastructure as we have it in Chicago and many other American cities cannot support any increases in bicycling. The operation and design of our infrastructure creates a finite limit for the number of people who will bicycle on it. I’m not talking about how many people can use it, but how many people want to use it.

We’ve seen infinitesimal growth in the bicycle’s mode share for commuting to work, so small that the growth might not actually be growth at all because all the reported increases are within the range of error (the Census Bureau being the collector and distributor of the data). Our infrastructure is not safe, and that is what inhibits an increase in bicycling riders and trips that the City of Chicago, its mayor, its council, its officially adopted plans, and its people, desire. Until our roads are made safe, the cycle growth will remain minuscule or non-existent. The only other significant factor in promoting cycling is high gasoline prices, but even as they remain high, the cycle growth (or spike, seen in 2008) hasn’t returned.

It’s a small group of people who are designing and maintaining our roads. And they are the first group of people we listen to when we say we want safe roads. Instead of the people who’ve actually built safe roads.

The ITE is the Institute of Transportation Engineers, and, like many organizations, has a code of ethics. In their Canons of Ethics document (.pdf), there are at least two sections that require members to stand against bad road designs.

Section 1: The member will have due regard for the safety, health and welfare of the public in the performance of professional duties.

Section 11: The member will guard against conditions that are dangerous or threatening to life, limb, or property on work for which the member is responsible, or, if not responsible, will promptly call such conditions to the attention of those who are responsible.

A study in Portland, Oregon, found that 60% of residents wanted to bike, but had concerns about safety.

These residents are curious about bicycling. They are hearing messages from a wide variety of sources about how easy it is to ride a bicycle in Portland, about how bicycling is booming in the city, about “bicycle culture” in Portland, about Portland being a “bicycle-friendly” city, and about the need for people to lead more active lives. They like riding a bicycle, remembering back to their youths, or to the ride they took last summer on the Springwater, or in the BridgePedal, or at Sun River, and they would like to ride more. But, they are afraid to ride. They don’t like the cars speeding down their streets. They get nervous thinking about what would happen to them on a bicycle when a driver runs a red light, or guns their cars around them, or passes too closely and too fast.

American roads are dangerous by design. It’s time to fire the people who design them that way.

Year after year, roads in Chicago are ripped up, repaved, and restriped in exactly the same way that existed before. Miles of missed opportunities for safer roads. This essay says nothing of the lack of police enforcement of traffic rules, for which there is little empirical evidence. The essay may be updated from time to time, but I won’t be noting each change.

An example of a better design: the buses and bikes don’t mix, and automobiles turning left cannot be passed by through-automobiles. Bicyclists are safer.