ciaranlee.github.com/timemap.html at master · ciaranlee/ciaranlee.github.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Kenya KML Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAASI0kCI-azC8RgbOZzWc3VRRarOQe_TKf_51Omf6UUSOFm7EABRRhO0PO4nBAO9FCmVDuowVwROLo3w"
      type="text/javascript"></script>
    <script type="text/javascript" src="http://static.simile.mit.edu/timeline/api/timeline-api.js"></script>
    <script src="../timemap.js" type="text/javascript"></script>
    <script src="../kmlparser.js" type="text/javascript"></script>
	<script type="text/javascript">

function onLoad() {
    TimeMap.init({
        mapId: "map",               // Id of map div element (required)
        timelineId: "timeline",     // Id of timeline div element (required)
        datasets: [
            {
                title: "Violence in Kenya",
                theme: TimeMapDataset.redTheme({eventIconPath: '../images/'}),
                data: {
                    type: "kml",     // Data to be loaded in KML - must be a local URL
                    url: "kenya.kml" // KML file to load
                }
            }
        ],
        bandInfo: [
            {
               width:          "85%",
               intervalUnit:   Timeline.DateTime.DAY,
		       intervalPixels: 210
            },
            {
               width:          "15%",
               intervalUnit:   Timeline.DateTime.WEEK,
		       intervalPixels: 150,
               showEventText:  false,
               trackHeight:    0.2,
               trackGap:       0.2
            }
        ]
    });
}
    </script>
	<link href="examples.css" type="text/css" rel="stylesheet"/>
    <style>
    div#timelinecontainer{ height: 310px; }
    div#mapcontainer{ height: 300px; }
    </style>
  </head>

  <body onload="onLoad();" onunload="GUnload();">
    <div id="help">
    <h1>KML Dataset</h1>
    In this example, we're loading a KML file of reports of violence in Kenya (data courtesy <a href="http://www.ushahidi.com">www.ushahidi.com</a>). The bandInfo setting allows us to set a custom layout the timeline, and we've resized the timeline and map with CSS. (Note that IE will throw an error if if you're viewing this locally, due to cross-site scripting restrictions.)
    </div>
    <div id="timemap">
        <div id="timelinecontainer">
          <div id="timeline"></div>
        </div>
        <div id="mapcontainer">
          <div id="map"></div>
        </div>
    </div>
  </body>
</html>