I'm trying to use leaflet layergroups with a cartodb layer, ala: http://leafletjs.com/reference.html#layergroup but haven't been able to successfully do it.

This is what I have so far:

    var map = new L.Map('map', {
      zoomControl: true,
      center: [41.460, -81.67],
      zoom: 11

    map.locate({setView: true, maxZoom: 18});

    var background = L.tileLayer('http://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png', {
      attribution: 'Stamen',
      maxZoom: 15,
      errorTileUrl: 'http://fashiontech.files.wordpress.com/2008/08/plaid_b_single.jpg?w=256'

    cdb = cartodb.createLayer(map, 'http://cleveland-metroparks.cartodb.com/api/v2/viz/05af5a7c-668d-11e3-8914-cb7f69afe66f/viz.json')

     .on('done', function(layer) {


      layer.on('featureOver', function(e, pos, latlng, data) {
        cartodb.log.log(e, pos, latlng, data);

      layer.on('error', function(err) {
        cartodb.log.log('error: ' + err);
    }).on('error', function() {
      cartodb.log.log("some error occurred");

    labels = L.tileLayer('http://{s}.tile.stamen.com/toner-labels/{z}/{x}/{y}.png', {
      attribution: 'Stamen',
      maxZoom: 18

    var existing = L.layerGroup([background, cdb]);
    var baseLayers = {
        "Existing": existing


This answer hints that it's possible, but my js-fu is really lacking: How does Leaflet layer ordering work with CartoDB layers?


cartodb.createLayer does not return a leaflet layer, you need to use the layer passed in the 'done' callback.

Moving the control creation inside the 'done' callback will do the trick

  • So do you mean add the layer switcher control to the done callback? – Stephen Mather Apr 22 '14 at 13:22
  • Yes, you need to user the layer object you get in the callback – javisantana Apr 22 '14 at 13:53

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.