4

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?

2

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.

1

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

  • Maybe detectRetina: true is the default now. Previously, if you didn't set it, you'd just end up with double-sized tiles. – Steve Bennett Apr 1 '16 at 0:50
  • Exactly what I was looking for: a way to use raster Mapbox tiles in a mobile-friendly Leaflet map. – kontextify Dec 27 '16 at 10:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.