Hiding sublayer with toggle button using LayerActions?

Question

I have a toggle map (like this example) with sublayers. I want all the sublayers to be visible when you open the map, but I would like to hide some sublayers when the toggle buttons are clicked. I've tried adding a hide sublayer code into the LayerActions section of my code, but it's not hiding the sublayers (the button does the same function no matter whether the 'layer.getSubLayer(1).hide()' is there or not). This is the code I'm using:

var LayerActions = {
 all: function(){
 layer.getSubLayer(1).hide();
 sublayers[0].setSQL("SELECT * FROM spreadsheet");
 return true;
 },
 2011: function(){
 layer.getSubLayer(1).hide();
 sublayers[0].setSQL("SELECT * FROM spreadsheet WHERE year IN ('2011') AND year IS NOT NULL");
 return true;
 },
 2012: function(){
 layer.getSubLayer(1).hide();
 sublayers[0].setSQL("SELECT * FROM spreadsheet WHERE year IN ('2012', '2012/2013') AND year IS NOT NULL");
 return true;
 }
}
 $('.button').click(function() {
 $('.button').removeClass('selected');
 $(this).addClass('selected');
 LayerActions[$(this).attr('id')]();
});

Could someone point me to where I'm messing up with my code? Or is it not possible to hide a sublayer using the LayerActions?

---

I'm now loading my layers differently, and this is my new code:

cartodb.createLayer(map, url1)
 .addTo(map, 0)
 .done(function (layer) {
 console.log('added url1 ',url1);
 cartodb.createLayer(map, url2)
 .addTo(map, 1)
 .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!');
 });

So if I wanted to hide the first layer that's loaded (url1) and select only certain points from the second layer (url2), how would I code that in my LayerActions section? I've tried the following, but nothing changes when I click the buttons:

var LayerActions = {
all: function(){
 layer.getLayer(0).hide;
 layer[1].setSQL("SELECT * FROM spreadsheet");
 return true;
},
2011: function(){
 layer.getLayer(0).hide;
 layer[1].setSQL("SELECT * FROM spreadsheet WHERE year IN ('2011') AND year IS NOT NULL");
 return true;
},
...

• andrewxhill: I suspect your layer variable isn't in the global scope? Maybe. just trying doing a console.log(layer) inside of one of the functions to see what spits out.
• andrewxhill: same goes for sublayers
• user25917: @andrewxhill I think I tried what you suggested (although I didn't understand it entirely), but the hide function still wouldn't work. See the edited post above for the code I tried.
• javisantana: You are adding the layer twice, in addTo(map) and then in map.addLayer(..)
• user25917: @javisantana if I take out the map.addLayer(), none of my points show up!

Answer 1

I believe you need to make sure the layer is available to the functions in LayerActions. If you create the layer variable inside the createLayer callback, it isn't available globally, but just to things inside the callback itself. So.

var layer0, layer1;
cartodb.createLayer(map, url1)
 .addTo(map, 0)
 .done(function (layer) {
 layer0 = layer;
 console.log('added url1 ',url1);
 cartodb.createLayer(map, url2)
 .addTo(map, 1)
 .done(function (layer) {
 layer1 = 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!');
 });

Then, in your LayerActions function, just reference the global variables where your layers are stored.

var LayerActions = {
 all: function(){
 layer0.hide();
 layer1.getSubLayer(0).setSQL("SELECT * FROM spreadsheet");
 return true;
},
2011: function(){
 layer0.hide();
 layer1.getSubLayer(0).setSQL("SELECT * FROM spreadsheet WHERE year IN ('2011') AND year IS NOT NULL");
 return true;

},

something like that