3

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?

3

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

  • 1
    Thanks for your quick response, Javier! I went back to the API doc and found this as the only reference to the additional param - may be a bit buried? "You can call to addTo(map[, position]) in the promise so when the layer is ready it will be added to the map." – garth Dec 20 '13 at 0:11

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.