LeafletJS & Cloudmade: Retina Tile Support

Question

I'm using Leaflet JS and Cloudmade in my mobile HTML5 application. Unfortunately I can't get the retina support to work.

I use this url to access the cloud made api:

var url = 'http://{s}.tile.cloudmade.com/{key}/{style}@2x/256/{z}/{x}/{y}.png?token={token}';

My key, style and token are replaced by the correct values.

For my leaflet map layer I use the following simple configuration:

L.tileLayer(url, {
        detectRetina: true
      }).addTo(map);

Unfortunately the result looks really weird.

It seems like something is going wrong with the tiles and the position of them.

If I remove the detectRetina flag I get a correct result in the browser

But as you can see both solutions are not sharp on my retina display (Mac Book Pro).

Has anyone made this working?

Thanks!

Answer 1

This worked for me:

var tileURL = 'http://{s}.tile.cloudmade.com/{api-key}/1714' + (L.Browser.retina? '@2x': '') + '/256/{z}/{x}/{y}.png';          

L.tileLayer(tileURL, {detectRetina: true}).addTo(yourMap);

Have you tried with different tile styles and check if that might be the issue?