Lightweight new solutions let our maps load faster and perform better
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.