Tag: TileMill

How Chicagoans commute map: An interview with the cartographer

January 24, 2014 / / 0 Comments
Chicago Commute Map by Transitized

A screenshot of the map showing Lakeview and the Brown, Red, Purple and Purple Line Express stations.

Shaun Jacobsen blogs at Transitized.com and yesterday published the How Chicagoans Commute map. I emailed him to get some more insight on why he made it, how, and what insights it tells about Chicago and transit. The map color-symbolizes census tracts based on the simple majority commuting transportation mode.

What got you started on it?

It was your post about the Census data and breaking it down by ZIP code to show people how many homes have cars. I’ve used that method a few times. The method of looking up each case each time it came up took too long, so this kind of puts it in one place.

What story did you want to tell?

I wanted to demonstrate that many households in the city don’t have any cars at all, and these residents need to be planned for as well. What I really liked was how the north side transit lines stuck out. Those clearly have an impact on how people commute, but I wonder what the cause is. Are the Red and Brown Lines really good lines (in people’s opinions) so they take them, or are people deciding to live closer to the lines because they want to use it (because they work downtown, for example)?

The reason I decided to post the map on Thursday was because while I was writing the story about a proposed development in Uptown and I wanted  information on how many people had cars around that development. As the map shows, almost all of Uptown is transit-commuting, and a lot of us don’t even own any cars.

What data and tools did you use?

I first used the Chicago Data Portal to grab the census tract boundaries. Then I grabbed all of the census data for B08141 (“means of transportation to work by number of vehicles available”) and DP04 (“selected housing characteristics”) for each tract and combined it using the tract ID and Excel’s VLOOKUP formula.

Read the rest of this interview on Web Map Academy.

OpenStreetMap editing and two Chicago events in April

March 29, 2013 / / 14 Comments

A mapping party! Photo by MapBox. 

I use OpenStreetMap (OSM) heavily since I learned how to edit the map. OSM is the Wikipedia of worldwide mapping: it allows anyone to edit and contribute and allows anyone to copy and extract the data.

I edit places that lack information, fix mistakes (like how roads are drawn, or typos), and add new places. This work is important to my app because what is shown on OpenStreetMap is what appears in my iOS app, the Chicago Bike Map app.

The Chicago Bike Map app map tiles currently look like the above screenshot. Before releasing the next version I will download the latest version of “planet”, which has 100% of buildings now, thanks to Ian Dees. 

When I locate a place that needs more detail and I want to add it, I open JOSM.app and then, on the OpenStreetMap.org website, I click “Edit>Edit with Remote Control”. JOSM pans over to that spot and downloads all of the OSM data. It works very much like a GIS application and AutoCAD: it has points and polygons that you can move or resize. When you’re done adding features or editing the geometry or metadata of existing ones, click “Upload data”, add a message summarizing the changes you made, and hit the “Upload” button.

Screencast showing how I locate places to which to add detail and then add them with JOSM.

Your changes will be integrated in the OSM database almost immediately. The changes will appear on the live OpenStreetMap.org map tiles in minutes. The “extract services”, which take the data out and send to you as a compressed file or even ESRI shapefile, will read the “planet” file (complete OSM database) soon; some update nightly while others update weekly.

Here are the extract services I use (each one for different reasons):

  • BBBike.org – nightly; allows you to select any area with a self-drawn polygon; exports in ESRI shapefile and other formats; extracts take 15-30 minutes.
  • Michal Migurski’s Metro Extracts – monthly; has ~100 cities pre-extracted; this is now hosted on Smart Chicago Collaborative’s resources alongside my Crash Browser.
  • GEOFABRIK – nightly; all continents, many countries and all fifty states are pre-extracted;

Events!

These are copied straight from the Smart Chicago Collaborative website. I will be at the Map-a-Thon. I’m still thinking about the Hackathon. While I can’t program in the languages required, I can write decent documentation.

OpenStreetMap Map-a-Thon

Beginning mappers are invited to be a part of a national OpenStreetMap Map-a-thon by learning how to use our tools to improve the map in your area. You can add your favorite restaurant or comic book store, a local school or hospital. During the map-a-thon we’ll walk you through the process of finding your area, creating an account, and making your first edit. With that foundation, you can go on to make an impact by adding tons of information relevant to you and your community!

Attend the Map-a-thon April 20th and 21st at 1871 on the 12th floor of the Merchandise Mart, 222 Merchandise Mart Plaza from 12 PM to 6 PM. Participants will enjoy food and drinks thanks to Smart Chicago Collaborative.

For more information about the map-a-thon and to RSVP, please visit the Meetup page for the event.

OpenStreetMap Hack Weekend

If you know your way around a compiler, feel comfortable with JSON and XML, or know the difference between an ellipsoid and a geoid, then the Hack Weekend is for you. We’re looking for those with technical know-how to help make a difference in OpenStreetMap’s core software by writing patches and new software to help make mapping faster and easier. Special thanks to Knight-Mozilla OpenNews for their support and sponsorship.

The hack weekend will be held April 27th and 28th at 1871 from 9 AM to dinner time each day.

For more information about the hack weekend, please visit the OSM wiki page for the event. Two MapBox staffers will be here. MapBox is awesome; they make TileMill which makes my iOS app possible.

Get out of Googleville: my presentation on web mapping

February 18, 2013 / / 0 Comments

Alternate headlines: Google Maps versus OpenStreetMap; why OpenStreetMap is better than Google Maps

I presented to the Chicago GIS Network Meetup group on February 5,2013, about alternatives to Google when it comes to mapping on the web. I created the presentation and outline a couple hours before giving it and came up with this slideshow with three frames.

Googleville 1 of 3

Google Maps and its data is a one-way street (or many one-way streets). Google will take data but won’t give it back.

Googleville 2 of 3

Google Maps has all of these features, but they’re easier to manipulate when you use an alternative. Alternatives like: MapBox, TileMill, OpenLayers, OpenStreetMap (made easy with JOSM), GeoCommons – I’m sure there are plenty more.

Googleville 3 of 3

OpenStreetMap is the Wikipedia of online mapping and geographic data. Considering switching to OSM.

Free high resolution maps of Chicago on which to draw

November 28, 2012 / / 0 Comments

For a Grid Chicago article I was writing, I wanted to draw on a map to demonstrate to readers where people were commuting and not commuting. I wanted the map to show CTA lines. I didn’t want to use a Google Maps screenshot because it would have been low resolution, and I didn’t think the styling would be appropriate.

I opened up TileMill and whipped up my own maps! I already had the base layers set up for the Chicago Bike Map app, so I duplicated that project and then added the Chicago Transit Authority and Metra train lines with data and styles prepared by OpenPlans (created for its Chicago bike sharing Shareabouts installation; download the data and styles here). Highways, the most common geographic reference point in cities, are also included on the map.

Data comes from OpenStreetMap contributors and the styling is OSM-Bright.

Go grab them on Flickr. Use them as needed but please provide attribution to “Steven Vance, OpenPlans, and OpenStreetMap contributors”.

Chicago map, with Metra

Chicago map, with CTA

Chicago map, with CTA and Metra

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