Timemap.js Examples
Basic Examples
How to load and display data from different sources.
- Basic Example, Timeline v.1.2
- Demonstrates: Loading inline data, several ways to load infowindow content.
- Basic Example, Local Timeline v.1.2
- Demonstrates: Using the included local copy of SIMILE Timeline v.1.2.
- Basic Example, Local Timeline v.2.3.0
- Demonstrates: Using the included local copy of SIMILE Timeline v.2.3.0
- Basic Example, Timeline v.2.2.0
- Demonstrates: Using SIMILE Timeline v.2.2.0
- Kenya KML Example
- Demonstrates: Loading data using KML, setting bandInfo to customize the timeline.
- Google Spreadsheet Example
- Demonstrates: Loading remote JSON data, in this case from a Google Spreadsheet
- Earthquake GeoRSS Example
- Demonstrates: Loading data using GeoRSS
More Involved Examples
How to do more interesting stuff with loaded data.
- Google Spreadsheet Example, Arbitrary Columns
- Demonstrates: Loading Google Spreadsheet data with additional non-standard columns.
- KML Example: Loading ExtendedData
- Demonstrates: Loading arbitrary data in KML using ExtendedData elements, setting themes in KML.
- Renaissance Artists and Authors Example
- Demonstrates: Loading data from Freebase.com, hiding and showing datasets
- Filter Example
- Demonstrates: Using filter chains to filter on custom criteria
- Progressive Loading
- Demonstrates: Using the progressive loader to load additional data as the timeline is scrolled
- State Loading
- Demonstrates: Loading timemap state (map position, timeline position, etc) via the hash portion of the URL.
Advanced Examples
Some complicated stuff to give you an idea of what the library can be used for.
- Temporal Heatmap from a Google Spreadsheet
- Demonstrates: Sizing icons over time according to a particular data element, consolidating rows from a Google Spreadsheet into single items.
- Timemap Synchronized with Google Earth
- Demonstrates: What it says :).
- Flickr Photos with Pathlines
- Demonstrates: Loading JSON data from Flickr, using filters to add lines between points
- Polygon Tweening
- Demonstrates: Using filters to tween polygons over time
Note: Some browsers, notably Google Chrome 5+, will not run all of these examples locally, because of security restrictions around loading local files. Take a look at the online version if you have any problems.