Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
multi layer toggle for ferzoco
<!DOCTYPE html>
<html>
<head>
<title>Layer selector example | CartoDB.js</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
background: black;
}
#layer_selector {
position: absolute;
top: 20px;
right: 20px;
padding: 0;
}
#layer_selector ul {
padding: 0; margin: 0;
list-style-type: none;
}
#layer_selector li {
border-bottom: 1px solid #999;
padding: 15px 30px;
font-family: "Helvetica", Arial;
font-size: 13px;
color: #444;
cursor: auto;
}
#layer_selector li:hover {
background-color: #F0F0F0;
cursor: pointer;
}
#layer_selector li.selected {
background-color: #EEE;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
<![endif]-->
</head>
<body>
<div id="map"></div>
<div id="layer_selector" class="cartodb-infobox">
<ul>
<li id="abc">Sunday</li>
<li id="def">Monday</li>
<li id="efg">ALL</li>
</ul>
</div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
var selectedLayer;
// create layer selector
function createSelector(layers) {
var sql = new cartodb.SQL({ user: 'andrew' });
var $options = $('#layer_selector li');
$options.click(function(e) {
// get the area of the selected layer
var $li = $(e.target);
var layer = $li.attr('id');
if(selectedLayer != layer ){
// definitely more elegant ways to do this, but went for
// ease of understanding
if (layer == 'abc'){
layers.getSubLayer(0).show();
layers.getSubLayer(1).show();
layers.getSubLayer(2).hide();
layers.getSubLayer(3).hide();
}
else if (layer=='def'){
layers.getSubLayer(2).show();
layers.getSubLayer(3).show();
layers.getSubLayer(0).hide();
layers.getSubLayer(1).hide();
}
else {
layers.getSubLayer(2).show();
layers.getSubLayer(3).show();
layers.getSubLayer(0).show();
layers.getSubLayer(1).show();
}
}
});
}
var layerN = {};
function main() {
selectedStyle = $('li.selected').attr('id');
cartodb.createVis('map', 'http://team.cartodb.com/api/v2/viz/011f163e-a753-11e4-a1a8-0e018d66dc29/viz.json')
.done(function(vis,layers) {
createSelector(layers[1]);
layers[1].getSubLayer(0).hide();
layers[1].getSubLayer(1).hide();
})
.error(function(err) {
console.log(err);
});
}
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment