Sunday 17 January 2016

carto - Hiding sublayer with toggle button using LayerActions?


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;
},
...

Answer




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


No comments:

Post a Comment

arcpy - Changing output name when exporting data driven pages to JPG?

Is there a way to save the output JPG, changing the output file name to the page name, instead of page number? I mean changing the script fo...