Skip to content

Latest commit

 

History

History
100 lines (69 loc) · 3.86 KB

README.textile

File metadata and controls

100 lines (69 loc) · 3.86 KB
Raw

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.

Deps

  • 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!
    timeline.initTimeline(data);

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)

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

Contribute!

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