March 10, 2011

TileMill Puts Web GIS on the Map

If you're anything like me, you love a good map graphic, particularly one that brings what would otherwise be dull and boring data to life. The technical term for tools that render statistics into visual form with maps are geographic information systems (GIS). Open source has a wealth of top-notch GIS tools like GRASS and gvSIG, but their power comes with a learning curve. TileMill is a new tool that bucks the trend, letting complete newcomers to GIS build slick looking static or interactive maps with minimal fuss.

TileMill technically runs as a Web app, but it is designed to be installed locally, on top of Apache and PostgreSQL, and accessed through Firefox. "Locally" specifically means that TileMill needs to access your locally-stored data files in order to paint them onto your map projects, and that (at present) the program has no concept of user accounts or authentication. The Web app interface stems from two of TileMill's open source underpinnings: the Mapnik map renderer (of OpenStreetMap fame), and the CSS-derived syntax used to mark up map elements.

With TileMill, you create your map by adding discrete data "layers" to a map template. Each layer can include point data, lines, polygonal shapes, or raster images, and you can stack and re-order them at will. How they appear is determined by CSS-like stylesheets, which you edit in a separate pane. Every layer automatically gets its own "ID," so you can set color and blending at its simplest by using one style rule per ID. But you can also define additional "classes" and further refine display characteristics, even building up conditional rules.

TileMill Editing

TileMill gets its simplicity in two ways. First, it offers only one type of map projection: Web Mercator, which is the widespread, standard 2-D projection used by most web-based mapping services. Second, it requires you to convert your input data into any of a handful of popular GIS formats, so it can make intelligent assumptions about important factors like the coordinate system used. As a result, you cannot do fancy transformations with TileMill, or create cartograms, but what you can do is render your data on a nice-looking map, control its presentation, and even export it to your choice of output formats.

To the Map Room!

To install TileMill, visit the project page and scroll down to the installation instructions. They list Ubuntu 10.10 as the supported distro, but the instructions are detailed enough that any other contemporary distribution should be able to follow them. The main steps are installing the rather lengthy list of prerequisite packages, then checking out the latest version of Mapnik and installing it. The TileMill code is hosted on GitHub, and the downloadable installer is actually the most difficult step in the entire process. Rather than a bulky binary package, it is an ndistro meta-installer, which fetches individual packages from GitHub over the network. It sounds nice in theory, but GitHub has a nasty habit of timing out and failing during these downloads, forcing you to start over from scratch. My advice is to start well after business hours are over.

Once you do get the packages installed, TileMill runs on localhost port 8889. The home screen helps you wrangle three components: your active map projects, your exported final products, and your data "libraries." Obviously most of your time is spent in the active map projects, but configuring data libraries is vital, too. Libraries can be either local directories or Amazon S3 storage, and they are not visible in the map editor until you add them in the library manager.

The map project editor has four panes: the map itself on the left, a list of the map's layers beneath it, a color-swatch and font-selector next to that, and the stylesheet editor, which takes up the right half of the page. The map always starts out with a global view, but as you edit you can zoom in (using the same zoom-factor numbering as found in Google Maps and OpenStreetMap, conveniently) and limit the scope of your final product. By default, the contents of this map are the #world layer, which shows up in both the layer list and the stylesheet editor with a sensible color scheme.TileMill Export

Adding your own data layers is where the action is. All you need to do is click the "+" button in the layer list, then give your new layer an ID and pick its source data from the file selector. As of today, TileMill can import ESRI shapefiles, KML (although not compressed KMZ), geoJSON, and geoTIFF data. The app does its best to recognize the spatial referencing system (SRS) string used in each, but there are some quirky limitations to the format support that can cause headaches when you first get started. For example, ESRI shapefiles actually include three files per data source ( a .shp, a .dbf, and a .shx), and TileMill expects to find them all together in a .zip archive). Similarly, TileMill supports KML files, but only for vector line data, not points or polygons. That can be frustrating if, like I did, you are forced to use online format converters (like GPSVisualizer and MyGeodata) to try and wrestle your data into a compatible format.

When the layer is loaded, you can let your artistic side take over. You can rearrange the layers just like you would in GIMP or another image editor, and TileMill automatically creates a stylesheet ID from your layer's name, so you can start theming it in the stylesheet editor immediately. The online manual refers to the stylesheet language as "MSS" for "map stylesheet;" it is essentially CSS syntax, but with a more limited set of options that deal exclusively with rendering the points, lines, polygons, and text labels on the map. The great thing is that the stylesheet editor has built-in syntax highlighting, line numbers, and a "Save" button that instantly applies your changes. Plus, there is a built-in language reference: clicking the book-shaped icon in the corner brings up a categorized guide with example code.

The color-swatch window pane automatically grabs every RGB hex-color you type in the editor and renders it as a button in the palette. That helps you work by keeping all of the colors together, and if you want to reuse any color, you can punch the button and it's MSS code will be inserted right into the editor at the cursor location.

If you're happy with your map, you can export it as a PNG image, a PDF, or as MBTiles, the SQLite-based format used for saving interactive Web maps offline. The export tool lets you resize and zoom in on the map to select exactly how much of the globe it shows, and the final dimensions of the output.

A Conspiracy of Cartographers

GIS heavy-hitters may not find TileMill terribly powerful, but for the rest of us, it is a great way to make good-looking maps with minimal time. I have only scratched the surface of MSS stylesheet's capabilities: you can add multiple stylesheets to your maps, nest style rules, and use classes to refine how your data is displayed. As a playground, it couldn't be easier.

For the moment, the weak link in TileMill's toolchain is probably its data import functions — they are amazing in their simplicity, but the format limitations make it impossible to debug problems. I started out exporting a list of Zip Codes from the Texas Linux Fest conference that I help with, thinking I could place them on a map to make a nice graphic. But despite multiple attempts at converting the CSV data into KML, ESRI, and GeoJSON, I could never quite get it into a form that TileMill liked — either that, or it failed to recognize the file in the data library browser — and there was no built-in or online help to consult. So for simplicity's sake, I eventually went with the multiple "starter" data sets that come bundled with TileMill to try out my MSS theming skills.

TileMill is still in constant development, so I'm sure import will only improve with time. Maybe with a little extra documentation, you can sidestep my import problems and get right to work. You certainly don't need to set aside a large chunk of time for designing the map itself: TileMill makes short work of that. I also hope real instal packages come along by the time of the next release; fetching code live from GitHub is too unpredictable and the current ndistro installer reports success even when fails to grab all of the files it needs. After all, what we all want to do is get straight to editing the maps — and TileMill actually makes that part fun.

Click Here!