Simply attempting to toggle layers using cartdb and jquery much like this tutorial. After sniping the console I get init() is not defined? However this only occurs after adding the 4th button (#large)? Works fine with 3 (#all,#69,#115)?
<html>
<head>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.js"></script>
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;}
#map { width: 100%; height:100%; background: black;}
#menu { position: absolute; top: 5px; right: 10px; width: 400px; height:inherit; background: transparent; z-index:10;}
#menu a {
margin: 15px 10px 0 0;
float: right;
vertical-align: baseline;
width: 70px;
padding: 10px;
text-align: center;
font: bold 11px "Helvetica",Arial;
line-height: normal;
color: #555;
border-radius: 4px;
border: 1px solid #777777;
background: #ffffff;
text-decoration: none;
cursor: pointer;
}
#menu a.selected,
#menu a:hover {
color: #F84F40;
}
</style>
<script>
var map;
function init() {
// initiate leaflet map
map = new L.Map('map', {
center: [34.3,-101.4],
zoom: 7
})
L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms & Feedback</a>'
}).addTo(map);
var layerUrl = 'https://wtgeographer.cartodb.com/api/v2/viz/b195a1d2-31a4-11e5-8edf-0e0c41326911/viz.json';
var sublayers = [];
var LayerActions = {
all: function(){
sublayers[0].setSQL("SELECT * FROM completed_072315");
return true;
},
small: function(){
sublayers[0].setSQL("SELECT * FROM completed_072315 WHERE voltage_st = '69'");
return true;
},
medium: function(){
sublayers[0].setSQL("SELECT * FROM completed_072315 WHERE voltage_st = '115'");
return true;
}
large: function(){
sublayers[0].setSQL("SELECT * FROM completed_072315 WHERE voltage_st = '230'");
return true;
}
}
cartodb.createLayer(map, layerUrl)
.addTo(map)
.on('done', function(layer) {
// change the query for the first layer
var subLayerOptions = {
sql: "SELECT * FROM completed_072315",
//cartocss: "#completed_072315{marker-fill: #F84F40; marker-width: 8; marker-line-color: white; marker-line-width: 2; marker-clip: false; marker-allow-overlap: true;}"
}
var sublayer = layer.getSubLayer(0);
sublayer.set(subLayerOptions);
sublayers.push(sublayer);
}).on('error', function() {
//log the error
});
$('.button').click(function() {
$('.button').removeClass('selected');
$(this).addClass('selected');
LayerActions[$(this).attr('id')]();
});
}
</script>
</head>
<body onload="init()">
<div id='map'></div>
<div id='menu'>
<a href="#all" id="all" class="button all">ALL</a>
<a href="#small" id="small" class="button small">69</a>
<a href="#medium" id="medium" class="button medium">115</a>
<!--<a href="#large" id="large" class="button large">230</a>-->
<a href="#large" id="large" class="button large">230</a>
</div>
</body>
</html>
asked Jul 24, 2015 at 3:36
1 Answer 1
You are missing a comma in line 61 of your code:
var LayerActions = {
all: function(){
sublayers[0].setSQL("SELECT * FROM completed_072315");
return true;
},
small: function(){
sublayers[0].setSQL("SELECT * FROM completed_072315 WHERE voltage_st = '69'");
return true;
},
medium: function(){
sublayers[0].setSQL("SELECT * FROM completed_072315 WHERE voltage_st = '115'");
return true;
},
large: function(){
sublayers[0].setSQL("SELECT * FROM completed_072315 WHERE voltage_st = '230'");
return true;
}
}
Specifically, after this definition:
medium: function(){
sublayers[0].setSQL("SELECT * FROM completed_072315 WHERE voltage_st = '115'");
return true;
}
The code was returning these errors:
Uncaught SyntaxError: Unexpected identifier
Uncaught ReferenceError: init is not defined
which are always indicating that something is not correct syntactically in the code :-) As the comma was not correct, the rest of functions/objects aren't well defined.
answered Jul 24, 2015 at 8:14
lang-sql