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...


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'

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); 


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.

  • thanks, example didn't worked in codepen, but it worked in a html file that I made. thanks :) – Will Apr 11 '15 at 18:54

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) {
createLayer(map,vizjson_url2).addTo(map).done(function(layer) {
  • thank you @javisantana... does this mean layer groups are out of the question? – DPSSpatial_BoycottingGISSE Mar 7 '14 at 14:46
  • You can do with it a leaflet layergroup also, but you need to wait both done are called. layer param in a leaflet tiledlayer object – javisantana Mar 10 '14 at 7:50
  • is there an example of that anywhere? – DPSSpatial_BoycottingGISSE Mar 20 '14 at 3:30
  • just tried the example above but nothing loads... – DPSSpatial_BoycottingGISSE Mar 20 '14 at 3:36
  • @mapBaker could you share the example to see what is happening? – javisantana Mar 20 '14 at 11:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.