Skip to content

Instantly share code, notes, and snippets.

@wboykinm
Created January 17, 2013 03:09
Show Gist options
  • Save wboykinm/4553219 to your computer and use it in GitHub Desktop.
Save wboykinm/4553219 to your computer and use it in GitHub Desktop.
selector cartodb
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
#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 #999999;
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/v2/themes/css/cartodb.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
<![endif]-->
</head>
<body>
<div id="map"></div>
<div id="layer_selector" class="cartodb_infobox">
<ul>
<li data="all" class="selected">All countries</li>
<li data="1000">area >1000 km<sup>2</sup></li>
<li data="6000">area >6000 km<sup>2</sup></li>
<li data="10000">area >10000 km<sup>2</sup></li>
<li data="50000">area >50000 km<sup>2</sup></li>
</ul>
</div>
</body>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
<script>
// create layer selector
function createSelector(layer) {
var sql = new cartodb.SQL({ user: 'examples' });
var $options = $('#layer_selector li');
$options.click(function(e) {
// get the area of the selected layer
var $li = $(e.target);
var area = $li.attr('data');
// deselect all and select the clicked one
$options.removeClass('selected');
$li.addClass('selected');
// create query based on data from the layer
var query = "select * from european_countries_e";
if(area !== 'all') {
query = "select * from european_countries_e where area > " + area;
}
// change the query in the layer to update the map
layer.setQuery(query);
});
}
function main() {
cartodb.createVis('map', 'http://examples.cartodb.com/api/v1/viz/european_countries_e/viz.json', {
tiles_loader: true,
center_lat: 50,
center_lon: 20,
zoom: 3
})
.done(function(vis, layers) {
// layer 0 is the base layer, layer 1 is cartodb layer
createSelector(layers[1])
})
.error(function(err) {
console.log(err);
});
}
window.onload = main;
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment