I am writing a map with CartoDB, and I would like to connect a slider with a select layer. It is a slider of four points (2010-2011-2012-2013). I want to connect the result of slider with the correspond column of database: data_2010; data_2011; data_2012 and data_2013 I am not sure if there is a function to do this, or if I have to use different layers in CartoDB, one to each data column. This is the code:
Time Slider | CartoDB.js html, body, #map { height: 100%; padding: 0; margin: 0; } #slider-range-max { position: absolute; bottom: 40px; right: 850px; left:110px; }
#legend {
font-family: serif;
font-size: 27px;
position: absolute;
bottom: 100px;
left: 100px;
}
#legend2 {
font-family: serif;
font-size: 27px;
position: absolute;
bottom: 70px;
left: 100px;
}
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
$(function() { $('#legend').html("Chile - Years") $('#legend2').html("" + 2010 + " --- " + 2011 + " --- " + 2012 + " --- " + 2013) $( "#slider-range-max" ).slider({ range: "max", min: 2010, max: 2013, value: 2010, slide: function( event, ui ) { $( "#amount" ).val( ui.value ); } }); $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) ); });
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
function main() {
var map = new L.Map('map', {
center: [-39.66841891894786, -60.96533203125],
zoom: 4
});
L.tileLayer('http://{s}.api.cartocdn.com/base-light/{z}/{x}/{y}.png', {
attribution: 'CartoDB · Juan Moises de la Serna'
}).addTo(map);
cartodb.createLayer(map, 'http://juanmoises.cartodb.com/api/v2/viz/84a61b7e-b39c-11e4-bb07-0e853d047bba/viz.json', { legends: true })
.addTo(map)
.on('done', function(layer) {
}).on('error', function() {
cartodb.log.log("some error occurred");
});
}
// you could use $(window).load(main);
window.onload = main;
</script>
Ctrl-K
to indent (and keep an eye on preview to see if results are correct).