// Leaflet.timeline example with string dates

​

// Learn more about leaflet.timeline on GitHub:

//  https://github.com/skeate/Leaflet.timeline

​

$(document).ready(function () {

  var map = L.map('map').setView([40.70, -73.96], 11);

​

  L.tileLayer('https://{s}.tiles.mapbox.com/v3/ebrelsford.ho06j5h0/{z}/{x}/{y}.png', {

    noWrap: true,

    maxZoom: 18,

    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="http://mapbox.com">Mapbox</a>'

  }).addTo(map);

​

  /*

   * Create our time slider. We give it a format for the dates that it

   * will display underneath it. 'YYYY-MM-DD' means "year-month-day". If

   * you want to customize this see the moment.js documentation:

   *   http://momentjs.com/docs/#/displaying/

   */

  var slider = L.timelineSliderControl({

    formatOutput: function(date){

      return moment(date).format("YYYY-MM-DD");

    }

  });

  map.addControl(slider);

​

  /*

   * Select our data from CartoDB. I'll reformat it here for clarity:

   *   SELECT *, date AS start, date + interval '1 days' AS end 

   *   FROM nypd_motor_vehicle_collisions_june_2015

   *   WHERE the_geom IS NOT NULL AND borough = ''

   *

   * This is selecting crashes (nypd_motor_vehicle_collisions_june_2015) where

   * the borough is empty. It is selecting all of the columns (*) and adding two

   * new columns:

   *  - The first is called 'start'. This is the date of the crash. You need

   *    a column named 'start' for Leaflet.timeline to work.

   *  - The second is called 'end'. This is when we want the crash to disappear

   *    from the map. We're adding 1 day(s) to the crashes so they stick around

   *    for a while. If you have a real end date you would probably want to use

   *    that.

   */

  var sql = "SELECT *, date AS start, date + interval '1 days' AS end FROM nypd_motor_vehicle_collisions_june_2015 WHERE the_geom IS NOT NULL AND borough = ''";

  var url = 'http://eric.cartodb.com/api/v1/sql?' + $.param({

    format: 'geojson',

    q: sql

  });

​

  /*

   * Actually get the data from CartoDB now that we have an SQL statement that works.

   */

  $.getJSON(url, function (data) {

​

    /*

     * Once the data loads, create an L.timeline. This replaces L.geoJson.

     */

    var timeline = L.timeline(data, {

​

      /*

       * Add a popup to each "layer" (shape in the GeoJSON),

       * in this case the popup simply contains the contributing_factor_vehicle_1 property.

       */

      onEachFeature: function (feature, layer) {

        layer.bindPopup(feature.properties.contributing_factor_vehicle_1);

      },

​

      /*

       * Style the points as circles. This is where you could style the circles differently

       * based on properties in the data parameter, but we're not going to do that here.

       */

      pointToLayer: function(data, latlng) {

        return L.circleMarker(latlng, {

          radius: 10,

          stroke: false,

          fillColor: 'red'

        });

      }

    });

​

    /*

     * Add the timeline to the map. This will display the data.

     */

    timeline.addTo(map);

​

    /*

     * Add the timeline to the slider. This will make it so we can press 'play'.

     */

    slider.addTimelines(timeline);

  });

});