What's new? | Help | Directory | Sign in
Google
                
Search
for
Updated Mar 14, 2008 by nick.rabinowitz
Labels: Featured
BasicUsage  
Basic usage for the TimeMap library.

The easiest way to get the script working may be to copy code from the artist mashup. But here's a quick primer that might also help:

The page should look something like this (though of course you can put other things in here besides just the map and timeline if you want):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Map Timeline Mashup</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=[API-KEY]" type="text/javascript"></script>
    <script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>
    <script src="timemap-1.0.js" type="text/javascript"></script>
    <link href="your-css-file.css" type="text/css" rel="stylesheet"/>
  </head>
  <body onLoad="onLoad()" onunload="GUnload();">
    <div id="timelinecontainer">
      <div id="timeline"></div>
    </div>
    <div id="mapcontainer">
      <div id="map"></div>
    </div>
  </body>
</html>
function onLoad() {

    // Make a new TimeMap object, passing the ids of the map and timeline DOM elements.
    // This will initialize the map.
    var tm = new TimeMap(
        document.getElementById("timeline"), 
        document.getElementById("map"),
        {}
    );

    // Make a new dataset with the id "sample" and green markers.
    // You can load multiple datasets with different visual themes.
    var sample = tm.createDataset("sample", {
        title:  "Sample",
        theme:  TimeMapDataset.greenTheme()
    });

    // Create band information for the timeline as you would for any SIMILE timeline,
    // but using the eventSource from the dataset object.
    // See http://simile.mit.edu/timeline/docs/ for more info.
    var bands = [
        Timeline.createBandInfo({
            eventSource:    sample.eventSource,
            width:          "100%",
            intervalPixels: 100,
            intervalUnit:   Timeline.DateTime.DAY
        })
    ];

    // Initialize the timeline with the band info
    tm.initTimeline(bands);

    /*
     * LOAD YOUR DATA HERE
     */

} // end onLoad()
To load JSON, use something like the following code:
    // Data should be an array of objects - see the code comments for format details
    sample.loadItems(items);

    // scroll to a given date - this is often necessary to make the timeline events appear
    var latestDate = sample.eventSource.getLatestDate();
    tm.timeline.getBand(0).setCenterVisibleDate(latestDate);
    // this line may be necessary if your events don't appear on the timeline
    tm.timeline.layout();
To load KML data, use a dowload-and-callback function, like this:
    // Load a KML file with TimeStamp and TimeSpan elements
    GDownloadUrl("sample.kml", function(result) {
        var data = TimeMapDataset.parseKML(result);
        sample.loadItems(data);
        tm.timeline.getBand(0).setCenterVisibleDate(sample.eventSource.getLatestDate());
        // this line may be necessary if your events don't appear on the timeline
        tm.timeline.layout();
    });

Troubleshooting

tm.timeline.layout();
For example, this may be necessary if you want to scroll to the latest date, and the latest date is now - this is the default, so the timeline may not scroll anywhere in this case.
var test = {
  title: "Test title",
  description: "A description!", // <--- problem comma
} // <--- missing semicolon
needs to be this:
var test = {
  title: "Test title",
  description: "A description!"
};


Sign in to add a comment