How does Leaflet layer ordering work with CartoDB layers?

Question

All,

I'm trying to figure out how Leaflet layer ordering works when you have layers coming from CartoDB. I have a map with 1 polygon layer (cartodb), 3 point layers (cartodb), 1 basemap layer (mapbox) (and in the future hope to add tabletopJS or another google spreadsheet conduit...)

The Leaflet Layers example seems straight forward when using cloudmade layer URL's that end in the {z}/{x}/{y}.png format, which will work for Mapbox as well.

However, I can't see how to get the {z}/{x}/{y}.png format for a CartoDB layer, and wonder if the same interactivity will be supported (custom infowindows, etc.)

So far I have tried this to no avail:

function layersMap() {
    var voices = cartodb.createVis('map', 'http://opendetroit.cartodb.com/api/v2/viz/08140c18-8a05-11e3-ae46-0e49973114de/viz.json');
        devPoints = cartodb.createLayer('map', 'http://opendetroit.cartodb.com/api/v2/viz/62a64dd6-4d7d-11e3-b48c-db82dabd16be/viz.json'); 
    var points = L.layerGroup([voices, devPoints]);
    var map = new L.map('map', {
    center : [42.339926, -83.04137],
    zoom : 13,
    layers: [points]
    });

}

The problem with this attempt, however, is the 2nd layer doesn't draw, and there is actually two zoom controls displaying.

This is as close a solution as I can find by going through as much info on GIS.SE, Leaflet docs, CartoDB docs, etc.

So it seems I might be on the right track by getting 1 CartoDB layer to display...but not sure where to go from here...

Answer 1

neither createLayer or createVis return a leaflet layer, the right way would be

 var map = new L.map('map', {
    center : [42.339926, -83.04137],
    zoom : 13

 });

// add here your mapbox layer

createLayer(map,vizjson_url).addTo(map).done(function(layer) {
  layer.setZIndex(1);
})
createLayer(map,vizjson_url2).addTo(map).done(function(layer) {
  layer.setZIndex(2);
})

Answer 2

Here is a working solution:

var map = new L.map('map', {
center : [42.339926, -83.04137],
zoom : 13
});
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
      attribution: 'Stamen'
    }).addTo(map);

var voices = cartodb.createLayer(map, 'http://opendetroit.cartodb.com/api/v2/viz/08140c18-8a05-11e3-ae46-0e49973114de/viz.json').addTo(map);
    devPoints = cartodb.createLayer(map, 'http://opendetroit.cartodb.com/api/v2/viz/62a64dd6-4d7d-11e3-b48c-db82dabd16be/viz.json').addTo(map); 

http://codepen.io/milafrerichs/pen/VYOgpN

You can even create LayerGroups. Don't add the layer to the map and add a .on

cartodb.createLayer(map, 'viz.json')
     .on('done', function(layer) {
});

Hope this helps.