openlayers-timeline

openlayers-timeline copied to clipboard

h2. 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":http://volpino.github.com/openlayers-timeline/

h3. Why another timeline for OpenLayers?

I know that there are other timelines for OpenLayers like "maptimeline":http://code.google.com/p/maptimeline/ or "timemap":http://code.google.com/p/timemap/ but none of these was what i needed for "WikiTrip":http://sonetlab.fbk.eu/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.

h3. Deps

• jQuery
• jQuery-UI Slider

h3. 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 @@

• Include jQuery and jQuery-UI

• Include timeline.js @@

• create a OpenLayers Timeline object @timeline = new OpenLayers.Timeline({map: map, timeline: "#timeline", date_key: "when", format: OpenLayers.Format.GeoJSONTimeline});@

• initialize Timeline and enjoy! @timeline.initTimeline(data);@

h3. 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)

h3. Customizations

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() {...}@

h3. Contribute!

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