Yesterday I posted about our latest app, AGCHO Kabul – an updated version of our high-detail map data of the Afghan capital. Today I wanted to go behind the scenes to talk about how the map was constructed and the tools we used on iOS to build the application.

The data

While not all of the data layers from our Afghan mapping project are rendered into the map tiles (specific layers like power lines, walls and embankments, and city blocks, to name a few), we’ve included a set of layers that would be useful to as many users as possible – layers to comprise a basic street map for navigation purposes, each originally produced at 1:5000 scale:

• Road network and trails
• Streams, drainage, canals
• Bridges
• Building footprints
• Landuse (a selection of the data)
• Labels for roads, neighborhoods, and points of interest

The first step in composing a useful map for a wide range of consumers is to curate each layer and decide what should or should not appear, how each feature is rendered at each zoom level, and how many zoom levels we want to include in the final map. These considerations can influence the diversity of use cases for which you can use the app, as well as the technical facets of the map such as the file size – since high-detail zoom levels can produce a lot of tiles.

Building the map

Constructing the map starts with the raw GIS data. We house our data products in a PostgreSQL database using its powerful PostGIS extensions, which gives us capability for storing geometry (points, lines, polygons) and makes available PostGIS’s multitude of spatial functions for manipulating and querying data. Since our data is already resident in a relational database, it’s in the most flexible format for extracting bits and pieces efficiently that we want to have displayed on the map.

To design the cartography, I use TileMill – MapBox’sopen source map design studio – a fantastic tool for building flexible, beautiful cartography from geographic data (it supports shapefiles, CSV, PostGIS, and others). TileMill employs a simple CSS-like language called carto for defining your cartographic style definitions. It’s extremely logical and intuitive, while still being powerful for maximum flexibility in design. If you’ve ever used CSS, you’d be right at home styling map data in TileMill.

Once the design is completed and I’ve decided on a scope and scale for the finished map, the map is exported to an MBTiles file – an open specification and format for storing map tiles in a SQLite database. MBTiles format is fast, portable, and most importantly allows us to encapsulate interactive tile-based slippy maps in a single file for use offline on mobile applications. It also performs optimizations on the data, and is a whole lot easier than moving around giant directory structures of tile images on the filesystem.

Maps in iOS

In the iOS app, we use a couple of open source utilities to display the maps on the device. Since the native iOS MapKit framework does not give us the flexibility to do all we want to do, we use an open source alternative library called route-me to handle the map rendering and interactions. It supports reading from the MBTiles format, as well as from several other map providers like OpenStreetMap, Bing, Cloudmade, and others. The MBTiles map file is resident on the device filesystem, and tiles are read into the view on screen as you slide around on the map, just like in a web-based slippy map such as Google Maps or OpenStreetMap.

Those are the basics of how we take our data from its raw, hard-to-distribute geospatial format and turn it into beautiful maps for consumers to be able to use on mobile devices. Download the app from the App Store to check out the finished product! If you have any feedback about our maps, leave a comment below – or ping me on Twitter@colemanm with any questions.