[GIS] How to generate 512×512 map tiles (2x resolution for retina displays)

cartocartocssmapnikopenstreetmapretina

I'm looking for a method to produce 512×512 pixels map tiles using CartoCSS and Mapnik, for example exactly as CardoDB does for its base maps (here below a 256×256 map tile vs its correspondent 512×512 map tile):

256x256 tile example
512x512 tile example

I need that for producing 2x resolution map tiles for retina displays. I'm using Openstreetmap Carto map stylesheets and can generate Mapnik xml files.

Best Answer

If you are using CartoDB, in order to get your map tiles in retina, you'd need to:

  1. Perform a layergroup JSONP request to get the token of your map

    a. For named maps, GET /api/v1/map/named/:template_name/jsonp, your token is the value of layergroup_id. Docs here.

    b. For anonymous maps, you will get the token when you instantiate the map. Docs here. This is used in the regular tiles that you get when you create one of these maps. If you are using CartoDB.js, you can use the getTiles method to get the URL of your tiles and then you could add the scale factor (@2x) at the end to get your retina tiles.

  2. Then you can get your retina tiles with the URL for that token (layergroup id):

    https://{username}.cartodb.com/api/v1/map/{token}/{z}/{x}/{y}@2x.png

====

In a practical example, if you open an anonymous map, such as for example the one I create on runtime here, go to the Network tool of the Developer tools and try to get the URL for any of the tiles. It might look like this one (layergroup ID would change whenever it expires):

http://1.ashbu.cartocdn.com/iriberri/api/v1/map/07fca4588c18610b7084b96918ffced3:1424692976794.61/0/3/4/1.png

Remove the layer parameter in the url (in this case, the 0) and add the scale factor (you should also get rid of the CDN endpoint and use the regular username.cartodb.com endpoint:

http://iriberri.cartodb.com/api/v1/map/07fca4588c18610b7084b96918ffced3:1424692976794.61/3/4/1@2x.png

For named maps, if you have created one of them, imagine it's called tpl_099bb586_daf8_11e5_a8aa_0e3ff518bd15 (typical name that the Editor creates by default, but this can be more user friendly if you just created a named map with the API and gave it a better name), perform the following request:

https://{username}.cartodb.com/api/v1/map/named/tpl_099bb586_daf8_11e5_a8aa_0e3ff518bd15/jsonp?callback=cb

Whose response would be similar to:

/**/ typeof cb === 'function' && cb({
"layergroupid":"iriberri@a1b24beb@0ad98a2d3337078c9fc660760cb070b3:1456141947669.97",
"metadata":{
  "layers":[{"type":"http","meta":{"stats":[]}},{"type":"mapnik","meta":{"stats":[]}},{"type":"http","meta":{"stats":[]}}]},"cdn_url":{"http":"ashbu.cartocdn.com",
"https":"cartocdn-ashbu.global.ssl.fastly.net"},
"last_updated":"2016-02-22T11:52:27.669Z"
});

And then, with this layergroup ID (token), you can build your:

http://iriberri.cartodb.com/api/v1/map/iriberri@a1b24beb@0ad98a2d3337078c9fc660760cb070b3:1456141947669.97/3/4/1@2x.png
Related Question