I want to conect a slider with different columns of data in CartoDB

Question

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>

Answer 1

The related example is this link

Basically, the main idea uses the following code with createLayers.

    if (container === "before") {
        cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/0b6b2f94-6a52-11e4-8910-0e853d047bba/viz.json')
        .addTo(map)
        .done(function(layer) {
        })
        .error(function(err) {
            console.log("error layer before : " + err);
        });

    } else {
        cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/bdeb4618-6a52-11e4-8522-0e9d821ea90d/viz.json')
        .addTo(map)
        .done(function(layer) {

        })
        .error(function(err) {
            console.log("error layer after: " + err);
        });
    }