Plugin for OpenLayers to show GeoJSON/GeoRSS data on the map through time. Cluster strategy support for huge datasets
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
css georss support Aug 5, 2011


OpenLayers Timeline

OpenLayers Timeline is a simple library to create a time related map with OpenLayers.
It supports cluster strategy (OpenLayers.Strategy.Cluster) and time filtering.
Currently it supports source data in GeoJSON or GeoRSS format.

See a demo

Why another timeline for OpenLayers?

I know that there are other timelines for OpenLayers like maptimeline or timemap but none of these was what i needed for WikiTrip
They are both based on Simile Timeline, which is really cool, but they don’t support cluster strategy and they are extremely slow with huge amount of data (>1000 points).
OpenLayers-Timeline supports huge datasets (tested with 15000 points) and cluster strategy for displaying data which is really cool and insightful.
Moreover it offers a collection of standard data formats for OpenLayers with time context support.


  • jQuery
  • jQuery-UI Slider

Basic Usage

  • Setup a basic page with an OpenLayers Map (see demos for examples)
  • Include the plugin for the format that you’re going to use
    <script src="lib/OpenLayers.Format.GeoJSONTimeline.js" type="text/javascript"></script>
  • Include jQuery and jQuery-UI
  • Include timeline.js
    <script src="timeline.js" type="text/javascript"></script>
  • create a OpenLayers Timeline object
    timeline = new OpenLayers.Timeline({map: map, timeline: "#timeline", date_key: "when", format: OpenLayers.Format.GeoJSONTimeline});
  • initialize Timeline and enjoy!

API Documentation

OpenLayers Timeline offers new data formats that can be used in OpenLayers without OpenLayers Timeline.
They add time support to existing data formats.

  • OpenLayers.Format.GeoJSONTimeline: subclass of OpenLayers.Format.GeoJSON.
  • OpenLayers.Format.GeoRSSTimeline: subclass of OpenLayers.Format.GeoRSS.
  • OpenLayers.Timeline
    • constructor options:
      • map: OpenLayers.Map object
      • timeline: id for the slider container
      • date_key: name of the field that contains a date value for the item (can be an XML tag name or a JSON field name)
      • date_funct: function to convert date value to UNIX timestamp (number of seconds from 1970/01/01). Optional
      • format: data format to use (e.g.: OpenLayers.Format.GeoJSONTimeline).
    • methods:
      • initTimeline(data): initializes the timeline with data. data must be in the format specified in the constructor.
      • animateBar(): starts timeline animation
      • stopBar(): stops timeline animation
      • togglePlay(): play/pause animation
      • fasterAnimation(): make animation faster
      • slowerAnimation(): make animation slower
      • getBarValue(): get timeline value (0-100)
      • setBarValue(): set timeline value (0-100)
      • getCurrentTime(): get UNIX timestamp of displayed data
      • getCurrentSpeed(): get a string with the current animation speed
      • update(): refreshes displayed data
    • properties:
      • cumulative: display data in cumulative or instantaneous view (Boolean)
      • speeds: strings with speeds strings (Strings array)
      • timedelta: delta (in seconds) for non cumulative view (default: 6 months) (Integer)


You can easily customize this plugin to fit your needs. Here’s some examples:

  • Make visualization non cumulative:
    timeline.cumulative = false;
  • Customize speeds names:
    timeline.speeds = ["Slow", "Normal", "Fast"];
  • Change time slice for non cumulative view:
    timeline.timedelta = 86400 //one day
  • Change map style:
    timeline.defaultStyle = new OpenLayers.Style({...})
  • redefine popup on feature clicking (see original function for an example):
    timeline.onFeatureSelect = function() {...}


Feel free to fork, report bugs, send patches or suggestions :D