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.
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:
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.
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.