The content of this post is out of date

Mapbox.js now automatically serves retina tiles.

Layering multiple datasets on top of a map can add noise, but if you extract your layers properly you can keep your map looking really clean. Below is a walk through of how to use a points of interest data layer on top of a larger dataset. I also describe how you can composite multiple map layers directly through the map URL, and how you can add support for high-resolution retina screen devices to ensure your POIs look great across devices.

Labels on Top

Adding additional layers can add new dimensions and provide important contextual information to a map. With MapBox.js, you can add multiple layers without sacrificing map speed. With many mapping libraries, each tile url is loaded separately and then placed on the map making the map slow and bloated.

The map below shows that is possible to combine many layers (base, population choropleth and labels) all into one tile. MapBox.js also gives us the control layer order so the labels are always on top of the data.

   map.addLayer(mapbox.layer().id('bobbysud.map-9r8vorla'));
    //Adds the baselayer and choropleth
    map.addLayer(mapbox.layer().id('bobbysud.map-rekkc1s3'));
    //Adds labels on top. That is it!

Notice how the labels are legible and the speed is not compromised. View full screen

Hack the URL

On the subject of compositing tiles, a little unknown secret is that you can combine map layers without even writing a line of code by ‘hacking’ the URL. Simply follow this pattern:

http://a.tiles.mapbox.com/v3/ + username.mapId + , + username.mapId + .html

bobbysud.map-ppia20uk + bobbysud.where = bobbysud.map-ppia20uk,bobbysud.where

View full screen.

This makes it very easy to create a map in TileMill, layer it over other data and quickly share it. You have full access to built in MapBox features – like zoom controls, tooltips, scroll zoom, geocoder, and bandwidth detection.

Retina Tiles

High resolution screens are becoming increasingly more common. A regular map tile is 256px X 256px (map below on the left), which is ideal for standard resolution screens, but can appear sloppy when rendered on a retina screen. You can avoid this pitfall by optimizing the tiles with JavaScript. The code snippet below compresses each tile to half its size (map on the right). Because we are reducing the size of each tile, we need to make sure the labels are still proportional. MapBox Streets has a 2x feature which doubles all label sizes specifically for this ‘retina’ use case. Try comparing the maps below on your smartphone.

   var retina = window.devicePixelRatio >= 2;
    if (retina) {
        // Retina tiles are sized 1/2 of normal tiles for twice the pixel
        // density
        map.tileSize = { x: 128, y: 128 };
        // use a retina tileset
        map.addLayer(mapbox.layer().id('examples.map-zq0f1vuc'));
    } else {
        // use a standard tileset
        map.addLayer(mapbox.layer().id('examples.map-i87786ca'));
    }

This simple “if statement” makes sure your maps always look their best. View full screen

Hopefully these tricks will help you to create awesome looking maps and share them that much faster. Check out MapBox.js for documentation and great examples. Be sure to tweet at us @MapBox with your hot new optimized maps.