Easy way to render TileMill tiles in retina mode with Leaflet?

Question

I have a few quick little map websites that run straight off TileMill, without pre-exporting. They usually have code like this:

L.tileLayer('http://example.com:20008/tile/MyMap/{z}/{x}/{y}.png',
  {}).addTo(map);

How do you make this take advantage of a Retina type high resolution display, without just making everything (especially text!) tiny?

Answer 1

It turns out to be really simple, because TileMill supports scaling features.

L.tileLayer('http://example.com:20008/tile/MyMap/{z}/{x}/{y}.png'
    + (L.Browser.retina ? '&scale=2': ''), 
    {  detectRetina:true
    }).addTo(i);

There are three parts:

1. L.Browser.retina tells you there is a retina display, which you use to...
2. request scaled map tiles from Tilemill with &scale=2, which...
3. Leaflet renders physically smaller with detectRetina:true

Similar logic would be used for pre-exported tiles. You'd export two sets, one at scale=2, and then point Leaflet at whichever is appropriate.

It looks like mapbox.js used to have a special option for this.

Answer 2

I found this question when I tried to find out how to get retina working with vanilla Leaflet and Mapbox. If others end on the same trail, this is how I made it work:

var url = 'https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}';
    url += (L.Browser.retina ? '@2x.png' : '.png');
    url += '?access_token=my-token';

No need to use detectRetina!

This is basically what mapbox.js does internally