Adding multiple layers in CartoDB using createLayer() not working

Question

Using CartoDB (cartodb.js 3.5.02), it seems like you should be able to add multiple, independent tile layers to an instantiated Google Map.

I've tried using createLayer() a number of ways, using both viz.json and dynamic SQL and no matter what I do, only the last createLayer's tiles are displayed. (e.g. If I use viz.json, both legends are shown but only one set of tiles.)

Example loading 2nd layer on 1st layer's done():

cartodb.createLayer(map, url1)
    .addTo(map) // ultimately not displayed
    .done(function (layer) {
        console.log('added url1 ',url1);
        cartodb.createLayer(map, url2)
        .addTo(map) // displays OK
        .done(function (layer) {
            console.log('added url2 ',url2);
        })
        .error(function (){
            console.log('problem adding 2nd layer');
        });
    })
    .error(function () {
        console.log('There is something wrong with requested data!');
    });

Example using dynamic SQL:

cartodb.createLayer(map, {
    user_name: 'validusername',
    type: 'cartodb',
    sublayers: [
    {
        sql: 'SELECT * FROM '+tbl1,
        cartocss: '#'+tbl1+'{polygon-fill: #FF6600; line-color: #FFFFFF; line-width: 1; polygon-opacity: 0.7; line-opacity: 1;}'
    }]
})
.addTo(map)
.done(function(layer) {
    console.log('added ',tbl1);
    console.log(map.overlayMapTypes.length); // ==1
}).error(function(layer) {
    console.log('problem loading cartodb layer');
});

cartodb.createLayer(map, {
    user_name: 'validusername',
    type: 'cartodb',
    sublayers: [
    {
        sql: 'SELECT * FROM '+tbl2,
        cartocss: '#'+tbl2+'{polygon-fill: #FF6600; line-color: #FFFFFF; line-width: 1; polygon-opacity: 0.7; line-opacity: 1;}'
    }]
})
.addTo(map)
.done(function(layer) {
    console.log('added ',tbl2);
    console.log(map.overlayMapTypes.length); // still ==1
}).error(function(layer) {
    console.log('problem loading cartodb layer');
});

I'm guessing that createLayer() resets gmap's map.overlayMapTypes on each call, as its length == 1 even after the second call. Is there a better way to do this, or is this a bug?

Answer 1

addTo method has a second parameter which is the layer order. In that case you should specify the layer order so, the example would be:

...
.addTo(map, 0)
.done(function() { 
 ....
 addTo(map, 1)

In any case, done callback receives the layer (which is a google maps layer) so you can use the google maps way to add a layer:

done(function(layer) {
  map.overlayMapTypes.setAt(0, layer);
})

I've created a working example:

http://bl.ocks.org/javisantana/8527856b8f883d7ce11d