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 Answers 2

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

2
  • Maybe detectRetina: true is the default now. Previously, if you didn't set it, you'd just end up with double-sized tiles. Apr 1, 2016 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, 2016 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.