2

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

2 Answers 2

2

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);
})
6
  • thank you @javisantana... does this mean layer groups are out of the question? Mar 7, 2014 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 Mar 10, 2014 at 7:50
  • is there an example of that anywhere? Mar 20, 2014 at 3:30
  • just tried the example above but nothing loads... Mar 20, 2014 at 3:36
  • @mapBaker could you share the example to see what is happening? Mar 20, 2014 at 11:15
1
+50

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.

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

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.