110 lines
4.6 KiB
HTML
110 lines
4.6 KiB
HTML
|
<!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>Basic Example, Google v2, Timeline v1.2</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="../lib/jquery-1.6.2.min.js"></script>
|
||
|
|
<script type="text/javascript" src="../lib/mxn/mxn.js?(google)"></script>
|
||
|
|
<script type="text/javascript" src="../lib/timeline-1.2.js"></script>
|
||
|
|
<script src="../src/timemap.js" type="text/javascript"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
var tm;
|
||
|
|
$(function() {
|
||
|
|
|
||
|
|
tm = TimeMap.init({
|
||
|
|
mapId: "map", // Id of map div element (required)
|
||
|
|
timelineId: "timeline", // Id of timeline div element (required)
|
||
|
|
options: {
|
||
|
|
mapType: "physical",
|
||
|
|
eventIconPath: "../images/"
|
||
|
|
},
|
||
|
|
datasets: [
|
||
|
|
{
|
||
|
|
id: "artists",
|
||
|
|
title: "Artists",
|
||
|
|
theme: "orange",
|
||
|
|
// note that the lines below are now the preferred syntax
|
||
|
|
type: "basic",
|
||
|
|
options: {
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
"start" : "1449",
|
||
|
|
"end" : "1494-01-11",
|
||
|
|
"point" : {
|
||
|
|
"lat" : 43.7717,
|
||
|
|
"lon" : 11.2536
|
||
|
|
},
|
||
|
|
"title" : "Domenico Ghirlandaio",
|
||
|
|
"options" : {
|
||
|
|
// set the full HTML for the info window
|
||
|
|
"infoHtml": "<div class='custominfostyle'><b>Domenico Ghirlandaio</b> was a visual artist of some sort.</div>"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"start" : "1452",
|
||
|
|
"end" : "1519",
|
||
|
|
"point" : {
|
||
|
|
"lat" : 43.8166666667,
|
||
|
|
"lon" : 10.7666666667
|
||
|
|
},
|
||
|
|
"title" : "Leonardo da Vinci",
|
||
|
|
"options" : {
|
||
|
|
// load HTML from another file via AJAX
|
||
|
|
// Note that this may break in IE if you're running it with
|
||
|
|
// a local file, due to cross-site scripting restrictions
|
||
|
|
"infoUrl": "ajax_content.html",
|
||
|
|
"theme": "red"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"start" : "1475",
|
||
|
|
"end" : "1564",
|
||
|
|
"point" : {
|
||
|
|
"lat" : 43.6433,
|
||
|
|
"lon" : 11.9875
|
||
|
|
},
|
||
|
|
"title" : "Michelangelo",
|
||
|
|
"options" : {
|
||
|
|
// use the default title/description info window
|
||
|
|
"description": "Renaissance Man",
|
||
|
|
"theme": "yellow"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
bandIntervals: [
|
||
|
|
Timeline.DateTime.DECADE,
|
||
|
|
Timeline.DateTime.CENTURY
|
||
|
|
]
|
||
|
|
});
|
||
|
|
// manipulate the timemap further here if you like
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<link href="examples.css" type="text/css" rel="stylesheet"/>
|
||
|
|
<style>
|
||
|
|
div#timelinecontainer{ height: 300px; }
|
||
|
|
div#mapcontainer{ height: 300px; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="help">
|
||
|
|
<h1>Basic Example, Google v2, Timeline v1.2</h1>
|
||
|
|
In this example, we're just directly entering the data in the javascript, loading content into the info window in several different ways. (Note that Leonardo's window, which loads content via AJAX, may throw an error or not show up if you're viewing this locally, due to cross-site scripting restrictions.) This example uses the 1.2 version of the SIMILE Timeline API included with the timemap.js distribution, which has less functionality than later versions but is a much smaller download.
|
||
|
|
</div>
|
||
|
|
<div id="timemap">
|
||
|
|
<div id="timelinecontainer">
|
||
|
|
<div id="timeline"></div>
|
||
|
|
</div>
|
||
|
|
<div id="mapcontainer">
|
||
|
|
<div id="map"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|