I followed the Cartodb Toggle Map View tutorial and I inserted the corresponding elements from my own map into the code and it's not working for some reason, all I see is a blank page. I've posted my code below, and here is the actual map in Cartodb. All I want to do is create two buttons that allow you to toggle between the two layers of data I've created in the map.
<html>
<head>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
<![endif]-->
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;}
#cartodb-map { width: 100%; height:100%; background: black;}
</style>
<script>
var map;
function init(){
// initiate leaflet map
map = new L.Map('cartodb-map', {
center: [0,0],
zoom: 2
})
var layerUrl = 'http://rjharris.cartodb.com/api/v2/viz/8f8fb646-6bbf-11e4-a77f-0e018d66dc29/viz.json';
var sublayers = [];
cartodb.createLayer(map, layerUrl)
.addTo(map)
.on('done', function(layer) {
// change the query for the first layer
var subLayerOptions = {
sql: "SELECT * FROM medicaid_expansion",
cartocss: "#medicaid_expansion {
polygon-opacity: 0.7;
line-color: #FFF;
line-width: 1;
line-opacity: 1;
}
#medicaid_expansion[expansion="Expanding\n"] {
polygon-fill: #A6CEE3;
}
#medicaid_expansion[expansion="No Expansion"] {
polygon-fill: #1F78B4;
}
#medicaid_expansion[expansion="Currently in Debate"] {
polygon-fill: #B2DF8A;
}
#medicaid_expansion[expansion="Expanding"] {
polygon-fill: #33A02C;
}
#medicaid_expansion[expansion="Expanding\n\n"] {
polygon-fill: #FB9A99;
}
#medicaid_expansion[expansion="No Expansion\n"] {
polygon-fill: #E31A1C;
}"
}
var sublayer = layer.getSubLayer(0);
sublayer.set(subLayerOptions);
sublayers.push(sublayer);
}).on('error', function() {
//log the error
});
</script>
</head>
<body onload="init()">
<div id='cartodb-map'></div>
</body>
</html>