Maps can be a challenge in low bandwidth scenarios—they rely on dynamic content being loaded fast and being constantly interactive. We’re tackling this challenge with native mobile SDKs and fast APIs: here are a few ways the full-stack performance of Mapbox is killer.
Server-side compositing
When you embed a Mapbox-hosted map into your site or app, you refer to it by including the map ID, e.g. justin.gocbkbg3. A tile image URL for this map might look like the following:
https://api.tiles.mapbox.com/v3/justin.gocbkbg3/13/1303/2930.png
Another map ID on my account is justin.pdx_overlay - a neighborhood boundaries layer with partial transparency that I designed in TileMill using open data from Portland’s RLIS portal. Let’s look at the same tile from that map:
https://api.tiles.mapbox.com/v3/justin.pdx_overlay/13/1303/2930.png
And a labels-only layer custom made like the terrain layer:
https://api.tiles.mapbox.com/v3/justin.gn9hkiae/13/1303/2930.png
Creating a map of these three combined would traditionally require a tile from each map at each position, making the performance equation simply: three times slower than a single map.
We changed that with on-the-fly compositing: you can combine map layers in the URL with a comma, and only one request is required.
https://api.tiles.mapbox.com/v3/justin.gocbkbg3,justin.pdx_overlay,justin.gn9hkiae/13/1303/2930.png
Note how the labels appear over the colored regions.
These composite tiles are served at scale from our global network after being generated in milliseconds behind the scenes with the open source node-blend library.
Image quality API
Need to squeeze more tiles for every kilobyte? The Mapbox image quality API dynamically resamples images, changes PNG bit depth or JPEG quality, and converts between the two formats on the fly.
Take the terrain base layer mentioned above:
https://api.tiles.mapbox.com/v3/justin.gocbkbg3/13/1303/2930.png
You can change the file extension to grab an 80% quality JPEG image of the same tile:
https://api.tiles.mapbox.com/v3/justin.gocbkbg3/13/1303/2930.jpg
But you can also append a PNG bit depth or JPEG quality number:
| JPEG | PNG |
|---|---|
 | |
...13/1303/2930.jpg (original, 19KB) | ...13/1303/2930.png256 (42KB) |
...13/1303/2930.jpg90 (28KB) | ...13/1303/2930.png128 (31KB) |
...13/1303/2930.jpg80 (19KB) | ...13/1303/2930.png64 (24KB) |
...13/1303/2930.jpg70 (15KB) | ...13/1303/2930.png32 (19KB) |
In many cases, the difference isn’t obvious visually, and in others, the trade-off of speed for detail makes sense. Your app or site could even do bandwidth detection and adjust the map quality on the fly for the best download experience. You can combine the image quality API with the compositing API, since each of these tiles is actually a server-side composition of three separate source tiles.
Built for mobile
Both the compositing and image quality APIs let you customize your maps for speed and low-bandwidth. Whether you use our REST API to load images directly or our iOS SDK with full support for the image quality API, Mapbox is mobile-ready and built with the best possible user experience in mind.