Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Plugin for OpenLayers to show GeoJSON/GeoRSS data on the map through time. Cluster strategy support for huge datasets
JavaScript
branch: master

fixing code style, changing tabs to spaces, fixing popup for single f…

…eature, removing fix to auto-close popups
latest commit 6e34803c26
@volpino authored
Failed to load latest commit information.
css georss support
data fixing code style, changing tabs to spaces, fixing popup for single f…
lib fixing code style, changing tabs to spaces, fixing popup for single f…
LICENSE docs
README.textile readme
geojson.html docs
georss.html fixing code style, changing tabs to spaces, fixing popup for single f…
index.html Added kml example, all examples are working but labels are wrong in with
kml.html fixing code style, changing tabs to spaces, fixing popup for single f…
timeline.js

README.textile

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

Something went wrong with that request. Please try again.