0

I'm trying to create a map with a time slider, basically duplicating this example: http://bl.ocks.org/javisantana/f9b073869fdd3b696f93. I must not be entering in my info correctly because when I copy the code and change it to my map, the time slider does not appear. In the script section of the code, I've changed the user from 'documentation' to 'phrusa' (my username), changed the column 'built' to 'date_stamp' (my column that specifies date), 'us_po_offices' to my table name, and I've put the link for my map's api, but I can't figure out what else I need to change to fit my table/data. Do I need to change "Date" or "FullYear" or "Time" to have the slider interact with my data?

I've pasted the code I'm trying to use below:

<script>

  function changeLegend(start, end) {
      $('#legend').html(new Date(start).getFullYear() + " - " + new Date(end).getFullYear())
  }
  function addTimeSlider(sublayer) {
     var sql = cartodb.SQL({ user: 'phrusa' })
     // fetch time range
     sql.execute('select max(date_stamp), min(date_stamp) from tablename', 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 , (min + max)/2 ],
          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("select * from tablename where date_stamp >= '" + start + "' and date_stamp <= '" + end + "'");
          }
        });
        changeLegend(min, (min + max)/ 2);
     });
  }

  function main() {

    var map = new L.Map('map', {
      zoomControl: false,
      center: [35, 40],
      zoom: 3
    });

    L.tileLayer('http://{s}.api.cartocdn.com/base-light/{z}/{x}/{y}.png', {
      attribution: 'CartoDB · OSM data'
    }).addTo(map);

    cartodb.createLayer(map, 'http://phrusa.cartodb.com/api/v2/viz/...../viz.json', { legends: false })
     .addTo(map)
     .on('done', function(layer) {
       // add time slider on change
       addTimeSlider(layer.getSubLayer(0));
    }).on('error', function() {
      cartodb.log.log("some error occurred");
    });
  }

  // you could use $(window).load(main);
  window.onload = main;
</script>
2

Without viewing your data I can't tell what data type your column "date_stamp" is formatted to. In the example you cite the table's column "built" is formatted to be a date type. If you are using a different format for date such as an integer for a unix time stamp you would have to change your code to accommodate that data type. Otherwise I'd recommend checking to make sure your table's column is formatted to the date type.

  • date_stamp is formattted as a date. I just went back and tried it again using the code I posted above, and it worked. I must have just mistyped something. Thanks! – user25917 Mar 24 '14 at 17:40

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.