I've been trying to follow the documentation for cartodb for a while to figure this out, but haven't found it very clear. All I'm trying to do is hide one layer and then show another layer upon button click.
However, I have no idea of the syntax and the documentation wasn't much help.
$(document).ready(function() {
var map2 = new L.Map('attribute_map', {
center: [39.8282,-98.5795],
zoom: 4,
})
var map2;
$('#load_2').click(function() {
$('#load_2').css("display","none");
$ ('#attribute_map').css("height","520px");
var mapURL = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_nolabels/{z}/{x}/{y}.png'
L.tileLayer(mapURL, {
}).addTo(map2);
cartodb.createLayer(map2, 'https://jonmrich.cartodb.com/api/v2/viz/50366df6-afed-11e4-ab33-0e853d047bba/viz.json', { https: true,legends: true,cartodb_logo:false,layerIndex:1 })
.addTo(map2)
});
$('#load_3').click(function() {
cartodb.createLayer(map2, 'https://jonmrich.cartodb.com/api/v2/viz/0a63ff26-ad47-11e4-bebb-0e4fddd5de28/viz.json', { https: true,legends: false,cartodb_logo:false, })
.addTo(map2)
});
});
Can someone point me in remotely the right direction? In this example, I'm trying to add visualizations based on different tables. I also tried doing it for multiple layers in the same visualization, but couldn't figure that out either.
Best Answer
You should load both sublayers through createLayer, then turn off the one you want to hide initially.
The following works if you have two tables in the visualization you created in CartoDB Editor. If you want to add layers without having a viz.json link, you can create the layers at runtime.