by

Styling Maps with TileMill

Cat Café Cat Learning about Conscription Policy via OsmosisToday I want to introduce a nifty open source mapping software application, TileMill. TileMill is created by the developers of MapBox and is available for Mac, Windows, and Linux. MapBox is primarily a map hosting service that uses the crowdsourced OpenStreetMap data for its basic layers but makes customizing, styling, and hosting this data easy. Their most recent major customer is the popular social media location service foursquare, which has switched away from Google Maps to use the service. TileMill, however, brings MapBox to your desktop, allowing you to style map layers using a simple scripting language that closely resembles Cascading Style Sheets (CSS), the core technology behind the appearance of most websites today. Let us walk through a single fictional example of how one might use the application but since it really is targeting those who are comfortable using stylesheets, I’ll also assume you have some experience using CSS in building a website, which makes it relatively easy to get up and running with TileMill :

Professor Cha is teaching her popular course on “Coffee Culture in East Asian History and Society.” After a difficult lecture on “Coffee and Colonial Rule in the Japanese Empire” she revisits her notes for the far more fun lecture to follow, which jumps to the present day:

Brewed to Purrfection: Cat Cafés from Taiwan to Japan

Our Professor wants to create a map for her lecture slides which highlights an unusually large number of cat cafés throughout the countryside of eastern Taiwan. Google maps are too busy for her liking. She wants neither the topography of terrain view or the street view for her map. She has QGIS, which I introduced here two weeks ago, but that just seemed too complex for her simple mapping needs. WorldMap, which I introduced last week, might work but she decides to give the new TileMill application from MapBox a try.

Here is what she wants to show on her map:

1) Taiwan and its various administrative districts
2) markers for Taipei, Hsinchu, Taichung, Kaohsiung, and Hualien
3) she wants to color in the administrative districts of Hualien county, New Taipei City, Taipei City, and Taoyuan different shades according to their density of cat cafés.

She opens up TileMill and creates a new project, which just presents her with a world map divided into countries.

She deletes the styling for the #countries layer on the right, and saves, leaving nothing but a blue ocean. Next she clicks on the layers button in the bottom left, and adds a new layer, searches through the default layers offered by MapBox, and finds a layer that gives her what she needs:

natural-earth-1.3.0 / cultural / 10m-admin-1-states-provinces-shp.zip

The “attribute table” for this layer, that contains its raw data, contains useful info to isolate specific administrative districts. Now she needs to style this layer and add some cities. You can see the final result of this map style scripting here: style.mss but let us step through the process.

After adding the new layer, she decides to make the basic color for land sort of yellow, and the water a dark grey. She changes the background-color attribute in the “Map” class to the color code #889091 and the polygon-fill attribute for her layer of administrative units to #ddd5ae, both selected with help of a palette tool. She decides to risk the wrath of some of her students by making Taiwan a different color than China. To do this, she needs to color only the administrative districts in the new layer which has an ISO column labelled “TWN” (for Taiwan) which she discovered when she looked at the new layer’s attribute table. To do this she creates a separate style with an attribute selector that works very much like CSS, #10madmin1statesprovi[ISO="TWN"] and then assigns its polygon-fill to the subtly different shade #FFFFD4.

Now comes the colors for cat café distribution. If Professor Cha had a lot of data and wanted, for example, to show how many cat cafés there are in every province of Taiwan, it would be best for her to either add a column of information to the administrative boundaries layer with these statistics or create a separate layer with a table including the relevant data. This would also allow her to show a nice legend for the data and style it in more powerful ways. However, she just wants to color four districts or provinces and is going to skip a legend so she decides to just manually color the districts directly in the stylesheet. She can determine the polygon-fill for each of the districts with a selector like #10madmin1statesprovi[NAME_1='Taipei']. To come up with a good color scheme, she visits the Colorbrewer site and finds a nice color range.

Finally Professor Cha wants to add a few cities to her map. After reading this posting, she realizes that she can easily accomplish this by looking up the latitudes and longitudes of Taipei, Hsinchu, Taichung, Kaohsiung, and Hualien using this site, stick them in a spreadsheet, save it as a CSV file, and import the result into TileMill. In order to style the city markers, she poked about some more in the TileMill manual and on this page in order to learn how to format the city labels. Again, see the final text of the stylesheet here to see the style for the cities layer which appears on the map below.

With this, the new map was complete and all she had to do was to press the “Export” button for a nice clean map in PNG format to drag and drop into her Keynote or Powerpoint slides.

This is just an extremely simple example. If you try TileMill I encourage you to open some of the example projects and look through the stylesheets for a real indication of the power of this application. There are a lot of small frustrations I found along the way, but I think even novice web designers with at least a little CSS background out there will find it extremely easy to apply their skills to the world of styling maps in TileMill.

It looks like it is early days for this software. Has anyone found any particularly good sites, beyond the MapBox homepage itself that can help train beginners in map styling with TileMill? Do you think this deeply visually based map making software is a potentially good model for serving the needs of the cartographer inside of us all?

PS: I don’t actually have any idea what the distribution of cat cafés in Taiwan is. Thanks to Sayaka Chatani for use of her photo, taken at the Minimal Cafe (极简) in Taipei.

Return to Top