Yesterday we launched a website publishing 10 years of data on violence against journalists in Afghanistan. The latest in our recent work opening and visualizing new public datasets, this site posed some unique challenges, particularly with respect to operating in low bandwidth environments.

Eric spent the last few weeks in Kabul collaborating with Internews and Nai, our partners on the site, and cultivating a burgeoning open data culture. At the same time, we tested some new methods for pushing the speed of MapBox maps to the max. Here’s what we’ve done:

1. Wax and Modest Maps

Last month, we announced Wax, which along with Modest Maps, we’re using as a replacement for OpenLayers to bond together and deliver our custom tilesets. Wax and Modest Maps together are over 70% smaller in file size than OpenLayers and provide the advanced functionality we need for interactive maps.

2. Image Compositing in TileStream Hosting

Just a few weeks ago, we rolled out a major new feature for TileStream Hosting: server-side image compositing. Simply put, this means adding additional layers to maps doesn’t increase the number of tiles it takes to load the maps. The violence against journalists site offers 55 different layer combinations, so this performance boost is essential.

3. NEW: Tile Image Compression

Compositing paved the way for another brand new feature Konstantin deployed late last week: configurable tile compression. In addition to high quality PNG and JPG tiles, TileStream Hosting also serves additional levels of compression, specified by the tile’s file extension:

• For PNG, you can use .png256, .png128, .png64 and .png32 to retrieve paletted images with the respective number of colors. The default is 24bit full color PNGs.

• For JPG, you can add use .jpg90, .jpg80 and .jpg70. The default quality for jpg is 80.

On the violence against journalists site, using jpg70 compression cut the site’s total size in half.

4. NEW: Bandwidth Autodetection

Following up on tile compression, Tom rolled out a Wax control for automatic bandwidth detection. By testing the speed of downloading a sample tile, Wax can automatically reduce the filesize of a map by activating tile compression. Now the same map is speedy those in low bandwidth environments and has enhanced image quality for broadband users.

The Wax bandwidth control also allows for manual compression settings, so we added an HQ button to our map.

Low quality tiles.

High quality tiles.

5. Loading New Layers Over Existing Tiles

Our final speed tip is actually more of a trick. Usually, switching to a new layer means throwing out the old tiles and loading new ones. On a fast connection, this process is basically undetectable, but on a slow connection, the experience of reading the map is disrupted as the old map view disappears and the new tiles trickle in.

To get around this on the violence against journalism site, when a user switches to a new layer, a copy of the current layer is saved behind the map. Now instead of loading the new layer’s tiles over an empty background color, the new tiles load over the previous layer. On a slow connection, the map never completely disappears — it just gradually updates. On a fast connection, this produces a graceful fade effect.

Map tiles loading over a white background.

Map tiles loading over a previous map layer.

Speed Matters

In the international development context, things we take for granted like fast internet and a modern browser are often far from guaranteed. At the same time, access to fast data visualizations is just as important as anywhere else. We are investing heavily in making certain that MapBox maps are the fastest maps on any connection. We build tools to help data-driven organizations make smart decisions, keeping up with the changing world around them.

Get started making your own fast maps now. Our open source map design studio, TileMill, makes it easy to design completely custom and interactive web maps. These tile-based maps are incredibly fast when paired with TileStream Hosting.