2

I once again have a question regarding this map project I'm working on. I'm trying to add a time slider to my CartoDB map, and the slider appears, but instead of displaying the correct dates and the appropriate information, it's picking random dates. I've verified within CartoDB directly that the SQL query is correct. Below is my code - any thoughts? I feel it's probably something really simple that I'm missing, like a missed capital letter or something.

Thanks!

<script> 
  function changeLegend(start) {
    $('#legend').html(new Date(start))
    }
  function addTimeSlider(sublayer) {
         var sql = cartodb.SQL({ user: 'ssci582-user12' })
         // fetch time range
         sql.execute('SELECT max(date), min(date) FROM History', function(data) {
           var range = data.rows[0];
           var max = new Date(range.max).getTime()
           var min = new Date(range.min).getTime()
           // update slider with range
             $("#slider").slider({
              range: true,
              min: min,
              max: max,
              values: [ min , max],
              change: function(event, ui) {
                // give feedback to the user on slide change
                changeLegend(ui.values[0], ui.values[1]);
              },
              stop: function( event, ui ) {
                // when user selects the dates, update the layer with the range
                var start = new Date(ui.values[0]).toISOString()
                var end = new Date(ui.values[1]).toISOString();

                // build sql
                sublayer.setSQL("SQL QUERY GOES HERE" [i've already verified it's correct]);
                }
            });

                changeLegend(min, max);
         });
     }

function main() {
    var map;

    cartodb.createVis('map', 'http://[username]/api/v2/viz/...json', {
    shareable: true,
    title: true,
    description: false,
    layer_selector: true,
    center_lat: 35.79, 
    center_lon: -78.65,
    zoom: 10
})

.done(function(vis, layers) {

    layers[1].setInteraction(true);
    layers[1].on('featureOver', function(e, pos, latlng, data) {
        cartodb.log.log(e, pos, latlng, data);
    });

    var vislayers = vis.getLayers();
    addTimeSlider(vislayers[1].getSubLayer(0));
    map = vis.getNativeMap();

    })

    .error(function(err) {
        console.log(err);
    });

} 
window.onload = main;
1

Perhaps did you forgot to separe variable declarations?

I point to this:

var max = new Date(range.max).getTime() var min = new Date(range.min).getTime()

and

var start = new Date(ui.values[0]).toISOString() var end = new Date(ui.values[1]).toISOString();

There are no ; separating both sentences.

PS: I couldn't debug it because there was no viz.json UUID

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.