Skip to content

Instantly share code, notes, and snippets.

@oriolbx

oriolbx/index.html

Last active November 2, 2015 11:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oriolbx/14786cdd2dca51f4ec9c to your computer and use it in GitHub Desktop.
Save oriolbx/14786cdd2dca51f4ec9c to your computer and use it in GitHub Desktop.
Download ZIP
layer selector with buttons createLayer()
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
#layer_selector {
position: absolute;
top: 100px;
right: 20px;
padding-left: 30px;
}
#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;
background-color: #FFF;
}
#layer_selector li:hover {
background-color: #F0F0F0;
cursor: pointer;
}
#layer_selector li.selected {
background-color: #F0F0F0;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- Different way to create the botton list -->
<div id='layer_selector'>
<ul>
<li><a href="#spain" id="spain" class="button spain">Spain</a></li>
<li><a href="#france" id="france" class="button france">France</a></li>
<li><a href="#portugal" id="portugal" class="button portugal">Portugal</a></li>
<li><a href="#italy" id="italy" class="button italy">Italy</a></li>
<li><a href="#greece" id="greece" class="button greece">Greece</a></li>
<li><a href="#all" id="all" class="button all">All</a></li>
</ul>
</div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
function main() {
var map = L.map('map', {
zoomControl: true,
center: [20, 20],
zoom: 2
});
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'}).addTo(map);
var sublayers = [];
cartodb.createLayer(map, 'https://team.cartodb.com/u/oboix/api/v2/viz/e64f2796-6cd6-11e5-bb1b-0ecfd53eb7d3/viz.json')
.addTo(map)
.on('done', function(layer) {
var subLayerOptions = {
sql: "SELECT * FROM european_1",
cartocss: "#european_1{polygon-fill: #F84F40; line-color: #000; }"
}
var sublayer = layer.getSubLayer(0);
sublayer.set(subLayerOptions);
sublayers.push(sublayer);
});
var LayerActions = {
spain: function(){
sublayers[0].setSQL("SELECT * FROM european_1 WHERE admin ILIKE 'Spain' ");
sublayers[0].setCartoCSS('#european_1{polygon-fill: #c8fc55; line-color: white; }');
return true;
},
france: function(){
sublayers[0].setSQL("SELECT * FROM european_1 WHERE admin ILIKE 'France' ");
sublayers[0].setCartoCSS('#european_1{polygon-fill: #39b754; line-color: white; }');
return true;
},
italy: function(){
sublayers[0].setSQL("SELECT * FROM european_1 WHERE admin ILIKE 'Italy'");
sublayers[0].setCartoCSS('#european_1{polygon-fill: #83cef4; line-color: white; }');
return true;
},
portugal: function(){
sublayers[0].setSQL("SELECT * FROM european_1 WHERE admin ILIKE 'Portugal'");
sublayers[0].setCartoCSS('#european_1{polygon-fill: #8a307f; line-color: white; }');
return true;
},
greece: function(){
sublayers[0].setSQL("SELECT * FROM european_1 WHERE admin ILIKE 'Greece'");
sublayers[0].setCartoCSS('#european_1{polygon-fill: #fc9f58; line-color: white; }');
return true;
},
all: function(){
sublayers[0].setSQL("SELECT * FROM european_1");
sublayers[0].setCartoCSS('#european_1{polygon-fill: #fc9f58; line-color: white; }');
return true;
}
}
$('.button').click(function() {
$('.button').removeClass('selected');
$(this).addClass('selected');
LayerActions[$(this).attr('id')]();
});
}
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment