One of the new features in the latest TileMill release is the new TileMill Mac OS X app, which makes creating maps easier than ever. In this post, I’ll discuss quickly what the app does and then talk about the process of creating it.

The TileMill app features a QuickLook plugin that makes it easy to preview MBTiles files. Like any other QuickLook-enabled file type, you can just hit the space bar and immediately see the tiles contained in the file, without having to set up TileStream.

The preview isn’t just a static image. It’s fully interactive, and you can pan and zoom from the preview to explore other parts of the tileset. It’s not restricted to just the QuickLook function either. You can see a preview tile whenever the Finder generates a thumbnail for the MBTiles file, and with Justin’s Spotlight importer it’s easy to find MBTiles files on your computer by indexing the metadata in an MBTiles file.

Apart from previewing and searching MBTiles files, the TileMill application now also contains a Preferences dialog that allows some fine tuning, as well as automatic updates using the excellent Sparkle framework.

Technical details

QuickLook plugins are implemented as regular HTML pages displayed by WebKit. This allows us to just use ModestMaps and the Wax toolkit to create a tile viewer. The Spotlight importer reads the metadata table of an MBTiles file and provides that information to the search indexer.

However web pages displayed in a QuickLook preview can’t access any resources via the http: or file: scheme. This unfortunately rules out starting a node.js server and dynamically querying the MBTiles files for the required tiles. Luckily, the QuickLook framework allows 'attaching' resources to the preview HTML file and makes them accessible using the cid: protocol scheme. Many MBTiles files contain millions of tiles, so loading all of them isn't an option. We decided to load the tiles around the center of the file and two zoom levels above and below. This enables panning and zooming in a restricted range around the center and should give you a good impression of the MBTiles file you're dealing with. We found that performance was still very good, even when loading several hundred tiles. Typically generating a preview takes less than half a second and should appear as almost instant.

The QuickLook plugin is also responsible for creating a preview thumbnail that you can see in finder and the CoverFlow view. The preview thumbnail is simply the centermost tile in your tileset. If the spot you want to set as center isn’t exactly in the middle of all tiles, you can specify an explicit latitude/longitude/zoom triplet as center in the [metadata table](http://mbtiles.org) of the MBTiles file.

To start using the TileMill Mac app, download the latest release.