1

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>

  • 1
    Welcome to GIS Stack Exchange :) I think the code formatting is messed up. When in edit mode select the code text and use Ctrl-K to indent (and keep an eye on preview to see if results are correct). – matt wilkie Feb 19 '15 at 16:46
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);
        });
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.