Retina Maps Added to the MapBox iOS SDK

By Justin Miller

We’ve just added retina tile support to our worldwide street level base map, MapBox Streets, with full support in our iOS SDK. This brings high-DPI display support for devices like the iPhone 4/4S and the new iPad.

Retina support means that all of the billions of images that we create, update, and store — read more about that in Young’s post on rendering the world — are now duplicated in an additional map that’s optimized for display at twice the pixel density.

Though it’s hard to do it justice on non-retina displays (on which you are likely reading this), consider these before and after pictures:

Move your mouse over the image to toggle between before and after versions.

There are a number of tricks that our cartographer AJ used to enhance the look here, including widening streets and enlarging labels (expect a more detailed blog post soon). The resulting image on retina-capable devices is incredibly sharp. Previously we had been using client-side code to draw the 256-pixel tile images into 512-pixel space. Otherwise the details are sharp but are unable to be read since true 256-pixel images take one quarter of the screen space as on non-retina devices and are generally too tiny to read. Once we’ve got the details styled in a way that looks good at a true 256-pixel size, we can flip back to drawing at an actual 256-pixel screen space.

Here’s a side-by-side comparison up close:

As you can see, we were also able to provide more context by including more features.

If you are using the MapBox iOS SDK, you only need to change two things to take advantage of these retina tiles:

1. When editing in your hosting account, enable the 2x button for streets and save the changes.
2. In the Objective-C code, use the newly saved style’s TileJSON URL and be sure to set the map view’s adjustTilesForRetinaDisplay property to NO. Tiles will then draw at the normal 256-pixel size. If you are supporting non-retina devices, you will probably want two versions of your maps, just as you have two versions of graphical assets, and detect which map to use via [[UIScreen mainScreen] scale].

If you want a quick video overview of editing map styles and embedding them in an iOS app, watch our feature on Custom Styled Maps for iOS Apps in 5 Minutes.

We’re pleased to be able to bring these updates to our users and to our developers. Stay tuned for continued updates and enhancements to our tools for making beautiful maps.

Justin Miller