Page 70 of 170

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.

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

October 10, 2012 / / 0 Comments

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

October 7, 2012 / / 0 Comments

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.