The web map API space has flourished in the last few months, and it has exciting ramifications for TileMill users and everyone else. Our TileMill and TileStream projects focus on custom map tile design, generation, and hosting, and previously we had been using OpenLayers for the last layer of user interaction — loading and interacting with maps. However, we recently moved to using Modest Maps and are seeing dramatic improvements in speed.

The biggest reason behind this is that Modest Maps has significantly changed the size of our mapping code. While we used a slim build of OpenLayers that reduced its overall size from 700KB+ to 388KB (non-gzipped), the portion of embeds constituting Modest Maps is 28KB. This is a 90% improvement in size. Wax — a 32KB library for Modest Maps and 20KB for OpenLayers — fills in the features we rely on while little affecting the size savings. Even the highly-optimized Google Maps API weighs an average of 150KB (a number that varies based on browser and is rarely the actual page size, due to lazy-loading and caching). Modest Maps can be much smaller because it can be extremely focused on a single task.

Size and efficiency is especially important when we’re looking to support maps on mobile devices — TileStream embeds will soon work on iOS and Android devices by default. Much of my work in Modest Maps core is focused on improving this support — making sure that multi-touch browsers like Mobile Safari can be completely utilized while still supporting the single-touch browsers of Android devices. Leaflet, Google Maps, and OpenLayers have all also pushed mobile support — smart usage of CSS transforms, touch events, and code that’ll make web maps as fast as native apps in browsers.

More about Modest Maps

Modest Maps is a project started by Tom Carden of Stamen Design and Bloom.io. Over the years, it has been influenced by the design of OpenLayers and Polymaps, but it maintained a very attractive philosophy: lightweight code, cross-browser compatibility, and a simple, robust API. Since many of our projects incorporate custom map controls — and because our main mode of interaction is implemented on top of APIs rather than in frameworks themselves, this is exactly what we want — a super-fast, small core.

It should be noted that Modest Maps doesn’t include many of the features users expect out of APIs — there is no support for multiple layers in core, no support for commercial layers like Google Maps, no support for formats like GeoJSON and KML, and no controls whatsoever in core. This means that with Modest Maps itself, you don’t even get the buttons to zoom in and out of maps that are such a classic element of web maps. Projection support is also minimal — only equilateral and spherical mercator projections are supported.

However, we don’t use these features. Data like GeoJSON can be rendered in TileMill and made faster and more browser-compatible, avoiding the challenges of rendering vectors across VML, SVG, and keeping maps performant. TileMill currently only renders to the web-standard spherical mercator projection, and contains support for transparently reprojecting data from shapefiles and other sources into that projection. And using an external set of map controls has given us flexibility in visual UI elements — like the ability to quickly make controls compatible with touch devices.

Another option: Leaflet

Modest Maps isn’t the only really interesting thing happening with web maps. Cloudmade recently introduced Leaflet, an open source version of the library they’ve been using to power their simple web map api. It’s far closer to OpenLayers in the look of the API and its features — multiple layers are supported, as are vectors across browsers. We’ve been working on getting MapBox support into Leaflet — it’s now possible to add layers from MapBox with the core library, and to add interaction to those layers with Wax. Like Modest Maps, Leaflet is very small — the code weights 64KB by default — which is attractive to us. Leaflet also takes advantage of modern CSS when available to generate zooming and fading effects in new browsers — changes that also improve its panning performance and could be ported to other APIs.

We’re going to keep pushing this space by contributing to the core of Modest Maps, writing patches for Leaflet whenever possible, and integrating with as many APIs as possible in the Wax project. For lightweight use cases, like TileStream embeds, Modest Maps and Leaflet can make a huge difference — as they will in the next version of TileStream, that replaces OpenLayers with Modest Maps for a massive speed win.