Get basic image/utf grid tile URLs from CartoDB visualization?

Question

I'd like to add the layers from a CartoDB visualization to a Leaflet map directly (NOT through CartoDB.js). My visualization has one image tile layer generated from data, and one utf grid tile layer generated from that same data, for interactivity. How can I get from the big vizjson blob CartoDB produces to plain URL patterns like:

http://blah.cartocdn.com/blah/api/v1/map/{z}/{x}/{y}.png http://blah.cartocdn.com/blah/api/v1/map/{z}/{x}/{y}.grid.json

This doesn't seem like it should be that hard, but the URLs that get used seem to be generated on the fly in some convoluted way.

The CartoDB.js API does have a getTiles method that should return those URLs, but it doesn't work. It expects the layer options to include a "sublayers" property, which doesn't exist for me. I gather those only exist for "anonymous" maps, rather than ones created using the CartoDB editor while logged in.

Any insight?

Answer 1

For every unique sql request to your cartodb account, it creates a new "id". If you use the cartodb.Tiles.getTiles function, it will return an object containing the

• PNG url (tiles.tiles[0])
• and the .grid.json url (tiles.grid[0][0])

Check out the example at http://docs.cartodb.com/cartodb-platform/cartodb-js.html#cartodbtilesgettileslayeroptions-callback

I've modified the example slightly for clarity - check the console output

var layerData = {
  user_name: 'mycartodbuser',
  sublayers: [{
    sql: "SELECT * FROM table_name";
    cartocss: '#layer { marker-fill: #F0F0F0; }'
  }]
};
cartodb.Tiles.getTiles(layerData, function(tiles, err) {
  if(tiles == null) {
    console.log("error: ", err.errors.join('\n'));
    return;
  }
  console.log("url template is ", tiles);
}

Answer 2

I recommend you to take a look at this Maps API: http://docs.cartodb.com/cartodb-platform/maps-api.html

The URLs are generated with your username and the layergroup ID. You can get it in the response of the system when you instantiate a map with a curl request like, for example:

mapconfig.json: { "version": "1.0.1", "layers": [{ "type": "cartodb", "options": { "cartocss_version": "2.1.1", "cartocss": "#layer { polygon-fill: #FFF; }", "sql": "select * from european_countries_e", "interactivity": ["cartodb_id", "iso3"] } }] }

request: curl 'http://documentation.cartodb.com/api/v1/map' -H 'Content-Type: application/json' -d @mapconfig.json

response: { "layergroupid":"c01a54877c62831bb51720263f91fb33:0", "last_updated":"1970-01-01T00:00:00.000Z" "cdn_url": { "http": "http://cdb.com", "https": "https://cdb.com" } }

Answer 3

There's an excellent new tutorial about named maps in this link