Search code examples
javascriptretina-displayleafletcloudmade

LeafletJS & Cloudmade: Retina Tile Support

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. Wrong positions of tiles

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 Correct positions

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

Has anyone made this working?

Thanks!

Solution

  • 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?