Adding a time slider on a map

edited February 2014 in How To...

Hi all

I am rendering a the coordinates from which tweets are made on a world map. I have the time stamps of when the tweets are made. I am trying to add a time slider to the map, through which I can see only the tweets that are made at a specific time.

I am using the unfolding maps library to render the world map and the animated time range slider (which can be found at ) to add the time slider to the map.

I am unable to connect the data to the slider, meaning, all the data is displayed on the map, irrespective of the time the tweet is made. Can someone please help me out on how I can connect the data and the slider.


  • I can't see anything about filtering data on that link, I guess that's left up to you.

    just iterate through your data and only draw the items that are in range. might be an idea to sort the data in date order beforehand and use a binary chop to find the start.

  • Yes, you have to do it manually (so, what koogs said).

    What I typically do is use the Joda time library for convenience, store my date properties as DateTime, and then have a simple check if the time of my markers (e.g. your tweets) is within the range of the time slider.

    for (Marker marker : allTweetMarkers) {
      DateTime markerTime = (DateTime) marker.getProperty("dateTime");
      if (markerTime.isAfter(startDateTime) && markerTime.isBefore(endDateTime)) {
        // ...

    And then call that either in your draw method each frame, or set visibility of your markers in the timeUpdated() method of the TimeRangeSlider, e.g.

    public void timeUpdated(DateTime startDateTime, DateTime endDateTime) {
      filterMarkersByTime(startDateTime, endDateTime);
  • I am not sure what you mean by "store my date properties as DateTime" . Does it mean that you are getting the value of time at which the seek of the slider is at the moment?

    I am also not sure of where to put this code. For eg, in the code of StyledTimeRangeSliderApp, when timeRangeSlider1.draw(); is called, the seek moves the whole width of the slider without checking any conditions. I am not sure about where to check if the time of my markers is within the range of the time slider.

  • edited February 2014 Answer ✓

    I meant you could take your date properties from your tweets (which are stored in some type, I don't know, maybe String maybe Date) and convert them to DateTime for convenience. No need to do that, but as my TimeRangeSlider uses those it's very easy to compare then.

    Secondly, the drawing of the slider itself should only be changed if you want to change the style. As I wrote you could put the part where you time-compare your markers (or whatever you store the visual representations of the tweets in) into either the main draw method or into the timeUpdated() method.

  • I am still not sure about how to compare the tweet timestamp with the current start and end seek positions. Its getting hanged when I am trying to run it.

    void draw()
      TableRow row;
      Location location;
      ScreenPosition position;
      DateTime dataTime;
      DateTime startDateTime1 , endDateTime1;
      Table data1;
      data1 = loadTable("2013-02-01.csv", "header");
        int i, rowCount;
      rowCount = data1.getRowCount();
      checkBoundingBox();  // to restrict panning
      image(button, buttonX, buttonY);
     for(i = 0; i<rowCount; i++)
      { row = data1.getRow(i);
       dataTime = new DateTime(row.getInt("Year"), row.getInt("Month"), row.getInt("Date"), row.getInt("Hour"), row.getInt("Minute"), row.getInt("Second"));
       //println("tweet time :");    println(dataTime);
       startDateTime1 = timeRangeSlider1.getStartDateTime();  //returns the current start time
       endDateTime1 = timeRangeSlider1.getEndDateTime();  //returns the current end time
       if (dataTime.isAfter(startDateTime1) && dataTime.isBefore(endDateTime1)) 
          location = new Location(row.getInt("Latitude"), row.getInt("Longitude"));
          position = map.getScreenPosition(location);
          fill(200, 0, 0, 100);
          //float s = map.getZoom();
          ellipse(position.x,position.y, 3, 3);
  • Found my mistake. I initialized the start and end time of the slider incorrectly, therefore no data was ever satisfying the condition.

    Thanks a lot for the help, tnagel.

  • Good to hear.

    One note: You should do stuff like loading data only once in setup() and not in draw().

  • edited September 2014

    very good! thanks!

Sign In or Register to comment.