remove examples
This commit is contained in:
wlx
parent
7ae708bb53
commit
ea9552d465
|
|
@ -1 +0,0 @@
|
|||
<div style="font-size:12px;"><div style="padding: 5px; width: 130px; height: 130px;float:left"><img src="http://www.freebase.com/api/trans/image_thumb/guid/9202a8c04000641f8000000004a72672?maxheight=120&maxwidth=120"></div><b>Leonardo di ser Piero da Vinci</b> was a prominent Italian polymath: scientist, mathematician, engineer, inventor, anatomist, painter, sculptor, architect, musician and writer. The illegitimate son of a notary, Messer Piero, and a peasant girl, Caterina, Leonardo had no surname in the modern sense, "da Vinci" simply meaning "of Vinci": his full birth name was "Leonardo di ser Piero da Vinci", meaning "Leonardo, son of (Mes)ser Piero from Vinci."</div>
|
||||
|
|
@ -1,227 +0,0 @@
|
|||
<!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>Renaissance Artists and Authors 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="../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-2.3.0.js"></script>
|
||||
<script src="../lib/json2.pack.js" type="text/javascript"></script>
|
||||
<script src="../src/timemap.js" type="text/javascript"></script>
|
||||
<script src="../src/loaders/json.js" type="text/javascript"></script>
|
||||
<script src="../src/loaders/metaweb.js" type="text/javascript"></script>
|
||||
<script src="../src/manipulation.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var tm;
|
||||
|
||||
$(function() {
|
||||
|
||||
// These two queries are in the Metaweb Query Language syntax.
|
||||
// See http://www.freebase.com/view/freebase/api for more details.
|
||||
var artistQuery = [
|
||||
{
|
||||
"/common/topic/image" : {
|
||||
"limit" : 1,
|
||||
"id" : null,
|
||||
"optional" : true
|
||||
},
|
||||
"limit":15,
|
||||
"/people/deceased_person/date_of_death" : null,
|
||||
"/people/person/date_of_birth" : null,
|
||||
"/people/person/date_of_birth<" : "1700",
|
||||
"/people/person/date_of_birth>" : "1440",
|
||||
"/people/person/place_of_birth" : {
|
||||
"geolocation" : {
|
||||
"latitude" : null,
|
||||
"longitude" : null
|
||||
},
|
||||
"name" : null
|
||||
},
|
||||
"name" : null,
|
||||
"type" : "/visual_art/visual_artist"
|
||||
}
|
||||
];
|
||||
|
||||
var authorQuery = [
|
||||
{
|
||||
"/common/topic/image" : {
|
||||
"limit" : 1,
|
||||
"id" : null,
|
||||
"optional" : true
|
||||
},
|
||||
"limit":15,
|
||||
"/people/deceased_person/date_of_death" : null,
|
||||
"/people/person/date_of_birth" : null,
|
||||
"/people/person/date_of_birth<" : "1700",
|
||||
"/people/person/date_of_birth>" : "1440",
|
||||
"/people/person/place_of_birth" : {
|
||||
"geolocation" : {
|
||||
"latitude" : null,
|
||||
"longitude" : null
|
||||
},
|
||||
"name" : null
|
||||
},
|
||||
"name" : null,
|
||||
"type" : "/book/author"
|
||||
}
|
||||
];
|
||||
|
||||
// this is necessary for the old-style duration tape
|
||||
var theme = Timeline.ClassicTheme.create();
|
||||
theme.event.track.gap = -8;
|
||||
theme.event.tape.height = 16;
|
||||
|
||||
tm = TimeMap.init({
|
||||
mapId: "map", // Id of map div element (required)
|
||||
timelineId: "timeline", // Id of timeline div element (required)
|
||||
datasets: [
|
||||
{
|
||||
id: "artists",
|
||||
title: "Artists",
|
||||
theme: "green",
|
||||
type: "metaweb", // Data to be loaded from freebase.com
|
||||
options: {
|
||||
query: artistQuery,
|
||||
transformFunction: transformPersonData,
|
||||
classicTape: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "authors",
|
||||
title: "Authors",
|
||||
theme: "red",
|
||||
type: "metaweb", // Data to be loaded from freebase.com
|
||||
options: {
|
||||
query: authorQuery,
|
||||
transformFunction: transformPersonData,
|
||||
classicTape: true
|
||||
}
|
||||
}
|
||||
],
|
||||
bandInfo: [
|
||||
{
|
||||
width: "85%",
|
||||
intervalUnit: Timeline.DateTime.DECADE,
|
||||
intervalPixels: 200,
|
||||
theme: theme
|
||||
},
|
||||
{
|
||||
width: "15%",
|
||||
intervalUnit: Timeline.DateTime.CENTURY,
|
||||
intervalPixels: 300,
|
||||
overview: true
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function transformPersonData(data) {
|
||||
var start = data["/people/person/date_of_birth"];
|
||||
var end = data["/people/deceased_person/date_of_death"];
|
||||
var strBirth = data["/people/person/date_of_birth"].substr(0, 4);
|
||||
if (data["/people/deceased_person/date_of_death"] != null)
|
||||
var strDeath = data["/people/deceased_person/date_of_death"].substr(0, 4);
|
||||
else return null;
|
||||
var title = data["name"] + " (" + strBirth + "-" + strDeath + ")";
|
||||
var description = data["/people/person/place_of_birth"]["name"];
|
||||
var newData = {
|
||||
"title" : title,
|
||||
"start" : start,
|
||||
"end" : end,
|
||||
"options" : {
|
||||
"description" : description
|
||||
}
|
||||
};
|
||||
var lat = parseFloat(data["/people/person/place_of_birth"]["geolocation"]["latitude"]);
|
||||
var lon = parseFloat(data["/people/person/place_of_birth"]["geolocation"]["longitude"]);
|
||||
newData["point"] = {
|
||||
"lat" : lat,
|
||||
"lon" : lon
|
||||
};
|
||||
if ("/common/topic/image" in data && data["/common/topic/image"] != null) {
|
||||
var imageUrl = "http://www.freebase.com/api/trans/image_thumb" +
|
||||
data["/common/topic/image"]["id"] +
|
||||
"?maxheight=120&maxwidth=120";
|
||||
var infoHtml = '<div class="infotitle"><b>' + title + '</b></div>';
|
||||
infoHtml += '<div style="padding:5px;width:130px;height:130px;"><img src="' + imageUrl + '"></div>';
|
||||
newData["options"]["infoHtml"] = infoHtml;
|
||||
}
|
||||
return newData;
|
||||
}
|
||||
|
||||
// toggle the visibility of a dataset
|
||||
function toggleDataset(dsid, toggle) {
|
||||
if (toggle) {
|
||||
tm.datasets[dsid].show();
|
||||
} else {
|
||||
tm.datasets[dsid].hide();
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<link href="examples.css" type="text/css" rel="stylesheet"/>
|
||||
<style>
|
||||
div#timelinecontainer{
|
||||
height: 300px;
|
||||
|
||||
}
|
||||
div#mapcontainer{ height: 300px; }
|
||||
div#fblicense {
|
||||
font-size: x-small;
|
||||
float: right;
|
||||
padding: 1em;
|
||||
margin-top: 28px;
|
||||
}
|
||||
span#artbox {
|
||||
color: #FFFFFF;
|
||||
font-weight: bold;
|
||||
background: #19CF54;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
margin: 4px;
|
||||
}
|
||||
span#authbox {
|
||||
color: #FFFFFF;
|
||||
font-weight: bold;
|
||||
background: #FE766A;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
margin: 4px;
|
||||
}
|
||||
/* This is necessary to get old-style duration events */
|
||||
.timeline-event-label {
|
||||
margin-top: -15px;
|
||||
margin-left: 4px;
|
||||
line-height: 12px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="fblicense"> <img src="http://www.freebase.com/api/trans/raw/freebase/attribution" style="float:left; margin-right: 5px" /> <div style="margin-left:30px"> Source: <a href="http://www.freebase.com" title="Freebase – The World's Database">Freebase</a> - The World's Database <br/> Freely licensed under <a href="http://www.freebase.com/view/common/license/cc_attribution_25">CC-BY</a>. </div> </div>
|
||||
|
||||
<div id="help">
|
||||
<h1>Metaweb Datasets</h1>
|
||||
<p>In this example, we're loading two Metaweb datasets from freebase.com. Toggle boxes like the ones below might be one way to deal with large datasets, which can be difficult to show on the timeline.</p>
|
||||
|
||||
<p>Show:
|
||||
<span id="artbox"><input type="checkbox" onclick="toggleDataset('artists', this.checked);" checked> Artists</span>
|
||||
<span id="authbox"><input type="checkbox" onclick="toggleDataset('authors', this.checked);" checked> Authors</span>
|
||||
</p>
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,133 +0,0 @@
|
|||
<!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</title>
|
||||
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
|
||||
<script type="text/javascript" src="../lib/jquery-1.6.2.min.js"></script>
|
||||
<script type="text/javascript" src="../lib/mxn/mxn.js?(googlev3)"></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() {
|
||||
|
||||
// make a custom map style
|
||||
var styledMapType = new google.maps.StyledMapType([
|
||||
{
|
||||
featureType: "water",
|
||||
elementType: "all",
|
||||
stylers: [
|
||||
{ saturation: 0 },
|
||||
{ lightness: 100 }
|
||||
]
|
||||
},
|
||||
{
|
||||
featureType: "all",
|
||||
elementType: "all",
|
||||
stylers: [
|
||||
{ saturation: -100 }
|
||||
]
|
||||
}
|
||||
], {
|
||||
name: "white"
|
||||
});
|
||||
|
||||
tm = TimeMap.init({
|
||||
mapId: "map", // Id of map div element (required)
|
||||
timelineId: "timeline", // Id of timeline div element (required)
|
||||
options: {
|
||||
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
|
||||
]
|
||||
});
|
||||
|
||||
// set the map to our custom style
|
||||
var gmap = tm.getNativeMap();
|
||||
gmap.mapTypes.set("white", styledMapType);
|
||||
gmap.setMapTypeId("white");
|
||||
});
|
||||
</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 Maps v3</h1>
|
||||
This is the basic example using version 3 of the Google Maps API. This example demostrates how to set additional options on the map - in this case, a custom map style.
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
<!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, Bing Maps</title>
|
||||
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
|
||||
<script type="text/javascript" src="../lib/jquery-1.6.2.min.js"></script>
|
||||
<script type="text/javascript" src="../lib/mxn/mxn.js?(microsoft)"></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 {
|
||||
width: 800px;
|
||||
}
|
||||
div#map {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
width: 800px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="help">
|
||||
<h1>Basic Example, Bing Maps</h1>
|
||||
Same basic example, but using Microsoft's Bing Maps API. This behaves a little differently than the other APIs in Mapstraction, and info windows and click events might not be exactly what you expect. Also note that the CSS for the map container seems to be a little trickier here. To be honest, I haven't played around with this API much, but it seems to work okay.
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
<!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</title><script src="http://openlayers.org/api/OpenLayers.js"></script>
|
||||
<script type="text/javascript" src="../lib/jquery-1.6.2.min.js"></script>
|
||||
<script type="text/javascript" src="../lib/mxn/mxn.js?(openlayers)"></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: {
|
||||
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
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<link href="examples.css" type="text/css" rel="stylesheet"/>
|
||||
<style>
|
||||
div#timelinecontainer { height: 300px; }
|
||||
div#mapcontainer { height: 300px; }
|
||||
div.olFramedCloudPopupContent { width: 300px; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="help">
|
||||
<h1>Basic Example, OpenLayers</h1>
|
||||
This is the basic example using the OpenLayers API. OpenLayers is (in my opinion) neither as robust nor as fast as some of the commercial map providers, but it's very flexible and you can run it locally if you have your own tilesets.
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
<!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, Local Timeline Library</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 src="../lib/timeline-2.3.0.js" type="text/javascript"></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: {
|
||||
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, Timeline 2.3.0</h1>
|
||||
This example uses the 2.3.0 version of the SIMILE Timeline API included with the timemap.js distribution. I recommend using this local version over the online API - among other things, it's been compressed and is much smaller than the SIMILE download. Timeline 2.3.0 has some more functionality than version 1.2, and fixes a few bugs, but is a much larger download, and you may find the earlier version quicker and simpler.
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
<!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>Data Themes 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="../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-2.3.0.js"></script>
|
||||
<script src="../src/timemap.js" type="text/javascript"></script>
|
||||
<script src="../src/ext/circle_icons.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var tm;
|
||||
$(function() {
|
||||
// make some fake data
|
||||
var items = [], x;
|
||||
for (x=0; x<30; x++) {
|
||||
items.push({
|
||||
title: "Item " + x,
|
||||
start: "" + (1900 + parseInt(Math.random()*100)),
|
||||
point: {
|
||||
lat: 32 + (Math.random() * 16),
|
||||
lon: -117 + (Math.random() * 30)
|
||||
},
|
||||
options: {
|
||||
size: parseInt(Math.random()*5),
|
||||
awesomeness: parseInt(Math.random()*10)
|
||||
}
|
||||
})
|
||||
}
|
||||
// make some themes
|
||||
var colors = ["090066", "6b0051", "ce003c", "ff0020", "ff0000"]
|
||||
for (var size=0; size<5; size++) {
|
||||
for (var awe=0; awe<colors.length;awe++) {
|
||||
// Create a new theme and add it to the TimeMap.themes namespace
|
||||
// (allowing your data to refer to it by string key). You could make
|
||||
// other kinds of themes with a new TimeMapTheme() instead
|
||||
// if you wanted - the concept is the same.
|
||||
TimeMap.themes['theme' + size + '-' + awe] = TimeMapTheme.createCircleTheme({
|
||||
size: 5 + (size * 8),
|
||||
color: colors[awe]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
tm = TimeMap.init({
|
||||
mapId: "map", // Id of map div element (required)
|
||||
timelineId: "timeline", // Id of timeline div element (required)
|
||||
datasets: [
|
||||
{
|
||||
type: "basic",
|
||||
options: {
|
||||
items: items,
|
||||
infoTemplate: '<b>{{title}}</b><div>size: {{size}}</div>' +
|
||||
'<div>awesomeness: {{awesomeness}}</div>',
|
||||
// use the transformFunction to add the theme before loading
|
||||
transformFunction: function(item) {
|
||||
item.options.theme = "theme" + item.options.size +
|
||||
"-" + parseInt(item.options.awesomeness / 2); // range 0-9, colors 0-5
|
||||
return item;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
bandIntervals: 'dec'
|
||||
});
|
||||
// manipulate the timemap further here if you like
|
||||
});
|
||||
</script>
|
||||
<link href="examples.css" type="text/css" rel="stylesheet"/>
|
||||
<style>
|
||||
div#timelinecontainer{ height: 250px; }
|
||||
div#mapcontainer{ height: 350px; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="help">
|
||||
<h1>Data Themes Example</h1>
|
||||
In this example, we're setting the theme of each item based on data points in the item options. Note that this uses the ext/circle_icons.js script, not included in the packed files - but you could use the same techniques to set markers without it.
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
<!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>Earthquake GeoRSS 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="../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 src="../src/param.js" type="text/javascript"></script>
|
||||
<script src="../src/loaders/xml.js" type="text/javascript"></script>
|
||||
<script src="../src/loaders/georss.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: {eventIconPath: '../images/'},
|
||||
datasets: [
|
||||
{
|
||||
title: "Recent Earthquakes",
|
||||
theme: "red",
|
||||
type: "georss", // Data to be loaded in GeoRSS - must be a local URL
|
||||
options: {
|
||||
// GeoRSS file to load
|
||||
url: "earthquakes.rss",
|
||||
// additional tags to load
|
||||
extraTags: ['link'],
|
||||
// custom template to use the extra data
|
||||
infoTemplate: '<div class="infotitle"><a href="{{link}}">{{title}}</a></div>' +
|
||||
'<div class="infodescription">{{description}}</div>'
|
||||
}
|
||||
}
|
||||
],
|
||||
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; }
|
||||
div.infodescription { height: 130px; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="help">
|
||||
<h1>GeoRSS Dataset</h1>
|
||||
This is a timemap of earthquakes over a 30-day period, loaded via GeoRSS. Data was taken from <a href="http://earthquake.usgs.gov/" target="_blank">USGS Shakemaps</a>. This is basically a recreation of the mash-up created by <a href="http://www.oe-files.de" target="_blank">Jörn Clausen</a> that served as an inspiration for the TimeMap library. Note the use of the "extraTags" parameter to load non-standard data and display in the info window.
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
<rss version="2.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:eq="http://earthquake.usgs.gov/rss/1.0/" xmlns:georss="http://www.georss.org/georss/">
|
||||
<channel><title>USGS Earthquake ShakeMaps</title><description>List of ShakeMaps for events in the last 30 days</description><link>http://earthquake.usgs.gov/</link><dc:publisher>U.S. Geological Survey</dc:publisher><pubDate>Mon, 09 Feb 2009 22:20:02 +0000</pubDate>
|
||||
|
||||
<item><title>3.7 - 7.8 mi SW of Calexico, CA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_sc_14420076.jpg" width="100" align="left" hspace="10"/><p>Date: Mon, 09 Feb 2009 21:53:58 UTC<br/>Lat/Lon: 32.605/-115.606<br/>Depth: 16.86</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/sc/shake/14420076/</link><pubDate>Mon, 09 Feb 2009 21:57:26 +0000</pubDate><geo:lat>32.605</geo:lat><geo:long>-115.606</geo:long><dc:subject>3</dc:subject><eq:seconds>1234216438</eq:seconds><eq:depth>16.86</eq:depth><eq:region>sc</eq:region></item>
|
||||
|
||||
<item><title>3.8 - 8.5 mi SW of Calexico, CA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_sc_14420052.jpg" width="100" align="left" hspace="10"/><p>Date: Mon, 09 Feb 2009 21:10:42 UTC<br/>Lat/Lon: 32.5822/-115.599<br/>Depth: 11.79</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/sc/shake/14420052/</link><pubDate>Mon, 09 Feb 2009 22:16:49 +0000</pubDate><geo:lat>32.5822</geo:lat><geo:long>-115.599</geo:long><dc:subject>3</dc:subject><eq:seconds>1234213842</eq:seconds><eq:depth>11.79</eq:depth><eq:region>sc</eq:region></item>
|
||||
<item><title>6 - NEAR THE COAST OF NORTHERN PERU</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009cwas.jpg" width="100" align="left" hspace="10"/><p>Date: Mon, 09 Feb 2009 14:09:02 UTC<br/>Lat/Lon: -6.5668/-81.1251<br/>Depth: 15</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009cwas/</link><pubDate>Mon, 09 Feb 2009 20:36:44 +0000</pubDate><geo:lat>-6.5668</geo:lat><geo:long>-81.1251</geo:long><dc:subject>6</dc:subject><eq:seconds>1234188542</eq:seconds><eq:depth>15</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>5.6 - EASTERN NEW GUINEA REG, PAPUA NEW GUINEA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009cvax.jpg" width="100" align="left" hspace="10"/><p>Date: Sun, 08 Feb 2009 15:34:38 UTC<br/>Lat/Lon: -6.1468/147.82<br/>Depth: 56.2</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009cvax/</link><pubDate>Mon, 09 Feb 2009 16:05:11 +0000</pubDate><geo:lat>-6.1468</geo:lat><geo:long>147.82</geo:long><dc:subject>5</dc:subject><eq:seconds>1234107278</eq:seconds><eq:depth>56.2</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>5.5 - ATACAMA, CHILE</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009ctah.jpg" width="100" align="left" hspace="10"/><p>Date: Fri, 06 Feb 2009 02:58:36 UTC<br/>Lat/Lon: -27.9154/-71.0554<br/>Depth: 51.9</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009ctah/</link><pubDate>Fri, 06 Feb 2009 03:17:08 +0000</pubDate><geo:lat>-27.9154</geo:lat><geo:long>-71.0554</geo:long><dc:subject>5</dc:subject><eq:seconds>1233889116</eq:seconds><eq:depth>51.9</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>3.7 - 10.8 km (6.7 mi) S of Tres Pinos, CA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_nc_40231391.jpg" width="100" align="left" hspace="10"/><p>Date: Fri, 06 Feb 2009 00:20:29 UTC<br/>Lat/Lon: 36.6925/-121.323<br/>Depth: 4.82</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/nc/shake/40231391/</link><pubDate>Fri, 06 Feb 2009 00:47:23 +0000</pubDate><geo:lat>36.6925</geo:lat><geo:long>-121.323</geo:long><dc:subject>3</dc:subject><eq:seconds>1233879629</eq:seconds><eq:depth>4.82</eq:depth><eq:region>nc</eq:region></item>
|
||||
<item><title>6 - NEAR THE COAST OF CENTRAL PERU</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009cpa1.jpg" width="100" align="left" hspace="10"/><p>Date: Mon, 02 Feb 2009 17:53:22 UTC<br/>Lat/Lon: -13.5651/-76.5168<br/>Depth: 25.1</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009cpa1/</link><pubDate>Wed, 04 Feb 2009 15:24:49 +0000</pubDate><geo:lat>-13.5651</geo:lat><geo:long>-76.5168</geo:long><dc:subject>6</dc:subject><eq:seconds>1233597202</eq:seconds><eq:depth>25.1</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>5.8 - NEAR THE EAST COAST OF HONSHU, JAPAN</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009cmbm.jpg" width="100" align="left" hspace="10"/><p>Date: Sat, 31 Jan 2009 21:51:52 UTC<br/>Lat/Lon: 36.7189/141.156<br/>Depth: 38.4</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009cmbm/</link><pubDate>Mon, 02 Feb 2009 21:08:07 +0000</pubDate><geo:lat>36.7189</geo:lat><geo:long>141.156</geo:long><dc:subject>5</dc:subject><eq:seconds>1233438712</eq:seconds><eq:depth>38.4</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>4.4 - 15.7 mi SSW of Ridgecrest, CA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_sc_14418600.jpg" width="100" align="left" hspace="10"/><p>Date: Sat, 31 Jan 2009 21:09:22 UTC<br/>Lat/Lon: 35.4167/-117.786<br/>Depth: 7.6</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/sc/shake/14418600/</link><pubDate>Sun, 01 Feb 2009 21:22:19 +0000</pubDate><geo:lat>35.4167</geo:lat><geo:long>-117.786</geo:long><dc:subject>4</dc:subject><eq:seconds>1233436162</eq:seconds><eq:depth>7.6</eq:depth><eq:region>sc</eq:region></item>
|
||||
<item><title>3.5 - ISLAND OF HAWAII, HAWAII</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_hv_00032954.jpg" width="100" align="left" hspace="10"/><p>Date: Sat, 31 Jan 2009 05:17:06 UTC<br/>Lat/Lon: 19.3465/-155.045<br/>Depth: 9.5</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/hv/shake/00032954/</link><pubDate>Mon, 02 Feb 2009 00:41:52 +0000</pubDate><geo:lat>19.3465</geo:lat><geo:long>-155.045</geo:long><dc:subject>3</dc:subject><eq:seconds>1233379026</eq:seconds><eq:depth>9.5</eq:depth><eq:region>hv</eq:region></item>
|
||||
<item><title>4.5 - 8.1 km NE of Poulsbo, WA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_pn_01301325.jpg" width="100" align="left" hspace="10"/><p>Date: Fri, 30 Jan 2009 13:25:00 UTC<br/>Lat/Lon: 47.786/-122.569<br/>Depth: 62.95</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/pn/shake/01301325/</link><pubDate>Wed, 04 Feb 2009 00:03:30 +0000</pubDate><geo:lat>47.786</geo:lat><geo:long>-122.569</geo:long><dc:subject>4</dc:subject><eq:seconds>1233321900</eq:seconds><eq:depth>62.95</eq:depth><eq:region>pn</eq:region></item>
|
||||
<item><title>5.7 - TONGA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009clag.jpg" width="100" align="left" hspace="10"/><p>Date: Fri, 30 Jan 2009 03:47:10 UTC<br/>Lat/Lon: -15.5114/-174.36<br/>Depth: 10</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009clag/</link><pubDate>Tue, 03 Feb 2009 23:53:14 +0000</pubDate><geo:lat>-15.5114</geo:lat><geo:long>-174.36</geo:long><dc:subject>5</dc:subject><eq:seconds>1233287230</eq:seconds><eq:depth>10</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>5.6 - ACRE, BRAZIL</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009ckbk.jpg" width="100" align="left" hspace="10"/><p>Date: Thu, 29 Jan 2009 22:28:06 UTC<br/>Lat/Lon: -8.111/-71.2837<br/>Depth: 612.7</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009ckbk/</link><pubDate>Thu, 29 Jan 2009 23:40:05 +0000</pubDate><geo:lat>-8.111</geo:lat><geo:long>-71.2837</geo:long><dc:subject>5</dc:subject><eq:seconds>1233268086</eq:seconds><eq:depth>612.7</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>4.2 - 11.1 mi SE of San Clemente Is. (SE tip), CA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_sc_10374021.jpg" width="100" align="left" hspace="10"/><p>Date: Thu, 29 Jan 2009 08:41:59 UTC<br/>Lat/Lon: 32.6932/-118.227<br/>Depth: 10</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/sc/shake/10374021/</link><pubDate>Fri, 30 Jan 2009 14:31:43 +0000</pubDate><geo:lat>32.6932</geo:lat><geo:long>-118.227</geo:long><dc:subject>4</dc:subject><eq:seconds>1233218519</eq:seconds><eq:depth>10</eq:depth><eq:region>sc</eq:region></item>
|
||||
<item><title>5.5 - SAMOA ISLANDS REGION</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009cja3.jpg" width="100" align="left" hspace="10"/><p>Date: Wed, 28 Jan 2009 12:39:42 UTC<br/>Lat/Lon: -16.969/-172.079<br/>Depth: 10</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009cja3/</link><pubDate>Thu, 29 Jan 2009 21:30:28 +0000</pubDate><geo:lat>-16.969</geo:lat><geo:long>-172.079</geo:long><dc:subject>5</dc:subject><eq:seconds>1233146382</eq:seconds><eq:depth>10</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>5.7 - KEPULAUAN ALOR, INDONESIA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009cjar.jpg" width="100" align="left" hspace="10"/><p>Date: Wed, 28 Jan 2009 07:53:34 UTC<br/>Lat/Lon: -8.9738/124.172<br/>Depth: 35</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009cjar/</link><pubDate>Tue, 03 Feb 2009 15:03:16 +0000</pubDate><geo:lat>-8.9738</geo:lat><geo:long>124.172</geo:long><dc:subject>5</dc:subject><eq:seconds>1233129214</eq:seconds><eq:depth>35</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>5.7 - KEPULAUAN BATU, INDONESIA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009cjab.jpg" width="100" align="left" hspace="10"/><p>Date: Wed, 28 Jan 2009 00:01:13 UTC<br/>Lat/Lon: -0.228/98.2936<br/>Depth: 14</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009cjab/</link><pubDate>Wed, 28 Jan 2009 17:39:46 +0000</pubDate><geo:lat>-0.228</geo:lat><geo:long>98.2936</geo:long><dc:subject>5</dc:subject><eq:seconds>1233100873</eq:seconds><eq:depth>14</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>5.5 - KOMANDORSKIYE OSTROVA, RUSSIA REGION</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009cibq.jpg" width="100" align="left" hspace="10"/><p>Date: Tue, 27 Jan 2009 23:57:11 UTC<br/>Lat/Lon: 55.5591/164.295<br/>Depth: 10</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009cibq/</link><pubDate>Thu, 29 Jan 2009 18:28:40 +0000</pubDate><geo:lat>55.5591</geo:lat><geo:long>164.295</geo:long><dc:subject>5</dc:subject><eq:seconds>1233100631</eq:seconds><eq:depth>10</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>5.9 - FIJI REGION</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009ciai.jpg" width="100" align="left" hspace="10"/><p>Date: Tue, 27 Jan 2009 06:29:13 UTC<br/>Lat/Lon: -17.8235/-178.694<br/>Depth: 601</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009ciai/</link><pubDate>Fri, 30 Jan 2009 11:27:34 +0000</pubDate><geo:lat>-17.8235</geo:lat><geo:long>-178.694</geo:long><dc:subject>5</dc:subject><eq:seconds>1233037753</eq:seconds><eq:depth>601</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>5.6 - KEPULAUAN BATU, INDONESIA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009chbd.jpg" width="100" align="left" hspace="10"/><p>Date: Mon, 26 Jan 2009 19:33:09 UTC<br/>Lat/Lon: -0.294/98.1928<br/>Depth: 35</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009chbd/</link><pubDate>Tue, 27 Jan 2009 16:47:50 +0000</pubDate><geo:lat>-0.294</geo:lat><geo:long>98.1928</geo:long><dc:subject>5</dc:subject><eq:seconds>1232998389</eq:seconds><eq:depth>35</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>5.8 - FOX ISLANDS, ALEUTIAN ISLANDS, ALASKA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009cha7.jpg" width="100" align="left" hspace="10"/><p>Date: Mon, 26 Jan 2009 19:11:49 UTC<br/>Lat/Lon: 52.1899/-171.408<br/>Depth: 35</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009cha7/</link><pubDate>Mon, 26 Jan 2009 20:33:44 +0000</pubDate><geo:lat>52.1899</geo:lat><geo:long>-171.408</geo:long><dc:subject>5</dc:subject><eq:seconds>1232997109</eq:seconds><eq:depth>35</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>5.8 - FIJI REGION</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009chav.jpg" width="100" align="left" hspace="10"/><p>Date: Mon, 26 Jan 2009 11:54:40 UTC<br/>Lat/Lon: -17.8122/-178.605<br/>Depth: 592.9</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009chav/</link><pubDate>Fri, 30 Jan 2009 15:39:38 +0000</pubDate><geo:lat>-17.8122</geo:lat><geo:long>-178.605</geo:long><dc:subject>5</dc:subject><eq:seconds>1232970880</eq:seconds><eq:depth>592.9</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>3.9 - 48.1 miles SE of King Cove</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_ak_88563.jpg" width="100" align="left" hspace="10"/><p>Date: Sun, 25 Jan 2009 08:08:01 UTC<br/>Lat/Lon: 54.5167/-161.544<br/>Depth: 1.5125</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/ak/shake/88563/</link><pubDate>Sun, 25 Jan 2009 18:46:58 +0000</pubDate><geo:lat>54.5167</geo:lat><geo:long>-161.544</geo:long><dc:subject>3</dc:subject><eq:seconds>1232870881</eq:seconds><eq:depth>1.5125</eq:depth><eq:region>ak</eq:region></item>
|
||||
<item><title>5.73 - 39.0 miles W of Seldovia</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_ak_88513.jpg" width="100" align="left" hspace="10"/><p>Date: Sat, 24 Jan 2009 18:09:50 UTC<br/>Lat/Lon: 59.3888/-152.811<br/>Depth: 100.016</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/ak/shake/88513/</link><pubDate>Sat, 24 Jan 2009 19:43:14 +0000</pubDate><geo:lat>59.3888</geo:lat><geo:long>-152.811</geo:long><dc:subject>5</dc:subject><eq:seconds>1232820590</eq:seconds><eq:depth>100.016</eq:depth><eq:region>ak</eq:region></item>
|
||||
<item><title>3.6 - 46.1 mi SSW of Calexico, CA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_sc_10373105.jpg" width="100" align="left" hspace="10"/><p>Date: Sat, 24 Jan 2009 05:19:04 UTC<br/>Lat/Lon: 32.042/-115.768<br/>Depth: 0.9</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/sc/shake/10373105/</link><pubDate>Sun, 25 Jan 2009 15:12:25 +0000</pubDate><geo:lat>32.042</geo:lat><geo:long>-115.768</geo:long><dc:subject>3</dc:subject><eq:seconds>1232774344</eq:seconds><eq:depth>0.9</eq:depth><eq:region>sc</eq:region></item>
|
||||
<item><title>6 - KERMADEC ISLANDS REGION</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009cfah.jpg" width="100" align="left" hspace="10"/><p>Date: Sat, 24 Jan 2009 01:28:39 UTC<br/>Lat/Lon: -28.1761/-176.737<br/>Depth: 10</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009cfah/</link><pubDate>Tue, 27 Jan 2009 23:07:31 +0000</pubDate><geo:lat>-28.1761</geo:lat><geo:long>-176.737</geo:long><dc:subject>6</dc:subject><eq:seconds>1232760519</eq:seconds><eq:depth>10</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>3.6 - 42.8 mi SSW of Calexico, CA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_sc_10373025.jpg" width="100" align="left" hspace="10"/><p>Date: Fri, 23 Jan 2009 17:44:41 UTC<br/>Lat/Lon: 32.0878/-115.751<br/>Depth: 0.01</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/sc/shake/10373025/</link><pubDate>Fri, 23 Jan 2009 17:52:48 +0000</pubDate><geo:lat>32.0878</geo:lat><geo:long>-115.751</geo:long><dc:subject>3</dc:subject><eq:seconds>1232732681</eq:seconds><eq:depth>0.01</eq:depth><eq:region>sc</eq:region></item>
|
||||
<item><title>5.3 - TAIWAN REGION</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009ceau.jpg" width="100" align="left" hspace="10"/><p>Date: Fri, 23 Jan 2009 12:38:13 UTC<br/>Lat/Lon: 21.2009/121.31<br/>Depth: 10</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009ceau/</link><pubDate>Mon, 26 Jan 2009 15:33:44 +0000</pubDate><geo:lat>21.2009</geo:lat><geo:long>121.31</geo:long><dc:subject>5</dc:subject><eq:seconds>1232714293</eq:seconds><eq:depth>10</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>6.1 - KEPULAUAN BARAT DAYA, INDONESIA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009cdcg.jpg" width="100" align="left" hspace="10"/><p>Date: Thu, 22 Jan 2009 20:16:34 UTC<br/>Lat/Lon: -7.2796/128.591<br/>Depth: 141.1</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009cdcg/</link><pubDate>Fri, 23 Jan 2009 19:08:44 +0000</pubDate><geo:lat>-7.2796</geo:lat><geo:long>128.591</geo:long><dc:subject>6</dc:subject><eq:seconds>1232655394</eq:seconds><eq:depth>141.1</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>6 - NEW BRITAIN REGION, PAPUA NEW GUINEA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009cdbi.jpg" width="100" align="left" hspace="10"/><p>Date: Thu, 22 Jan 2009 13:40:26 UTC<br/>Lat/Lon: -5.9474/148.516<br/>Depth: 44</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009cdbi/</link><pubDate>Thu, 22 Jan 2009 20:43:34 +0000</pubDate><geo:lat>-5.9474</geo:lat><geo:long>148.516</geo:long><dc:subject>6</dc:subject><eq:seconds>1232631626</eq:seconds><eq:depth>44</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>6.3 - SOUTHEAST OF THE LOYALTY ISLANDS</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009ccbe.jpg" width="100" align="left" hspace="10"/><p>Date: Wed, 21 Jan 2009 17:08:44 UTC<br/>Lat/Lon: -22.7325/170.981<br/>Depth: 35</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009ccbe/</link><pubDate>Wed, 28 Jan 2009 17:09:51 +0000</pubDate><geo:lat>-22.7325</geo:lat><geo:long>170.981</geo:long><dc:subject>6</dc:subject><eq:seconds>1232557724</eq:seconds><eq:depth>35</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>3.82 - 113.5 miles SW of Kodiak</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_ak_87706.jpg" width="100" align="left" hspace="10"/><p>Date: Tue, 20 Jan 2009 17:08:48 UTC<br/>Lat/Lon: 56.7294/-154.726<br/>Depth: 15.0776</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/ak/shake/87706/</link><pubDate>Thu, 22 Jan 2009 00:52:31 +0000</pubDate><geo:lat>56.7294</geo:lat><geo:long>-154.726</geo:long><dc:subject>3</dc:subject><eq:seconds>1232471328</eq:seconds><eq:depth>15.0776</eq:depth><eq:region>ak</eq:region></item>
|
||||
<item><title>5.5 - BANDA SEA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009cba1.jpg" width="100" align="left" hspace="10"/><p>Date: Tue, 20 Jan 2009 10:46:51 UTC<br/>Lat/Lon: -4.6277/129.871<br/>Depth: 124</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009cba1/</link><pubDate>Tue, 20 Jan 2009 11:02:34 +0000</pubDate><geo:lat>-4.6277</geo:lat><geo:long>129.871</geo:long><dc:subject>5</dc:subject><eq:seconds>1232448411</eq:seconds><eq:depth>124</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>3.72 - 11 km S of Tres Pinos, CA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_nc_51215576.jpg" width="100" align="left" hspace="10"/><p>Date: Tue, 20 Jan 2009 09:12:26 UTC<br/>Lat/Lon: 36.69/-121.32<br/>Depth: 5.28</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/nc/shake/51215576/</link><pubDate>Tue, 20 Jan 2009 09:21:32 +0000</pubDate><geo:lat>36.69</geo:lat><geo:long>-121.32</geo:long><dc:subject>3</dc:subject><eq:seconds>1232442746</eq:seconds><eq:depth>5.28</eq:depth><eq:region>nc</eq:region></item>
|
||||
<item><title>3.68 - 10 km S of Tres Pinos, CA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_nc_51215567.jpg" width="100" align="left" hspace="10"/><p>Date: Tue, 20 Jan 2009 08:14:42 UTC<br/>Lat/Lon: 36.7/-121.33<br/>Depth: 4.97</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/nc/shake/51215567/</link><pubDate>Tue, 20 Jan 2009 08:25:38 +0000</pubDate><geo:lat>36.7</geo:lat><geo:long>-121.33</geo:long><dc:subject>3</dc:subject><eq:seconds>1232439282</eq:seconds><eq:depth>4.97</eq:depth><eq:region>nc</eq:region></item>
|
||||
<item><title>3.78 - 10 km S of Tres Pinos, CA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_nc_51215555.jpg" width="100" align="left" hspace="10"/><p>Date: Tue, 20 Jan 2009 06:06:00 UTC<br/>Lat/Lon: 36.7/-121.33<br/>Depth: 6.27</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/nc/shake/51215555/</link><pubDate>Tue, 20 Jan 2009 18:09:55 +0000</pubDate><geo:lat>36.7</geo:lat><geo:long>-121.33</geo:long><dc:subject>3</dc:subject><eq:seconds>1232431560</eq:seconds><eq:depth>6.27</eq:depth><eq:region>nc</eq:region></item>
|
||||
<item><title>5.6 - SOUTHEAST OF THE LOYALTY ISLANDS</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009cab1.jpg" width="100" align="left" hspace="10"/><p>Date: Mon, 19 Jan 2009 22:26:59 UTC<br/>Lat/Lon: -22.8529/170.712<br/>Depth: 50.7</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009cab1/</link><pubDate>Wed, 21 Jan 2009 15:43:15 +0000</pubDate><geo:lat>-22.8529</geo:lat><geo:long>170.712</geo:long><dc:subject>5</dc:subject><eq:seconds>1232404019</eq:seconds><eq:depth>50.7</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>6 - SOUTHEAST OF THE LOYALTY ISLANDS</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009caap.jpg" width="100" align="left" hspace="10"/><p>Date: Mon, 19 Jan 2009 03:46:33 UTC<br/>Lat/Lon: -22.4001/170.805<br/>Depth: 10</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009caap/</link><pubDate>Wed, 21 Jan 2009 15:42:01 +0000</pubDate><geo:lat>-22.4001</geo:lat><geo:long>170.805</geo:long><dc:subject>6</dc:subject><eq:seconds>1232336793</eq:seconds><eq:depth>10</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>6.5 - SOUTHEAST OF THE LOYALTY ISLANDS</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009caak.jpg" width="100" align="left" hspace="10"/><p>Date: Mon, 19 Jan 2009 03:35:19 UTC<br/>Lat/Lon: -22.6043/170.881<br/>Depth: 10</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009caak/</link><pubDate>Tue, 20 Jan 2009 15:59:07 +0000</pubDate><geo:lat>-22.6043</geo:lat><geo:long>170.881</geo:long><dc:subject>6</dc:subject><eq:seconds>1232336119</eq:seconds><eq:depth>10</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>4.41 - 49.4 miles SE of King Cove</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_ak_87555.jpg" width="100" align="left" hspace="10"/><p>Date: Sun, 18 Jan 2009 21:17:13 UTC<br/>Lat/Lon: 54.5008/-161.528<br/>Depth: 1.9849</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/ak/shake/87555/</link><pubDate>Wed, 21 Jan 2009 20:52:24 +0000</pubDate><geo:lat>54.5008</geo:lat><geo:long>-161.528</geo:long><dc:subject>4</dc:subject><eq:seconds>1232313433</eq:seconds><eq:depth>1.9849</eq:depth><eq:region>ak</eq:region></item>
|
||||
<item><title>1.38 - 23.3 miles SSE of Talkeetna</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_ak_87541.jpg" width="100" align="left" hspace="10"/><p>Date: Sun, 18 Jan 2009 16:31:31 UTC<br/>Lat/Lon: 62.0182/-149.785<br/>Depth: 40.9458</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/ak/shake/87541/</link><pubDate>Wed, 21 Jan 2009 20:53:51 +0000</pubDate><geo:lat>62.0182</geo:lat><geo:long>-149.785</geo:long><dc:subject>1</dc:subject><eq:seconds>1232296291</eq:seconds><eq:depth>40.9458</eq:depth><eq:region>ak</eq:region></item>
|
||||
<item><title>6.4 - KERMADEC ISLANDS, NEW ZEALAND</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009bzaw.jpg" width="100" align="left" hspace="10"/><p>Date: Sun, 18 Jan 2009 14:11:49 UTC<br/>Lat/Lon: -30.0896/-177.999<br/>Depth: 33</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009bzaw/</link><pubDate>Wed, 21 Jan 2009 14:15:59 +0000</pubDate><geo:lat>-30.0896</geo:lat><geo:long>-177.999</geo:long><dc:subject>6</dc:subject><eq:seconds>1232287909</eq:seconds><eq:depth>33</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>4.36 - 152.0 miles WSW of Adak</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_ak_87510.jpg" width="100" align="left" hspace="10"/><p>Date: Sun, 18 Jan 2009 09:42:21 UTC<br/>Lat/Lon: 51.1202/-179.973<br/>Depth: 43.4808</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/ak/shake/87510/</link><pubDate>Sun, 18 Jan 2009 09:51:54 +0000</pubDate><geo:lat>51.1202</geo:lat><geo:long>-179.973</geo:long><dc:subject>4</dc:subject><eq:seconds>1232271741</eq:seconds><eq:depth>43.4808</eq:depth><eq:region>ak</eq:region></item>
|
||||
<item><title>4.47 - 152.6 miles WSW of Adak</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_ak_87506.jpg" width="100" align="left" hspace="10"/><p>Date: Sun, 18 Jan 2009 08:17:11 UTC<br/>Lat/Lon: 51.1176/-179.988<br/>Depth: 47.5339</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/ak/shake/87506/</link><pubDate>Sun, 18 Jan 2009 08:28:13 +0000</pubDate><geo:lat>51.1176</geo:lat><geo:long>-179.988</geo:long><dc:subject>4</dc:subject><eq:seconds>1232266631</eq:seconds><eq:depth>47.5339</eq:depth><eq:region>ak</eq:region></item>
|
||||
<item><title>4.4 - 7.0 miles NNW of Kantishna</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_ak_87447.jpg" width="100" align="left" hspace="10"/><p>Date: Sat, 17 Jan 2009 13:56:39 UTC<br/>Lat/Lon: 63.6207/-151.004<br/>Depth: 0.7497</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/ak/shake/87447/</link><pubDate>Tue, 20 Jan 2009 21:31:31 +0000</pubDate><geo:lat>63.6207</geo:lat><geo:long>-151.004</geo:long><dc:subject>4</dc:subject><eq:seconds>1232200599</eq:seconds><eq:depth>0.7497</eq:depth><eq:region>ak</eq:region></item>
|
||||
<item><title>3.9 - HAWAII REGION, HAWAII</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_hv_00032785.jpg" width="100" align="left" hspace="10"/><p>Date: Sat, 17 Jan 2009 12:55:09 UTC<br/>Lat/Lon: 19.276/-154.983<br/>Depth: 41.5</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/hv/shake/00032785/</link><pubDate>Mon, 19 Jan 2009 00:38:16 +0000</pubDate><geo:lat>19.276</geo:lat><geo:long>-154.983</geo:long><dc:subject>3</dc:subject><eq:seconds>1232196909</eq:seconds><eq:depth>41.5</eq:depth><eq:region>hv</eq:region></item>
|
||||
<item><title>5.8 - CHIAPAS, MEXICO</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009byah.jpg" width="100" align="left" hspace="10"/><p>Date: Sat, 17 Jan 2009 02:57:32 UTC<br/>Lat/Lon: 15.8052/-92.4817<br/>Depth: 176.4</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009byah/</link><pubDate>Tue, 20 Jan 2009 15:45:39 +0000</pubDate><geo:lat>15.8052</geo:lat><geo:long>-92.4817</geo:long><dc:subject>5</dc:subject><eq:seconds>1232161052</eq:seconds><eq:depth>176.4</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>4.15 - 150.9 miles SW of Dutch Harbor</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_ak_87408.jpg" width="100" align="left" hspace="10"/><p>Date: Sat, 17 Jan 2009 00:09:32 UTC<br/>Lat/Lon: 52.6136/-169.481<br/>Depth: 58.524</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/ak/shake/87408/</link><pubDate>Tue, 20 Jan 2009 21:31:22 +0000</pubDate><geo:lat>52.6136</geo:lat><geo:long>-169.481</geo:long><dc:subject>4</dc:subject><eq:seconds>1232150972</eq:seconds><eq:depth>58.524</eq:depth><eq:region>ak</eq:region></item>
|
||||
<item><title>5.8 - SOUTHEAST OF THE LOYALTY ISLANDS</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009bxbu.jpg" width="100" align="left" hspace="10"/><p>Date: Fri, 16 Jan 2009 19:55:24 UTC<br/>Lat/Lon: -22.3186/170.314<br/>Depth: 38.1</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009bxbu/</link><pubDate>Tue, 20 Jan 2009 15:38:36 +0000</pubDate><geo:lat>-22.3186</geo:lat><geo:long>170.314</geo:long><dc:subject>5</dc:subject><eq:seconds>1232135724</eq:seconds><eq:depth>38.1</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>3.8 - WYOMING</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009bxae.jpg" width="100" align="left" hspace="10"/><p>Date: Fri, 16 Jan 2009 04:15:35 UTC<br/>Lat/Lon: 43.2235/-110.86<br/>Depth: 5</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009bxae/</link><pubDate>Mon, 19 Jan 2009 23:15:40 +0000</pubDate><geo:lat>43.2235</geo:lat><geo:long>-110.86</geo:long><dc:subject>3</dc:subject><eq:seconds>1232079335</eq:seconds><eq:depth>5</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>3.64 - 90.2 miles E of Glennallen</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_ak_87301.jpg" width="100" align="left" hspace="10"/><p>Date: Fri, 16 Jan 2009 02:56:50 UTC<br/>Lat/Lon: 61.8706/-142.823<br/>Depth: 1.456</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/ak/shake/87301/</link><pubDate>Tue, 20 Jan 2009 23:01:18 +0000</pubDate><geo:lat>61.8706</geo:lat><geo:long>-142.823</geo:long><dc:subject>3</dc:subject><eq:seconds>1232074610</eq:seconds><eq:depth>1.456</eq:depth><eq:region>ak</eq:region></item>
|
||||
<item><title>7.4 - EAST OF THE KURIL ISLANDS</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009bwa8.jpg" width="100" align="left" hspace="10"/><p>Date: Thu, 15 Jan 2009 17:49:39 UTC<br/>Lat/Lon: 46.8593/155.173<br/>Depth: 36</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009bwa8/</link><pubDate>Thu, 15 Jan 2009 19:28:43 +0000</pubDate><geo:lat>46.8593</geo:lat><geo:long>155.173</geo:long><dc:subject>7</dc:subject><eq:seconds>1232041779</eq:seconds><eq:depth>36</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>5.7 - SOLOMON ISLANDS</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009bwaz.jpg" width="100" align="left" hspace="10"/><p>Date: Thu, 15 Jan 2009 16:15:00 UTC<br/>Lat/Lon: -10.3382/161.225<br/>Depth: 95.1</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009bwaz/</link><pubDate>Thu, 15 Jan 2009 16:48:38 +0000</pubDate><geo:lat>-10.3382</geo:lat><geo:long>161.225</geo:long><dc:subject>5</dc:subject><eq:seconds>1232036100</eq:seconds><eq:depth>95.1</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>3.94 - 12 km S of Tres Pinos, CA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_nc_71011822.jpg" width="100" align="left" hspace="10"/><p>Date: Thu, 15 Jan 2009 14:44:08 UTC<br/>Lat/Lon: 36.6838/-121.326<br/>Depth: 6.2</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/nc/shake/71011822/</link><pubDate>Fri, 16 Jan 2009 17:19:03 +0000</pubDate><geo:lat>36.6838</geo:lat><geo:long>-121.326</geo:long><dc:subject>3</dc:subject><eq:seconds>1232030648</eq:seconds><eq:depth>6.2</eq:depth><eq:region>nc</eq:region></item>
|
||||
<item><title>3.54 - 12 km S of Tres Pinos, CA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_nc_40230187.jpg" width="100" align="left" hspace="10"/><p>Date: Thu, 15 Jan 2009 14:43:53 UTC<br/>Lat/Lon: 36.6865/-121.314<br/>Depth: 6.4</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/nc/shake/40230187/</link><pubDate>Fri, 16 Jan 2009 17:07:34 +0000</pubDate><geo:lat>36.6865</geo:lat><geo:long>-121.314</geo:long><dc:subject>3</dc:subject><eq:seconds>1232030633</eq:seconds><eq:depth>6.4</eq:depth><eq:region>nc</eq:region></item>
|
||||
<item><title>6.8 - SOUTHEAST OF THE LOYALTY ISLANDS</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009bwaf.jpg" width="100" align="left" hspace="10"/><p>Date: Thu, 15 Jan 2009 07:27:21 UTC<br/>Lat/Lon: -22.379/170.624<br/>Depth: 40.4</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009bwaf/</link><pubDate>Thu, 15 Jan 2009 12:05:54 +0000</pubDate><geo:lat>-22.379</geo:lat><geo:long>170.624</geo:long><dc:subject>6</dc:subject><eq:seconds>1232004441</eq:seconds><eq:depth>40.4</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>6 - MID-INDIAN RIDGE</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_global_2009buad.jpg" width="100" align="left" hspace="10"/><p>Date: Tue, 13 Jan 2009 01:04:42 UTC<br/>Lat/Lon: -13.1942/66.0603<br/>Depth: 10</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/global/shake/2009buad/</link><pubDate>Tue, 13 Jan 2009 16:14:24 +0000</pubDate><geo:lat>-13.1942</geo:lat><geo:long>66.0603</geo:long><dc:subject>6</dc:subject><eq:seconds>1231808682</eq:seconds><eq:depth>10</eq:depth><eq:region>global</eq:region></item>
|
||||
<item><title>3.6 - 4.5 mi N of town of Big Bear Lake, CA</title><description><![CDATA[<img src="http://earthquake.usgs.gov/eqcenter/shakemap/thumbs/shakemap_sc_10370561.jpg" width="100" align="left" hspace="10"/><p>Date: Sun, 11 Jan 2009 01:05:59 UTC<br/>Lat/Lon: 34.3087/-116.915<br/>Depth: 5.98</p>]]></description><link>http://earthquake.usgs.gov/eqcenter/shakemap/sc/shake/10370561/</link><pubDate>Mon, 12 Jan 2009 01:15:06 +0000</pubDate><geo:lat>34.3087</geo:lat><geo:long>-116.915</geo:long><dc:subject>3</dc:subject><eq:seconds>1231635959</eq:seconds><eq:depth>5.98</eq:depth><eq:region>sc</eq:region></item>
|
||||
</channel></rss>
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
div, p {
|
||||
font-family: Verdana, Arial, sans-serif;
|
||||
}
|
||||
|
||||
p.content {
|
||||
font-size: 12px;
|
||||
width: 30em;
|
||||
}
|
||||
|
||||
div#help {
|
||||
font-size: 12px;
|
||||
width: 45em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
div#timemap {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
div#timelinecontainer{
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
div#timeline{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
background: #CCCCCC;
|
||||
}
|
||||
|
||||
div#mapcontainer {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
div#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #EEEEEE;
|
||||
}
|
||||
|
||||
div.infotitle {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
div.infodescription {
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
div.custominfostyle {
|
||||
font-family: Georgia, Garamond, serif;
|
||||
font-size: 1.5em;
|
||||
font-style: italic;
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
|
|
@ -1,149 +0,0 @@
|
|||
<!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>Filter 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="../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-2.3.0.js"></script>
|
||||
<script src="../src/timemap.js" type="text/javascript"></script>
|
||||
<script src="../src/manipulation.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)
|
||||
datasets: [
|
||||
{
|
||||
id: "artists",
|
||||
title: "Artists",
|
||||
type: "basic",
|
||||
options: {
|
||||
items: [
|
||||
{
|
||||
"start" : "1449-01-01",
|
||||
"end" : "1492-04-09",
|
||||
"point" : {
|
||||
"lat" : 43.76849063719358,
|
||||
"lon" : 11.25575065612793
|
||||
},
|
||||
"title" : "Lorenzo de' Medici",
|
||||
"options" : {
|
||||
description: "tags: ['patron']",
|
||||
tags: ['patron']
|
||||
}
|
||||
},
|
||||
{
|
||||
"start" : "1449",
|
||||
"end" : "1494-01-11",
|
||||
"point" : {
|
||||
"lat" : 43.7,
|
||||
"lon" : 11.28
|
||||
},
|
||||
"title" : "Domenico Ghirlandaio",
|
||||
"options" : {
|
||||
theme: 'orange',
|
||||
description: "tags: ['painter']",
|
||||
tags: ['painter']
|
||||
}
|
||||
},
|
||||
{
|
||||
"start" : "1452",
|
||||
"end" : "1519",
|
||||
"point" : {
|
||||
"lat" : 43.8166666667,
|
||||
"lon" : 10.7666666667
|
||||
},
|
||||
"title" : "Leonardo da Vinci",
|
||||
"options" : {
|
||||
theme: 'blue',
|
||||
description: "tags: ['painter','sculptor','inventor']",
|
||||
tags: ['painter','sculptor','inventor']
|
||||
}
|
||||
},
|
||||
{
|
||||
"start" : "1475",
|
||||
"end" : "1564",
|
||||
"point" : {
|
||||
"lat" : 43.6433,
|
||||
"lon" : 11.9875
|
||||
},
|
||||
"title" : "Michelangelo",
|
||||
"options" : {
|
||||
theme: 'green',
|
||||
description: "tags: ['painter','sculptor']",
|
||||
tags: ['painter','sculptor']
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
bandIntervals: [
|
||||
Timeline.DateTime.DECADE,
|
||||
Timeline.DateTime.CENTURY
|
||||
]
|
||||
});
|
||||
|
||||
// filter function for tags
|
||||
var hasSelectedTag = function(item) {
|
||||
// if no tag was selected, everything passes
|
||||
return !window.selectedTag || (
|
||||
// item has tags?
|
||||
item.opts.tags &&
|
||||
// tag found? (note - will work in IE; Timemap extends the Array prototype if necessary)
|
||||
item.opts.tags.indexOf(window.selectedTag) >= 0
|
||||
);
|
||||
};
|
||||
|
||||
// add our new function to the map and timeline filters
|
||||
tm.addFilter("map", hasSelectedTag); // hide map markers on fail
|
||||
tm.addFilter("timeline", hasSelectedTag); // hide timeline events on fail
|
||||
|
||||
// onChange handler for pulldown menu
|
||||
$('#tag_select').change(function() {
|
||||
window.selectedTag = $(this).val();
|
||||
// run filters
|
||||
tm.filter('map');
|
||||
tm.filter('timeline');
|
||||
});
|
||||
});
|
||||
|
||||
</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>Filters</h1>
|
||||
In this example, we've loaded a set of tags for each item, and can use this dropdown menu to filter based on tags:
|
||||
<form>
|
||||
<select id="tag_select">
|
||||
<option value="">All tags</option>
|
||||
<option value="painter">painter</option>
|
||||
<option value="sculptor">sculptor</option>
|
||||
<option value="inventor">inventor</option>
|
||||
<option value="patron">patron</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,206 +0,0 @@
|
|||
<!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>Timemap Synchronized with Google Earth</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 src="../lib/timeline-2.3.0.js" type="text/javascript"></script>
|
||||
<script src="../src/timemap.js" type="text/javascript"></script>
|
||||
<script src="http://www.google.com/jsapi?key=ABQIAAAASI0kCI-azC8RgbOZzWc3VRRarOQe_TKf_51Omf6UUSOFm7EABRRhO0PO4nBAO9FCmVDuowVwROLo3w"></script>
|
||||
<script type="text/javascript">
|
||||
// load google earth
|
||||
google.load("earth", "1", {'other_params': 'sensor=false' });
|
||||
|
||||
// convert GE lookAt range to GMap zoom
|
||||
function getMapZoom(alt) {
|
||||
var zoom = Math.round(Math.log(48000000/alt)/Math.log(2));
|
||||
if (zoom < 0) zoom = 0;
|
||||
else if (zoom > 19)zoom = 19;
|
||||
return zoom;
|
||||
}
|
||||
|
||||
// convert GMap zoom level to GE lookAt range
|
||||
function getGEZoom(zoom) {
|
||||
return 48000000/(Math.pow(2,zoom))
|
||||
}
|
||||
|
||||
|
||||
var suppressMapListener = false,
|
||||
suppressEarthListener = false;
|
||||
|
||||
// set Google Earth to sync with a map
|
||||
function setEarthView(ge, map) {
|
||||
if (!suppressEarthListener) {
|
||||
// to stop cyclical dependencies
|
||||
suppressMapListener = true;
|
||||
window.setTimeout(function() {
|
||||
suppressMapListener = false;
|
||||
}, 500);
|
||||
// set view
|
||||
var latlng = map.getCenter().toProprietary('google');
|
||||
var la = ge.getView().copyAsLookAt(ge.ALTITUDE_ABSOLUTE);
|
||||
la.setLatitude(latlng.lat());
|
||||
la.setLongitude(latlng.lng());
|
||||
la.setHeading(0);
|
||||
la.setRange(getGEZoom(map.getZoom()));
|
||||
ge.getView().setAbstractView(la);
|
||||
}
|
||||
}
|
||||
|
||||
// set the map to look at Google Earth
|
||||
function setMapView(ge, map) {
|
||||
if (!suppressMapListener) {
|
||||
// to stop cyclical dependencies
|
||||
suppressEarthListener = true;
|
||||
window.setTimeout(function() {
|
||||
suppressEarthListener = false;
|
||||
}, 500);
|
||||
// set view
|
||||
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_CLAMP_TO_GROUND);
|
||||
mapzoom = getMapZoom(lookAt.getRange());
|
||||
map.setCenter(new mxn.LatLonPoint(lookAt.getLatitude(),lookAt.getLongitude()), mapzoom);
|
||||
}
|
||||
}
|
||||
|
||||
var tm, ge;
|
||||
$(function() {
|
||||
|
||||
// this is our callback, for whichever initializes last
|
||||
function setListeners() {
|
||||
// get a reference to the timemap we've initialized
|
||||
var map = tm.map;
|
||||
// set earth view manually for the first time
|
||||
setEarthView(ge, map);
|
||||
// Add listeners
|
||||
map.endPan.addHandler(function() {setEarthView(ge, map);});
|
||||
//map.endZoom.addHandler(function() {setEarthView(ge, map);});
|
||||
google.earth.addEventListener(ge.getView(), 'viewchange', function() {setMapView(ge, map)});
|
||||
// tilt, because it looks cool :)
|
||||
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
|
||||
// Add 15 degrees to the current tilt
|
||||
lookAt.setTilt(lookAt.getTilt() + 55.0);
|
||||
// Update the view in Google Earth
|
||||
ge.getView().setAbstractView(lookAt);
|
||||
}
|
||||
|
||||
// initialize Google Earth
|
||||
google.earth.createInstance("gemap",
|
||||
function(instance) {
|
||||
ge = instance;
|
||||
ge.getWindow().setVisibility(true);
|
||||
|
||||
// GE options
|
||||
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
|
||||
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
|
||||
// looks like you have to teleport, or the map listeners will get messed up
|
||||
ge.getOptions().setFlyToSpeed(ge.SPEED_TELEPORT);
|
||||
ge.getOptions().setStatusBarVisibility(true);
|
||||
|
||||
// callback
|
||||
if (tm) setListeners();
|
||||
},
|
||||
function failureCB(errorCode) {
|
||||
console.log("failed!");
|
||||
}
|
||||
);
|
||||
|
||||
// initialize timemap
|
||||
tm = TimeMap.init({
|
||||
mapId: "map",
|
||||
timelineId: "timeline",
|
||||
options: {
|
||||
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: "dec",
|
||||
// callback
|
||||
dataDisplayedFunction: function(timemap) {
|
||||
if (ge) setListeners();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<link href="examples.css" type="text/css" rel="stylesheet"/>
|
||||
<link href="http://gmaps-utility-library-dev.googlecode.com/svn/trunk/extinfowindow/examples/css/simpleExampleWindow.css" type="text/css" rel="stylesheet"/>
|
||||
<style>
|
||||
div#timelinecontainer{ height: 100px; }
|
||||
div#mapcontainer{ height: 500px; }
|
||||
div#map {width:50%; float:left}
|
||||
div#gemap {margin-left:50%; height:100%;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="help">
|
||||
<h1>Timemap Synchronized with Google Earth</h1>
|
||||
This example syncs a timemap with the Google Earth browser plugin. You have to do some timeout juggling in order to avoid a cyclical listener setup, but it seems to work reasonably well.</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
<div id="gemap"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,219 +0,0 @@
|
|||
<!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>Timemap Synchronized with Google Earth</title>
|
||||
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAASI0kCI-azC8RgbOZzWc3VRRarOQe_TKf_51Omf6UUSOFm7EABRRhO0PO4nBAO9FCmVDuowVwROLo3w"
|
||||
type="text/javascript"></script>
|
||||
<script src="../lib/timeline-2.3.0.js" type="text/javascript"></script>
|
||||
<script src="../timemap.js" type="text/javascript"></script>
|
||||
<script src="http://www.google.com/jsapi?key=ABQIAAAASI0kCI-azC8RgbOZzWc3VRRarOQe_TKf_51Omf6UUSOFm7EABRRhO0PO4nBAO9FCmVDuowVwROLo3w"></script>
|
||||
<script type="text/javascript">
|
||||
// load google earth
|
||||
google.load("earth", "1", {'other_params': 'sensor=false' });
|
||||
|
||||
// convert GE lookAt range to GMap zoom
|
||||
function getMapZoom(alt) {
|
||||
var zoom = Math.round(Math.log(48000000/alt)/Math.log(2));
|
||||
if (zoom < 0) zoom = 0;
|
||||
else if (zoom > 19)zoom = 19;
|
||||
return zoom;
|
||||
}
|
||||
|
||||
// convert GMap zoom level to GE lookAt range
|
||||
function getGEZoom(zoom) {
|
||||
return 48000000/(Math.pow(2,zoom))
|
||||
}
|
||||
|
||||
|
||||
var suppressMapListener = false,
|
||||
suppressEarthListener = false;
|
||||
|
||||
// set Google Earth to sync with a map
|
||||
function setEarthView(ge, map) {
|
||||
if (!suppressEarthListener) {
|
||||
// to stop cyclical dependencies
|
||||
suppressMapListener = true;
|
||||
window.setTimeout(function() {
|
||||
suppressMapListener = false;
|
||||
}, 500);
|
||||
// set view
|
||||
var latlng = map.getCenter();
|
||||
var la = ge.getView().copyAsLookAt(ge.ALTITUDE_ABSOLUTE);
|
||||
la.setLatitude(latlng.lat());
|
||||
la.setLongitude(latlng.lng());
|
||||
la.setHeading(0);
|
||||
la.setRange(getGEZoom(map.getZoom()));
|
||||
ge.getView().setAbstractView(la);
|
||||
}
|
||||
}
|
||||
|
||||
// set a Google Map to look at Google Earth
|
||||
function setMapView(ge, map) {
|
||||
if (!suppressMapListener) {
|
||||
// to stop cyclical dependencies
|
||||
suppressEarthListener = true;
|
||||
window.setTimeout(function() {
|
||||
suppressEarthListener = false;
|
||||
}, 500);
|
||||
// set view
|
||||
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_CLAMP_TO_GROUND);
|
||||
mapzoom = getMapZoom(lookAt.getRange());
|
||||
map.setCenter(new GLatLng(lookAt.getLatitude(),lookAt.getLongitude()), mapzoom);
|
||||
}
|
||||
}
|
||||
|
||||
var tm, ge;
|
||||
function onLoad() {
|
||||
|
||||
// this is our callback, for whichever initializes last
|
||||
function setListeners() {
|
||||
// get a reference to the timemap we've initialized
|
||||
var map = tm.map;
|
||||
// set earth view manually for the first time
|
||||
setEarthView(ge, map);
|
||||
// Add listeners
|
||||
GEvent.addListener(map, "move", function() {setEarthView(ge, map);});
|
||||
//GEvent.addListener(map, "zoomend", function() {setEarthView(ge, map);});
|
||||
google.earth.addEventListener(ge.getView(), 'viewchange', function() {setMapView(ge, map)});
|
||||
// tilt, because it looks cool :)
|
||||
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
|
||||
// Add 15 degrees to the current tilt
|
||||
lookAt.setTilt(lookAt.getTilt() + 55.0);
|
||||
// Update the view in Google Earth
|
||||
ge.getView().setAbstractView(lookAt);
|
||||
// get the top timeline band
|
||||
var band = tm.timeline.getBand(0);
|
||||
// set the listener to fire on scroll
|
||||
band.addOnScrollListener(function() {
|
||||
console.log("here")
|
||||
// get the current time
|
||||
var currTime = band.getCenterVisibleDate();
|
||||
// make a Google Earth timestamp
|
||||
ts = ge.createTimeStamp('');
|
||||
ts.getWhen().set(TimeMap.util.formatDate(currTime));
|
||||
// set the time for the plugin
|
||||
ge.getTime().setTimePrimitive(ts);
|
||||
});
|
||||
}
|
||||
|
||||
// initialize Google Earth
|
||||
google.earth.createInstance("gemap",
|
||||
function(instance) {
|
||||
ge = instance;
|
||||
ge.getWindow().setVisibility(true);
|
||||
|
||||
// GE options
|
||||
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
|
||||
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
|
||||
// looks like you have to teleport, or the map listeners will get messed up
|
||||
ge.getOptions().setFlyToSpeed(ge.SPEED_TELEPORT);
|
||||
ge.getOptions().setStatusBarVisibility(true);
|
||||
// GE options
|
||||
ge.getSun().setVisibility(true);
|
||||
ge.getOptions().setAtmosphereVisibility(true);
|
||||
// callback
|
||||
if (tm) setListeners();
|
||||
},
|
||||
function failureCB(errorCode) {
|
||||
console.log("failed!");
|
||||
}
|
||||
);
|
||||
|
||||
// initialize timemap
|
||||
tm = TimeMap.init({
|
||||
mapId: "map",
|
||||
timelineId: "timeline",
|
||||
options: {
|
||||
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: "dec",
|
||||
// callback
|
||||
dataDisplayedFunction: function(timemap) {
|
||||
if (ge) setListeners();
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<link href="examples.css" type="text/css" rel="stylesheet"/>
|
||||
<link href="http://gmaps-utility-library-dev.googlecode.com/svn/trunk/extinfowindow/examples/css/simpleExampleWindow.css" type="text/css" rel="stylesheet"/>
|
||||
<style>
|
||||
div#timelinecontainer{ height: 100px; }
|
||||
div#mapcontainer{ height: 500px; }
|
||||
div#map {width:50%; float:left}
|
||||
div#gemap {margin-left:50%; height:100%;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body onload="onLoad();" onunload="GUnload();">
|
||||
<div id="help">
|
||||
<h1>Timemap Synchronized with Google Earth</h1>
|
||||
This example syncs a timemap with the Google Earth browser plugin. You have to do some timeout juggling in order to avoid a cyclical listener setup, but it seems to work reasonably well.</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
<div id="gemap"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
<!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>Google Events 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="../lib/jquery-1.6.2.min.js"></script>
|
||||
<script type="text/javascript" src="../lib/mxn/mxn.js?(google)"></script>
|
||||
<script type="text/javascript" src="http://static.simile.mit.edu/timeline/api/timeline-api.js"></script>
|
||||
<script src="../src/timemap.js" type="text/javascript"></script>
|
||||
<script src="../src/loaders/json.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
TimeMap.init({
|
||||
mapId: "map", // Id of map div element (required)
|
||||
timelineId: "timeline", // Id of timeline div element (required)
|
||||
options: {
|
||||
eventIconPath: "../images/"
|
||||
},
|
||||
datasets: [
|
||||
{
|
||||
title: "Developer Community Calendar",
|
||||
theme: "green",
|
||||
type: "jsonp", // Data to be loaded in JSON from a remote URL
|
||||
options: {
|
||||
url: "http://www.google.com/calendar/feeds/" +
|
||||
"dev-community-calendar@google.com/public/full?futureevents=true" +
|
||||
"&orderby=starttime&sortorder=ascending&singleevents=true" +
|
||||
"&alt=json-in-script&callback=?",
|
||||
preloadFunction: preloadGCal,
|
||||
transformFunction: transformGCal
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Developer Calendar",
|
||||
theme: "blue",
|
||||
type: "jsonp", // Data to be loaded in JSON from a remote URL
|
||||
options: {
|
||||
url: "http://www.google.com/calendar/feeds/" +
|
||||
"developer-calendar@google.com/public/full?futureevents=true" +
|
||||
"&orderby=starttime&sortorder=ascending&singleevents=true" +
|
||||
"&alt=json-in-script&callback=?",
|
||||
preloadFunction: preloadGCal,
|
||||
transformFunction: transformGCal
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Preload function for the calendar events feed
|
||||
// The preloadFunction should leave you with an array of
|
||||
// elements, stripping off outer envelopes, etc.
|
||||
function preloadGCal(result) {
|
||||
var entries = (result.feed.entry);
|
||||
var events = [];
|
||||
// delete events without geotags
|
||||
for (var x=0; x<entries.length; x++) {
|
||||
entry = entries[x];
|
||||
var location = entry['gd$where'][0].valueString;
|
||||
var pattern = new RegExp(/@\s*([\-0-9.]+)\s*,\s*([\-0-9.]+)\s*/);
|
||||
var matches = pattern.exec(location);
|
||||
if (matches != null) events.push(entry);
|
||||
}
|
||||
return events;
|
||||
}
|
||||
|
||||
// Transform function for a single calendar entry
|
||||
// The transformFunction should transform a single element from
|
||||
// your JSON format to the format required by loadItem().
|
||||
function transformGCal(entry) {
|
||||
var newData = {};
|
||||
newData["title"] = entry.title.$t;
|
||||
newData["options"] = {};
|
||||
// html for info window
|
||||
if (entry.content.$t.length > 120)
|
||||
var content = entry.content.$t.substring(0,120) + '...';
|
||||
else var content = entry.content.$t;
|
||||
newData["options"]["infoHtml"] = '<p class="content"><strong>' + entry.title.$t
|
||||
+ '</strong></p><p class="content">' + content + ' ' +
|
||||
'<a href="' + entry.link[0].href + '" target=_blank>more >></a></p>';
|
||||
newData["start"] = entry['gd$when'][0].startTime;
|
||||
// get geolocation
|
||||
var location = entry['gd$where'][0].valueString;
|
||||
var pattern = new RegExp(/@\s*([\-0-9.]+)\s*,\s*([\-0-9.]+)\s*/);
|
||||
var matches = pattern.exec(location);
|
||||
if (matches != null) {
|
||||
var lat = parseFloat(matches[1]);
|
||||
var lon = parseFloat(matches[2]);
|
||||
newData["point"] = {
|
||||
"lat" : lat,
|
||||
"lon" : lon
|
||||
};
|
||||
}
|
||||
return newData;
|
||||
}
|
||||
</script>
|
||||
<link href="examples.css" type="text/css" rel="stylesheet"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="help">
|
||||
<h1>Two JSON Datasets</h1>
|
||||
In this example, we're loading two JSON datasets from public Google Calendar feeds. <em>Note: this relied on a lat/lon string in the gd$where attribute - looks like the person managing the calendars stopped adding that. :(<em>
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
<!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>Google Spreadsheet 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="../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 src="../src/param.js" type="text/javascript"></script>
|
||||
<script src="../src/loaders/json.js" type="text/javascript"></script>
|
||||
<script src="../src/loaders/google_spreadsheet.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: {
|
||||
eventIconPath: "../images/"
|
||||
},
|
||||
datasets: [
|
||||
{
|
||||
title: "Events",
|
||||
id: "events",
|
||||
theme: "purple",
|
||||
type: "gss",
|
||||
options: {
|
||||
// note that your spreadsheet must be published for this to work
|
||||
key: "pjUcDAp-oNIOjmx3LCxT4XA",
|
||||
// map spreadsheet column names to expected ids
|
||||
paramMap: {
|
||||
start: "date"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
bandIntervals: [
|
||||
Timeline.DateTime.WEEK,
|
||||
Timeline.DateTime.MONTH
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<link href="examples.css" type="text/css" rel="stylesheet"/>
|
||||
<style>
|
||||
div#timelinecontainer{
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
div#timeline{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
background: #CCCCCC;
|
||||
}
|
||||
|
||||
div#mapcontainer {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
#timemap {
|
||||
height: 650px;
|
||||
}
|
||||
div#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #EEEEEE;
|
||||
}
|
||||
|
||||
div.infodescription {
|
||||
font-style: normal;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="help">
|
||||
<h1>Data from a Google Spreadsheet</h1>
|
||||
In this example, we're loading items from a Google Spreadsheet (<a href="http://spreadsheets.google.com/pub?key=pjUcDAp-oNIOjmx3LCxT4XA" target=_blank>published here</a>). Your spreadsheet must be published in order for the spreadsheet loader to work.
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
<!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>Google Spreadsheet, Arbitrary Columns 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="../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 src="../src/param.js" type="text/javascript"></script>
|
||||
<script src="../src/loaders/json.js" type="text/javascript"></script>
|
||||
<script src="../src/loaders/google_spreadsheet.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: {
|
||||
eventIconPath: "../images/"
|
||||
},
|
||||
datasets: [
|
||||
{
|
||||
title: "Events",
|
||||
id: "events",
|
||||
theme: "red",
|
||||
type: "gss",
|
||||
options: {
|
||||
// note that your spreadsheet must be published for this to work
|
||||
key: "tu0AB_xb1LtMTuQwIn_ExSQ",
|
||||
// map spreadsheet column names to expected ids
|
||||
paramMap: {
|
||||
start: "date"
|
||||
},
|
||||
// load extra data from non-standard spreadsheet columns
|
||||
extraColumns: [
|
||||
"city",
|
||||
"depthft",
|
||||
"pitno."
|
||||
],
|
||||
// let's do something with that extra data!
|
||||
infoTemplate: "<table style='quarrytable'>" +
|
||||
"<tr><th colspan='2' class='title'>Quarry Details</th></tr>" +
|
||||
"<tr><th>Owner</th><td>{{title}}</td></tr>" +
|
||||
"<tr><th>Name</th><td>{{description}}</td></tr>" +
|
||||
"<tr><th>Location</th><td>{{city}}</td></tr>" +
|
||||
"<tr><th>Depth</th><td>{{depthft}}</td></tr>" +
|
||||
"<tr><th>Pit Number</th><td>{{pitno.}}</td></tr>" +
|
||||
"</table>"
|
||||
}
|
||||
}
|
||||
],
|
||||
bandIntervals: [
|
||||
Timeline.DateTime.YEAR,
|
||||
Timeline.DateTime.DECADE
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<link href="examples.css" type="text/css" rel="stylesheet"/>
|
||||
<style>
|
||||
div#timelinecontainer{
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
div#timeline{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
background: #CCCCCC;
|
||||
}
|
||||
|
||||
div#mapcontainer {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
#timemap {
|
||||
height: 650px;
|
||||
}
|
||||
div#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #EEEEEE;
|
||||
}
|
||||
|
||||
table.quarrytable {
|
||||
border:1px solid #000;
|
||||
width:300px;
|
||||
}
|
||||
|
||||
table.quarrytable tr td {
|
||||
padding: 5px;
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
th.title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="help">
|
||||
<h1>Google Spreadsheet, Arbitrary Columns</h1>
|
||||
In this example, we're loading items from a Google Spreadsheet (<a href="http://spreadsheets.google.com/pub?key=tu0AB_xb1LtMTuQwIn_ExSQ" target=_blank>published here</a>). Additional arbitrary columns are loaded using the "extraColumns" setting, and displayed in the info window.
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,295 +0,0 @@
|
|||
<!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>Google Spreadsheet, Arbitrary Columns 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://maps.google.com/maps/api/js?sensor=false"></script>
|
||||
<script type="text/javascript" src="../lib/jquery-1.6.2.min.js"></script>
|
||||
<script type="text/javascript" src="../lib/mxn/mxn.js?(googlev3)"></script>
|
||||
<script src="../lib/timeline-2.3.0.js" type="text/javascript"></script>
|
||||
<script src="../src/timemap.js" type="text/javascript"></script>
|
||||
<script src="../src/param.js" type="text/javascript"></script>
|
||||
<script src="../src/loaders/json.js" type="text/javascript"></script>
|
||||
<script src="../src/loaders/google_spreadsheet.js" type="text/javascript"></script>
|
||||
<script src="../src/ext/circle_icons.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
// We're going to define a new loader class extending the spreadsheet loader, which
|
||||
// will do both the transformation and the consolidation by title in the preload
|
||||
TimeMap.loaders.custom_gss = function(options) {
|
||||
var loader = new TimeMap.loaders.gss(options),
|
||||
extraColumns = options.extraColumns || [];
|
||||
|
||||
// We want the transform function, but not as such;
|
||||
// save it under a different name and clear the function
|
||||
loader.oldTransform = loader.transform;
|
||||
loader.transform = function(data) { return data; };
|
||||
|
||||
// Do both transform and consolidation in the preload function
|
||||
loader.preload = function(data) {
|
||||
// basic preload: get rows
|
||||
var rows = data.feed.entry,
|
||||
counties = {}, items = [],
|
||||
parser = TimeMap.dateParsers.hybrid,
|
||||
item, i;
|
||||
for (i=0; i < rows.length; i++) {
|
||||
// call the original loader transform to get the formatted object
|
||||
item = loader.oldTransform(rows[i]);
|
||||
// consolidate by title (county)
|
||||
if (!(item.title in counties)) {
|
||||
// make an EventIndex for the data
|
||||
item.options.dates = new SimileAjax.EventIndex(null);
|
||||
// add to county map
|
||||
counties[item.title] = item;
|
||||
}
|
||||
// save the data as a pseudo-event to the EventIndex
|
||||
// (have to wrap in an anonymous function to fix scope)
|
||||
(function(start) {
|
||||
var d = parser(start),
|
||||
datapoint = {
|
||||
// these functions are to make it behave like an event
|
||||
getStart: function() {
|
||||
return d;
|
||||
},
|
||||
getEnd: function() {
|
||||
return d;
|
||||
},
|
||||
getID: function() {
|
||||
return start;
|
||||
}
|
||||
};
|
||||
// add the data we care about; assuming it's extraColumns
|
||||
for (x=0; x < extraColumns.length; x++) {
|
||||
paramName = extraColumns[x];
|
||||
datapoint[paramName] = item.options[paramName];
|
||||
}
|
||||
counties[item.title].options.dates.add(datapoint);
|
||||
})(item.start);
|
||||
}
|
||||
// turn the consolidated items into an array again
|
||||
for (i in counties) {
|
||||
if (counties.hasOwnProperty(i)) {
|
||||
item = counties[i];
|
||||
// while we're at it, let's turn this into a duration event
|
||||
item.start = item.options.dates.getEarliestDate();
|
||||
item.end = item.options.dates.getLatestDate();
|
||||
items.push(item);
|
||||
}
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
// return the customized loader
|
||||
return loader;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the current data, by date, for a particular item.
|
||||
*
|
||||
* @param {Date} d Current date
|
||||
* @return {Object} Most recent data object for the current date
|
||||
*/
|
||||
TimeMapItem.prototype.getData = function(d) {
|
||||
// get center date if none is supplied
|
||||
d = d || this.dataset.timemap.timeline.getBand(0).getMaxVisibleDate(),
|
||||
dates = this.opts.dates;
|
||||
// look for the most recent data point in the past
|
||||
var iterator = dates.getReverseIterator(this.getStart(), d);
|
||||
if (!iterator.hasNext()) {
|
||||
// event only exists in the future
|
||||
return null;
|
||||
}
|
||||
return iterator.next();
|
||||
};
|
||||
|
||||
/**
|
||||
* Make an array of scaled circle icons and add them to a theme
|
||||
*
|
||||
* @param {TimeMapTheme} theme Theme to modify
|
||||
*/
|
||||
TimeMapTheme.addScaledIcons = function(theme) {
|
||||
var imgPath = theme.eventIconPath,
|
||||
icons = [], i,
|
||||
sizes = [4,5,7,10,13,16,20,23,26,28];
|
||||
// make icons
|
||||
for (i=0; i<sizes.length; i++) {
|
||||
icons.push(
|
||||
TimeMapTheme.getCircleUrl(sizes[i], theme.color, 'bb')
|
||||
);
|
||||
}
|
||||
// add to theme
|
||||
theme.scaledIcons = icons;
|
||||
};
|
||||
|
||||
/**
|
||||
* Initialize the filter chain for the heatmap.
|
||||
*/
|
||||
TimeMap.prototype.initHeatmap = function() {
|
||||
// this function needs to be set in the timemap options;
|
||||
// it should take a data object and return a value 0-9
|
||||
var getScaleFromData = tm.opts.getScaleFromData;
|
||||
if (!getScaleFromData) return;
|
||||
|
||||
// add heatmap filter chain
|
||||
tm.addFilterChain("heatmap",
|
||||
// true condition: change marker icon
|
||||
function(item) {
|
||||
var data = item.getData(),
|
||||
theme = item.opts.theme;
|
||||
if (data) {
|
||||
item.showPlacemark();
|
||||
var scale = getScaleFromData(data),
|
||||
newIcon = theme.scaledIcons[scale];
|
||||
// note that this is specific to Google v3
|
||||
item.getNativePlacemark().setIcon(newIcon);
|
||||
} else {
|
||||
item.hidePlacemark();
|
||||
}
|
||||
},
|
||||
// false condition: do nothing
|
||||
function(item) { }
|
||||
);
|
||||
// filter: change icon if visible
|
||||
tm.addFilter("heatmap", function(item) {
|
||||
return item.placemarkVisible;
|
||||
});
|
||||
// add listener for filter chain
|
||||
tm.timeline.getBand(0).addOnScrollListener(function() {
|
||||
tm.filter("heatmap");
|
||||
});
|
||||
};
|
||||
|
||||
var tm;
|
||||
$(function() {
|
||||
// make the theme
|
||||
var theme = TimeMapTheme.createCircleTheme();
|
||||
TimeMapTheme.addScaledIcons(theme);
|
||||
theme.icon = theme.scaledIcons[0];
|
||||
|
||||
tm = TimeMap.init({
|
||||
mapId: "map", // Id of map div element (required)
|
||||
timelineId: "timeline", // Id of timeline div element (required)
|
||||
options: {
|
||||
theme: theme,
|
||||
getScaleFromData: function(data) {
|
||||
return (data["log1.6"] > 9) ? 9 : parseInt(data["log1.6"]);
|
||||
},
|
||||
mapFilter: "hideFuture",
|
||||
// there isn't going to be a good way to show 139 duration events on the timeline
|
||||
noEventLoad: true
|
||||
},
|
||||
datasets: [
|
||||
{
|
||||
title: "Events",
|
||||
id: "events",
|
||||
type: "custom_gss",
|
||||
options: {
|
||||
// note that your spreadsheet must be published for this to work
|
||||
key: "tnobdBZ6zvWAWVZEW-uBW1Q",
|
||||
// map spreadsheet column names to expected ids
|
||||
paramMap: {
|
||||
start: "year"
|
||||
},
|
||||
// load extra data from non-standard spreadsheet columns
|
||||
extraColumns: [
|
||||
"count",
|
||||
"cumulative",
|
||||
"log1.6"
|
||||
],
|
||||
openInfoWindow: function() {
|
||||
var item = this,
|
||||
data = item.getData();
|
||||
item.opts.infoHtml = '<div class="infotitle">' + item.getTitle() + '</div>';
|
||||
if (data) {
|
||||
item.opts.infoHtml += '<div class="itemdata">'
|
||||
+ '<p><em>Year: </em>' + data.getID() + '</p>'
|
||||
+ '<p><em>Deaths: </em>' + data.count + '</p>'
|
||||
+ '<p><em>Cumulative: </em>' + data.cumulative + '</p>'
|
||||
+ '<div>';
|
||||
}
|
||||
// use basic window opener
|
||||
TimeMapItem.openInfoWindowBasic.call(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
// lay out timeline for a thin navigational display
|
||||
bandInfo: [
|
||||
{
|
||||
width: "60%",
|
||||
intervalUnit: Timeline.DateTime.YEAR,
|
||||
intervalPixels: 70
|
||||
},
|
||||
{
|
||||
width: "40%",
|
||||
intervalUnit: Timeline.DateTime.DECADE,
|
||||
intervalPixels: 160
|
||||
}
|
||||
],
|
||||
// set up filter once the timeline is loaded
|
||||
dataDisplayedFunction: function(tm) {
|
||||
tm.initHeatmap();
|
||||
tm.filter("heatmap");
|
||||
},
|
||||
// we aren't loading the items, so we need to set this manually
|
||||
scrollTo: '1969'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<link href="examples.css" type="text/css" rel="stylesheet"/>
|
||||
<style>
|
||||
div#timelinecontainer{
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
}
|
||||
|
||||
div#timeline{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
background: #CCCCCC;
|
||||
}
|
||||
|
||||
div#mapcontainer {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
#timemap {
|
||||
height: 650px;
|
||||
}
|
||||
div#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #EEEEEE;
|
||||
}
|
||||
|
||||
div.itemdata {
|
||||
font-size: 14px;
|
||||
}
|
||||
div.itemdata p {
|
||||
padding: 0;
|
||||
margin: .5em 0 0 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="help">
|
||||
<h1>Temporal Heatmap from a Google Spreadsheet</h1>
|
||||
In this example, we're loading items from a Google Spreadsheet (<a href="http://spreadsheets.google.com/pub?key=tnobdBZ6zvWAWVZEW-uBW1Q" target=_blank>published here</a>) and sizing the markers on the map according to a data point in the spreadsheet (in this case, cumulative deaths from asbestosis and silicosis in Texas). This is still a bit of a work in progress; unfortunately, getting the performance to be reasonable means that the marker click area is a little wonky.
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,146 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<kml xmlns="http://earth.google.com/kml/2.0">
|
||||
<Document>
|
||||
<Placemark>
|
||||
<name>Vredefort</name>
|
||||
<TimeStamp><when>2000-10-01</when></TimeStamp>
|
||||
<ExtendedData>
|
||||
<Data name="Country">
|
||||
<value>South Africa</value>
|
||||
</Data>
|
||||
<Data name="Diameter">
|
||||
<value>300km (~186.4 mile)</value>
|
||||
</Data>
|
||||
<Data name="Age">
|
||||
<value>2023 ± 4 Million years</value>
|
||||
</Data>
|
||||
<Data name="Url">
|
||||
<value>http://en.wikipedia.org/wiki/Vredefort_crater</value>
|
||||
</Data>
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>27.5,-27,0</coordinates>
|
||||
</Point>
|
||||
</Placemark>
|
||||
<Placemark>
|
||||
<name>Sudbury, Ontario</name>
|
||||
<TimeStamp><when>2000-10-02</when></TimeStamp>
|
||||
<ExtendedData>
|
||||
<Data name="Country">
|
||||
<value>Canada</value>
|
||||
</Data>
|
||||
<Data name="Diameter">
|
||||
<value>250km (~155.3 mile)</value>
|
||||
</Data>
|
||||
<Data name="Age">
|
||||
<value>1850 ± 3 Million years</value>
|
||||
</Data>
|
||||
<Data name="Url">
|
||||
<value>http://en.wikipedia.org/wiki/Sudbury_Basin</value>
|
||||
</Data>
|
||||
<Data name="theme">
|
||||
<value>red</value>
|
||||
</Data>
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>-81.1833333333333,46.6,0</coordinates>
|
||||
</Point>
|
||||
</Placemark>
|
||||
<Placemark>
|
||||
<name>Chicxulub, Yucatan</name>
|
||||
<TimeStamp><when>2000-10-03</when></TimeStamp>
|
||||
<ExtendedData>
|
||||
<Data name="Country">
|
||||
<value>Mexico</value>
|
||||
</Data>
|
||||
<Data name="Diameter">
|
||||
<value>170km (~105.6 mile)</value>
|
||||
</Data>
|
||||
<Data name="Age">
|
||||
<value>64.98 ± 0.05 Million years</value>
|
||||
</Data>
|
||||
<Data name="Url">
|
||||
<value>http://en.wikipedia.org/wiki/Chicxulub_crater</value>
|
||||
</Data>
|
||||
<Data name="theme">
|
||||
<value>yellow</value>
|
||||
</Data>
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>-89.5,21.3333333333333,0</coordinates>
|
||||
</Point>
|
||||
</Placemark>
|
||||
<Placemark>
|
||||
<name>Manicouagan, Quebec</name>
|
||||
<TimeStamp><when>2000-10-04</when></TimeStamp>
|
||||
<ExtendedData>
|
||||
<Data name="Country">
|
||||
<value>Canada</value>
|
||||
</Data>
|
||||
<Data name="Diameter">
|
||||
<value>100km (~62.1 mile)</value>
|
||||
</Data>
|
||||
<Data name="Age">
|
||||
<value>214 ± 1 Million years</value>
|
||||
</Data>
|
||||
<Data name="Url">
|
||||
<value>http://en.wikipedia.org/wiki/Manicouagan_crater</value>
|
||||
</Data>
|
||||
<Data name="theme">
|
||||
<value>blue</value>
|
||||
</Data>
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>-68.7,51.3833333333333,0</coordinates>
|
||||
</Point>
|
||||
</Placemark>
|
||||
<Placemark>
|
||||
<name>Popigai</name>
|
||||
<TimeStamp><when>2000-10-05</when></TimeStamp>
|
||||
<ExtendedData>
|
||||
<Data name="Country">
|
||||
<value>Russia</value>
|
||||
</Data>
|
||||
<Data name="Diameter">
|
||||
<value>100km (~62.1 mile)</value>
|
||||
</Data>
|
||||
<Data name="Age">
|
||||
<value>35.7 ± 0.2 Million years</value>
|
||||
</Data>
|
||||
<Data name="Url">
|
||||
<value>http://en.wikipedia.org/wiki/Popigai_crater</value>
|
||||
</Data>
|
||||
<Data name="theme">
|
||||
<value>orange</value>
|
||||
</Data>
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>111.183333333333,71.65,0</coordinates>
|
||||
</Point>
|
||||
</Placemark>
|
||||
<Placemark>
|
||||
<name>Acraman, South Australia</name>
|
||||
<TimeStamp><when>2000-10-06</when></TimeStamp>
|
||||
<ExtendedData>
|
||||
<Data name="Country">
|
||||
<value>Australia</value>
|
||||
</Data>
|
||||
<Data name="Diameter">
|
||||
<value>90km (~55.9 mile)</value>
|
||||
</Data>
|
||||
<Data name="Age">
|
||||
<value>~ 590 Million years</value>
|
||||
</Data>
|
||||
<Data name="Url">
|
||||
<value>http://en.wikipedia.org/wiki/Acraman_crater</value>
|
||||
</Data>
|
||||
<Data name="theme">
|
||||
<value>purple</value>
|
||||
</Data>
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>135.45,-32.0166666666667,0</coordinates>
|
||||
</Point>
|
||||
</Placemark>
|
||||
</Document>
|
||||
</kml>
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
<!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>Timemap.js Examples</title>
|
||||
<link href="examples.css" type="text/css" rel="stylesheet"/>
|
||||
|
||||
<style type="text/css">
|
||||
dt {
|
||||
font-weight: bold;
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
dd {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
p {
|
||||
margin-top: 2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="help">
|
||||
<h1>Timemap.js Examples</h1>
|
||||
|
||||
<h2>Basic Examples</h2>
|
||||
<p>How to load and display data using different map providers and Timeline versions.</p>
|
||||
<dl>
|
||||
|
||||
<dt><a href="basic_googlev2.html">Basic Example, Google v2</a></dt>
|
||||
<dt><a href="basic_googlev3.html">Basic Example, Google v3</a></dt>
|
||||
<dt><a href="basic_openlayers.html">Basic Example, OpenLayers</a></dt>
|
||||
<dt><a href="basic_microsoft.html">Basic Example, Bing Maps</a></dt>
|
||||
<dt><a href="basic_tl230.html">Basic Example, Timeline v2.3.0</a></dt>
|
||||
</dl>
|
||||
|
||||
<h2>Other Loaders</h2>
|
||||
<p>How to load data from external files.</p>
|
||||
<dl>
|
||||
<dt><a href="kenya.html">Kenya KML Example</a></dt>
|
||||
<dd>Demonstrates: Loading data using KML, setting bandInfo to customize the timeline.</dd>
|
||||
|
||||
<dt><a href="google_spreadsheet.html">Google Spreadsheet Example</a></dt>
|
||||
<dd>Demonstrates: Loading data from a Google Spreadsheet</dd>
|
||||
|
||||
<dt><a href="earthquake_georss.html">Earthquake GeoRSS Example</a></dt>
|
||||
<dd>Demonstrates: Loading data using GeoRSS</dd>
|
||||
</dl>
|
||||
|
||||
<h2>More Involved Examples</h2>
|
||||
<p>How to do more interesting stuff with loaded data.</p>
|
||||
<dl>
|
||||
<dt><a href="placemarks.html">Placemarks Example</a></dt>
|
||||
<dd>Demonstrates: Loading various types of placemarks.</dd>
|
||||
|
||||
<dt><a href="google_spreadsheet_columns.html">Google Spreadsheet Example, Arbitrary Columns</a></dt>
|
||||
<dd>Demonstrates: Loading Google Spreadsheet data with additional non-standard columns.</dd>
|
||||
|
||||
<dt><a href="kml_extendeddata.html">KML Example: Loading ExtendedData</a></dt>
|
||||
<dd>Demonstrates: Loading arbitrary data in KML using ExtendedData elements, setting themes in KML.</dd>
|
||||
|
||||
<dt><a href="artists.html">Renaissance Artists and Authors Example</a></dt>
|
||||
<dd>Demonstrates: Loading data from Freebase.com, hiding and showing datasets</dd>
|
||||
|
||||
<dt><a href="filter.html">Filter Example</a></dt>
|
||||
<dd>Demonstrates: Using filter chains to filter on custom criteria</dd>
|
||||
|
||||
<dt><a href="data_themes.html">Data Themes Example</a></dt>
|
||||
<dd>Demonstrates: Using item data to define themes at load time</dd>
|
||||
|
||||
<dt><a href="progressive.html">Progressive Loading</a></dt>
|
||||
<dd>Demonstrates: Using the progressive loader to load additional data as the timeline is scrolled</dd>
|
||||
|
||||
<dt><a href="state.html#zoom=8¢er=44.04811573082351,13.29345703125&date=1500-01-21T12:17:37Z&selected=artists-0">State Loading</a></dt>
|
||||
<dd>Demonstrates: Loading timemap state (map position, timeline position, etc) via the hash portion of the URL.</dd>
|
||||
|
||||
</dl>
|
||||
<h2>Advanced Examples</h2>
|
||||
<p>Some complicated stuff to give you an idea of what the library can be used for.</p>
|
||||
<dl>
|
||||
|
||||
<dt><a href="google_spreadsheet_heatmap.html">Temporal Heatmap from a Google Spreadsheet</a></dt>
|
||||
<dd>Demonstrates: Sizing icons over time according to a particular data element, consolidating rows from a Google Spreadsheet into single items.</dd>
|
||||
|
||||
<dt><a href="google_earth_sync.html">Timemap Synchronized with Google Earth</a></dt>
|
||||
<dd>Demonstrates: What it says :).</dd>
|
||||
|
||||
<dt><a href="pathlines.html">Flickr Photos with Pathlines</a></dt>
|
||||
<dd>Demonstrates: Loading JSON data from Flickr, using filters to add lines between points</dd>
|
||||
|
||||
<dt><a href="polytween.html">Polygon Tweening</a></dt>
|
||||
<dd>Demonstrates: Using filters to tween polygons over time</dd>
|
||||
|
||||
</dl>
|
||||
|
||||
<p>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 <a href="http://timemap.googlecode.com/svn/trunk/examples/index.html">online version</a> if you have any problems.</p>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
<!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="../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 src="../src/param.js" type="text/javascript"></script>
|
||||
<script src="../src/loaders/xml.js" type="text/javascript"></script>
|
||||
<script src="../src/loaders/kml.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: {
|
||||
eventIconPath: "../images/"
|
||||
},
|
||||
datasets: [
|
||||
{
|
||||
title: "Violence in Kenya",
|
||||
theme: "red",
|
||||
type: "kml", // Data to be loaded in KML - must be a local URL
|
||||
options: {
|
||||
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>
|
||||
<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>, though it looks like the links no longer work). The bandInfo setting allows us to set a custom layout the timeline, and we've resized the timeline and map with CSS. (Note that some browsers 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>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,85 +0,0 @@
|
|||
<!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>KML Example: Loading ExtendedData</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 src="../src/param.js" type="text/javascript"></script>
|
||||
<script src="../src/loaders/xml.js" type="text/javascript"></script>
|
||||
<script src="../src/loaders/kml.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: {
|
||||
eventIconPath: "../images/"
|
||||
},
|
||||
datasets: [
|
||||
{
|
||||
title: "Six largest impact structures",
|
||||
theme: "green",
|
||||
type: "kml",
|
||||
options: {
|
||||
url: "impacts.kml", // KML file to load
|
||||
// array of ExtendedData elements to look for
|
||||
extendedData: ["Country", "Diameter", "Age", "Url", "theme"],
|
||||
tagMap: {
|
||||
"Url":"wiki_link"
|
||||
},
|
||||
// template for loaded data
|
||||
infoTemplate: '<strong><a href="{{wiki_link}}" target="_blank">{{title}}, ' +
|
||||
'{{Country}}</a></strong><br><br>' +
|
||||
'<strong>Age:</strong> {{Age}}<br>' +
|
||||
'<strong>Diameter:</strong> {{Diameter}}<br>'
|
||||
}
|
||||
}
|
||||
],
|
||||
bandInfo: [
|
||||
{
|
||||
width: "85%",
|
||||
intervalUnit: Timeline.DateTime.DAY,
|
||||
intervalPixels: 100
|
||||
},
|
||||
{
|
||||
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: 200px; }
|
||||
div#mapcontainer{ height: 400px; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="help">
|
||||
<h1>KML Example: Loading ExtendedData</h1>
|
||||
In this example, we're loading a KML file of meteorite impact structures with ExtendedData elements and using a custom template for the info window to display the loaded data. We're also using ExtendedData to load different themes for each item. <a href="http://code.google.com/apis/kml/documentation/extendeddata.html">Learn more about ExtendedData here.</a> (Okay, so the dates here are a little arbitrary - sometime soon I'll figure out a good way to display dates in the negative millions of years...)
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
<!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>Flickr Photos with Pathlines</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 src="../src/loaders/json.js" type="text/javascript"></script>
|
||||
<script src="../src/loaders/flickr.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: {
|
||||
eventIconPath: "../images/"
|
||||
},
|
||||
datasets: [
|
||||
{
|
||||
title: "Photos",
|
||||
id: "photos",
|
||||
theme: "green",
|
||||
// load JSON data from Flickr - see the Flickr API for more info
|
||||
type: "flickr",
|
||||
options: {
|
||||
// Thanks to Ken-ichi for his geotagged photos
|
||||
url: "http://www.flickr.com/services/feeds/geo/?format=json&id=18024068@N00&jsoncallback=?"
|
||||
}
|
||||
}
|
||||
],
|
||||
bandIntervals: [
|
||||
Timeline.DateTime.DAY,
|
||||
Timeline.DateTime.WEEK
|
||||
],
|
||||
// make pathlines. This is accomplished by adding a new filter chain with a new filter
|
||||
dataDisplayedFunction: function(tm) {
|
||||
// new filter chain for map lines
|
||||
tm.addFilterChain("pathlines",
|
||||
// true condition: add a pathline
|
||||
function(item) {
|
||||
if (!item.pathline && !item.skip) {
|
||||
// obviously this is Google-specific, but I think it could be abstracted
|
||||
item.pathline = new GPolyline([
|
||||
item.opts.infoPoint.toProprietary('google'),
|
||||
item.next.opts.infoPoint.toProprietary('google')
|
||||
], "#0000CC");
|
||||
tm.getNativeMap().addOverlay(item.pathline);
|
||||
}
|
||||
},
|
||||
// false condition: remove a pathline
|
||||
function(item) {
|
||||
if (item.pathline) {
|
||||
tm.getNativeMap().removeOverlay(item.pathline);
|
||||
item.pathline = null;
|
||||
}
|
||||
}
|
||||
);
|
||||
// define the filter that creates the pathlines
|
||||
tm.addFilter("pathlines", function(item) {
|
||||
if (!item.next && item.event && !item.skip) {
|
||||
// use the Timeline sequential iterator
|
||||
var i = tm.timeline.getBand(0).getEventSource().getEventIterator(item.event.getStart(), new Date());
|
||||
FINDNEXT: {
|
||||
while (!item.next) {
|
||||
if (i.hasNext()) {
|
||||
var next = i.next().item;
|
||||
// if the next one's taken we can skip
|
||||
if (next.taken) {
|
||||
item.skip = true;
|
||||
break FINDNEXT;
|
||||
}
|
||||
// skip missing placemarks at the same location
|
||||
if (next.placemark && !item.opts.infoPoint.equals(next.opts.infoPoint)) {
|
||||
item.next = next;
|
||||
next.taken = true;
|
||||
}
|
||||
}
|
||||
else break FINDNEXT;
|
||||
}
|
||||
}
|
||||
}
|
||||
return (item.next && item.placemarkVisible && item.next.placemarkVisible);
|
||||
});
|
||||
// invoke the filter once data is displayed
|
||||
tm.filter("pathlines");
|
||||
// update map on timeline scroll
|
||||
tm.timeline.getBand(0).addOnScrollListener(function() {
|
||||
tm.filter("pathlines");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<link href="examples.css" type="text/css" rel="stylesheet"/>
|
||||
<style>
|
||||
div#timelinecontainer{ height: 300px; }
|
||||
div#mapcontainer{ height: 400px; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="help">
|
||||
<h1>Flickr Photos with Pathlines</h1>
|
||||
This example loads geotagged Flickr photos (thanks, <a href="http://flickr.com/photos/ken-ichi/">Ken-ichi</a>!), displays them on the map and timeline, and draws lines between them sequentially, creating a rough route map (you may need to zoom in to see the effect). The lines are created using a filter that creates the line elements and shows or hides them based on the timeline location.
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,154 +0,0 @@
|
|||
<!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>Placemarks Example</title>
|
||||
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
|
||||
<script type="text/javascript" src="../lib/jquery-1.6.2.min.js"></script>
|
||||
<script type="text/javascript" src="../lib/mxn/mxn.js?(googlev3)"></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: [
|
||||
{
|
||||
type: "basic",
|
||||
options: {
|
||||
items: [
|
||||
{
|
||||
start : "2010-01-01",
|
||||
point : {
|
||||
lat : 43.7717,
|
||||
lon : 11.2536
|
||||
},
|
||||
title : "Marker Placemark",
|
||||
options : {
|
||||
description: "Just a plain old marker",
|
||||
theme: "purple"
|
||||
}
|
||||
},
|
||||
{
|
||||
start : "2010-02-01",
|
||||
polygon : [
|
||||
{lat: 46.34692761055676, lon: 6.1083984375},
|
||||
{lat: 47.54687159892238, lon: 6.8115234375},
|
||||
{lat: 47.66538735632654, lon: 9.404296875},
|
||||
{lat: 47.18971246448421, lon: 9.4482421875},
|
||||
{lat: 46.9502622421856, lon: 10.37109375},
|
||||
{lat: 46.37725420510028, lon: 9.931640625},
|
||||
{lat: 45.89000815866184, lon: 7.0751953125},
|
||||
{lat: 46.34692761055676, lon: 6.1083984375}
|
||||
],
|
||||
title : "Polygon Placemark",
|
||||
options : {
|
||||
description: "I'm shaped vaguely like Switzerland!",
|
||||
theme: "orange"
|
||||
}
|
||||
},
|
||||
{
|
||||
start : "2010-04-01",
|
||||
overlay : {
|
||||
north: 51.45115,
|
||||
south: 42.088787,
|
||||
east: 9.349365,
|
||||
west: -5.657959,
|
||||
image: "http://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Flag-map_of_France.svg/500px-Flag-map_of_France.svg.png"
|
||||
},
|
||||
title : "Overlay Placemark",
|
||||
options : {
|
||||
description: "Unfortunately, I cannot be hidden at this time, so you're stuck with me. Also I don't register click events. Basically, I am rudely in the way but unwilling to pay attention to you. Vive la France!"
|
||||
}
|
||||
},
|
||||
{
|
||||
start : "2010-03-01",
|
||||
polyline : [
|
||||
{lat: 48.86471476180277, lon: 2.28515625},
|
||||
{lat: 45.82879925192134, lon: 4.74609375},
|
||||
{lat: 45.49094569262732, lon: 9.140625},
|
||||
{lat: 41.934976500546604, lon: 12.392578125}
|
||||
],
|
||||
title : "Polyline Placemark",
|
||||
options : {
|
||||
description: "I'm a series of straight lines! My info window is anchored at the middle point of the polyline.",
|
||||
theme: "red",
|
||||
// any additional theme settings can go here
|
||||
lineWeight: 5
|
||||
}
|
||||
},
|
||||
{
|
||||
start : "2010-05-01",
|
||||
placemarks: [
|
||||
{
|
||||
polyline: [
|
||||
{lat: 48.22467264956519, lon: 16.32568359375},
|
||||
{lat: 47.517200697839414, lon: 18.984375},
|
||||
{lat: 45.84410779560204, lon: 15.9521484375},
|
||||
{lat: 48.22467264956519, lon: 16.32568359375}
|
||||
],
|
||||
},
|
||||
{
|
||||
point: {
|
||||
lat: 48.22467264956519,
|
||||
lon: 16.32568359375
|
||||
}
|
||||
},
|
||||
{
|
||||
point: {
|
||||
lat: 47.517200697839414,
|
||||
lon: 18.984375
|
||||
}
|
||||
},
|
||||
{
|
||||
point: {
|
||||
lat: 45.84410779560204,
|
||||
lon: 15.9521484375
|
||||
}
|
||||
}
|
||||
],
|
||||
title : "Multiple Placemark Item",
|
||||
options : {
|
||||
description: ""I am large, I contain multitudes."—Walt Whitman<br>My info window is anchored based on the first loaded item.",
|
||||
theme: "blue"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
bandIntervals: "mon"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<link href="examples.css" type="text/css" rel="stylesheet"/>
|
||||
<style>
|
||||
div#timelinecontainer{ height: 200px; }
|
||||
div#mapcontainer{ height: 400px; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="help">
|
||||
<h1>Placemarks Example</h1>
|
||||
This example demonstrates the different placemarks you can load on the map. Sadly, at the moment, overlay images are pretty much stuck there once you put them on the map, and don't support hide/show or click events - eventually I'll extend Mapstraction to fix this.
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
<!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>Polygon Tweening</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: {
|
||||
eventIconPath: "../images/"
|
||||
},
|
||||
datasets: [
|
||||
{
|
||||
title: "Photos",
|
||||
id: "photos",
|
||||
theme: "blue",
|
||||
type: "basic",
|
||||
options: {
|
||||
items: [
|
||||
{ // polyline
|
||||
"start" : "1980-01-02",
|
||||
"end" : "1990-01-02",
|
||||
"polygon" : [{"lat":43.79488907226601,"lon":11.205711364746094},{"lat":43.812977041006626,"lon":11.228370666503906},{"lat":43.7859669617277,"lon":11.2664794921875},{"lat":43.8028187190472,"lon":11.279182434082031},{"lat":43.78819761422739,"lon":11.277122497558594},{"lat":43.78398408962279,"lon":11.294631958007812},{"lat":43.76464763976463,"lon":11.182365417480469},{"lat":43.79488907226601,"lon":11.205711364746094}],
|
||||
"title" : "Firenze",
|
||||
"options" : {
|
||||
"description": "Testing a polygon tween of Firenze",
|
||||
"endpoly": [{"lat":43.81025180712872,"lon":11.1566162109375},{"lat":43.84492732139371,"lon":11.22802734375},{"lat":43.81669306861421,"lon":11.2554931640625},{"lat":43.81669306861421,"lon":11.311111450195312},{"lat":43.799349628071965,"lon":11.337890625},{"lat":43.77506035122469,"lon":11.370162963867188},{"lat":43.7641517511446,"lon":11.35986328125},{"lat":43.81025180712872,"lon":11.1566162109375}]
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
bandIntervals: [
|
||||
Timeline.DateTime.YEAR,
|
||||
Timeline.DateTime.DECADE
|
||||
],
|
||||
// make pathlines
|
||||
dataDisplayedFunction: function(tm) {
|
||||
// new filter chain for poly tweening
|
||||
tm.addFilterChain("polytween",
|
||||
function(item) {
|
||||
// create tween if item is visible
|
||||
if (item.visible) {
|
||||
var theme = item.opts.theme || item.dataset.opts.theme;
|
||||
var pm = item.placemark;
|
||||
var ep = item.opts.endpoly;
|
||||
// get tween percent
|
||||
var now = item.dataset.timemap.timeline.getBand(0)
|
||||
.getCenterVisibleDate().getTime();
|
||||
var start = item.event.getStart().getTime();
|
||||
var end = item.event.getEnd().getTime();
|
||||
var percent;
|
||||
if (now < start) percent = 0;
|
||||
else if (now > end) percent = 1;
|
||||
else percent = 1 - ((end - now) / (end - start));
|
||||
// assume the same number of vertices
|
||||
var points=[], pt1, pt2;
|
||||
for (var x=0; x<pm.points.length; x++) {
|
||||
pt1 = pm.points[x];
|
||||
pt2 = ep[x];
|
||||
points.push(new mxn.LatLonPoint(
|
||||
(pt1.lat + ((parseFloat(pt2.lat) - pt1.lat) * percent)),
|
||||
(pt1.lng + ((parseFloat(pt2.lon) - pt1.lng) * percent))
|
||||
));
|
||||
// remove the old tween
|
||||
if (item.tween) item.map.removePolyline(item.tween);
|
||||
// hide the real placemark
|
||||
item.placemark.hide();
|
||||
// show the new tween
|
||||
item.tween = new mxn.Polyline(points),
|
||||
item.tween.addData({
|
||||
color: theme.lineColor,
|
||||
width: theme.lineWeight,
|
||||
opacity: theme.lineOpacity,
|
||||
closed: true,
|
||||
fillColor: theme.fillColor,
|
||||
fillOpacity: theme.fillOpacity
|
||||
});
|
||||
item.map.addPolyline(item.tween);
|
||||
}
|
||||
} else {
|
||||
// remove tween if any
|
||||
if (item.tween) {
|
||||
item.map.removePolyline(item.tween);
|
||||
item.tween = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
function(item) {
|
||||
}
|
||||
);
|
||||
tm.addFilter("polytween", function(item) {
|
||||
return (item.event && item.placemark &&
|
||||
!item.event.isInstant() && item.getType() == 'polygon' &&
|
||||
item.opts.endpoly);
|
||||
});
|
||||
tm.filter("polytween");
|
||||
// update map on timeline scroll
|
||||
tm.timeline.getBand(0).addOnScrollListener(function() {
|
||||
tm.filter("polytween");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<link href="examples.css" type="text/css" rel="stylesheet"/>
|
||||
<style>
|
||||
div#timelinecontainer{ height: 150px; }
|
||||
div#mapcontainer{ height: 450px; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="help">
|
||||
<h1>On-the-fly Polygon Tweening</h1>
|
||||
This example uses a custom filter to smoothly tween a polygon between a beginning set of vertices and an ending set. I'm not sure I'd recommend this as an implementation - among other things it's rough on slow computers, especially as you increase the number of vertices - but you get the idea.
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
<!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>Progressive Loading 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="../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-2.3.0.js"></script>
|
||||
<script src="../src/timemap.js" type="text/javascript"></script>
|
||||
<script src="../src/loaders/json.js" type="text/javascript"></script>
|
||||
<script src="../src/loaders/progressive.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: {
|
||||
eventIconPath: "../images/"
|
||||
},
|
||||
datasets: [
|
||||
{
|
||||
title: "Progressive Dataset",
|
||||
theme: "green",
|
||||
type: "progressive",
|
||||
options: {
|
||||
// Data to be loaded in JSON from a remote URL
|
||||
type: "json",
|
||||
// url with start/end placeholders
|
||||
url: "http://www.nickrabinowitz.com/projects/timemap/progsvc.php?start=[start]&end=[end]&callback=?",
|
||||
start: "2004-10-15",
|
||||
// lower cutoff date for data
|
||||
dataMinDate: "2004-10-15",
|
||||
// four months in milliseconds
|
||||
interval: 10368000000,
|
||||
// function to turn date into string appropriate for service
|
||||
formatDate: function(d) {
|
||||
return TimeMap.util.formatDate(d, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
bandIntervals: "wk"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<link href="examples.css" type="text/css" rel="stylesheet"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="help">
|
||||
<h1>Progressive Loading</h1>
|
||||
In this example, we're loading data from a JSON service that takes start and end date parameters; data is loaded progressively as the user scrolls the timeline. This is a good idea for very large datasets spread out over a long period of time. (For this demonstration, I'm just using a mock service that returns random data - <a href="https://gist.github.com/1129009">see the PHP code here.</a>)
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
<!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>State Loading 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="../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 src="../src/param.js" type="text/javascript"></script>
|
||||
<script src="../src/state.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var tm;
|
||||
$(function() {
|
||||
|
||||
// If you include the state.js file (or use timemap_full.pack.js)
|
||||
// and have state information in the hash, it will be used for the configuration
|
||||
|
||||
tm = TimeMap.init({
|
||||
mapId: "map", // Id of map div element (required)
|
||||
timelineId: "timeline", // Id of timeline div element (required)
|
||||
options: {
|
||||
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" : "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
|
||||
]
|
||||
});
|
||||
});
|
||||
</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>Loading State from the URL</h1>
|
||||
In this example, we're getting the timemap state from the hash portion of the URL (the part after the "#"). This should work in all browsers the first time you come to the page, and in browsers that support the "onhashchange" event (IE8, FF3, Chrome), you should be able to use in-page links to set the state as well, e.g. <a href="#zoom=9¢er=43.83,11.06&date=1500-01-21T12:15:49Z&selected=artists-1">#zoom=9&center=43.83,11.06&date=1500-01-21T12:15:49Z&selected=1</a> (if you're using another browser, try clicking this link then reloading).<br><br>
|
||||
You can also <a href="javascript:alert(tm.getStateUrl());">get the URL for the current state</a>.
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,150 +0,0 @@
|
|||
<!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>Filter 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="../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-2.3.0.js"></script>
|
||||
<script src="../src/timemap.js" type="text/javascript"></script>
|
||||
<script src="../src/manipulation.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)
|
||||
datasets: [
|
||||
{
|
||||
id: "artists",
|
||||
title: "Artists",
|
||||
type: "basic",
|
||||
options: {
|
||||
items: [
|
||||
{
|
||||
"start" : "1449-01-01",
|
||||
"end" : "1492-04-09",
|
||||
"point" : {
|
||||
"lat" : 43.76849063719358,
|
||||
"lon" : 11.25575065612793
|
||||
},
|
||||
"title" : "Lorenzo de' Medici",
|
||||
"options" : {
|
||||
description: "tags: ['patron']",
|
||||
tags: ['patron']
|
||||
}
|
||||
},
|
||||
{
|
||||
"start" : "1449",
|
||||
"end" : "1494-01-11",
|
||||
"point" : {
|
||||
"lat" : 43.7,
|
||||
"lon" : 11.28
|
||||
},
|
||||
"title" : "Domenico Ghirlandaio",
|
||||
"options" : {
|
||||
theme: 'orange',
|
||||
description: "tags: ['painter']",
|
||||
tags: ['painter']
|
||||
}
|
||||
},
|
||||
{
|
||||
"start" : "1452",
|
||||
"end" : "1519",
|
||||
"point" : {
|
||||
"lat" : 43.8166666667,
|
||||
"lon" : 10.7666666667
|
||||
},
|
||||
"title" : "Leonardo da Vinci",
|
||||
"options" : {
|
||||
theme: 'blue',
|
||||
description: "tags: ['painter','sculptor','inventor']",
|
||||
tags: ['painter','sculptor','inventor']
|
||||
}
|
||||
},
|
||||
{
|
||||
"start" : "1475",
|
||||
"end" : "1564",
|
||||
"point" : {
|
||||
"lat" : 43.6433,
|
||||
"lon" : 11.9875
|
||||
},
|
||||
"title" : "Michelangelo",
|
||||
"options" : {
|
||||
theme: 'green',
|
||||
description: "tags: ['painter','sculptor']",
|
||||
tags: ['painter','sculptor']
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
bandIntervals: [
|
||||
Timeline.DateTime.DECADE,
|
||||
Timeline.DateTime.CENTURY
|
||||
]
|
||||
});
|
||||
|
||||
// filter function for tags
|
||||
var hasSelectedTag = function(item) {
|
||||
console.log(item.opts.tags.indexOf(window.selectedTag));
|
||||
// if no tag was selected, everything passes
|
||||
return !window.selectedTag || (
|
||||
// item has tags?
|
||||
item.opts.tags &&
|
||||
// tag found? (note - will work in IE; Timemap extends the Array prototype if necessary)
|
||||
item.opts.tags.indexOf(window.selectedTag) >= 0
|
||||
);
|
||||
};
|
||||
|
||||
// add our new function to the map and timeline filters
|
||||
tm.addFilter("map", hasSelectedTag); // hide map markers on fail
|
||||
tm.addFilter("timeline", hasSelectedTag); // hide timeline events on fail
|
||||
|
||||
// onChange handler for pulldown menu
|
||||
$('#tag_select').change(function() {
|
||||
window.selectedTag = $(this).val();
|
||||
// run filters
|
||||
tm.filter('map');
|
||||
tm.filter('timeline');
|
||||
});
|
||||
});
|
||||
|
||||
</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>Filters</h1>
|
||||
In this example, we've loaded a set of tags for each item, and can use this dropdown menu to filter based on tags:
|
||||
<form>
|
||||
<select id="tag_select">
|
||||
<option value="">All tags</option>
|
||||
<option value="painter">painter</option>
|
||||
<option value="sculptor">sculptor</option>
|
||||
<option value="inventor">inventor</option>
|
||||
<option value="patron">patron</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
<div id="timemap">
|
||||
<div id="timelinecontainer">
|
||||
<div id="timeline"></div>
|
||||
</div>
|
||||
<div id="mapcontainer">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,185 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<kml xmlns="http://earth.google.com/kml/2.0">
|
||||
<Document>
|
||||
<Placemark>
|
||||
<name>Test name</name>
|
||||
|
||||
<ExtendedData>
|
||||
|
||||
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>-66.6414,45.9624,0</coordinates>
|
||||
</Point>
|
||||
</Placemark><Placemark>
|
||||
<name>Test name</name>
|
||||
|
||||
|
||||
<ExtendedData>
|
||||
|
||||
|
||||
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>-78.8509,42.9284,0</coordinates>
|
||||
</Point>
|
||||
</Placemark><Placemark>
|
||||
<name>Test name</name>
|
||||
|
||||
|
||||
<ExtendedData>
|
||||
|
||||
|
||||
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>-63.4711,44.7028,0</coordinates>
|
||||
</Point>
|
||||
</Placemark><Placemark>
|
||||
<name>Test name</name>
|
||||
|
||||
|
||||
<ExtendedData>
|
||||
|
||||
|
||||
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>-84.6178,45.8531,0</coordinates>
|
||||
</Point>
|
||||
</Placemark><Placemark>
|
||||
<name>Test name</name>
|
||||
|
||||
|
||||
<ExtendedData>
|
||||
|
||||
|
||||
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>-80.3311,43.0318,0</coordinates>
|
||||
</Point>
|
||||
</Placemark><Placemark>
|
||||
<name>Test name</name>
|
||||
|
||||
|
||||
<ExtendedData>
|
||||
|
||||
|
||||
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>-79.1063,43.1586,0</coordinates>
|
||||
</Point>
|
||||
</Placemark><Placemark>
|
||||
<name>Test name</name>
|
||||
|
||||
|
||||
<ExtendedData>
|
||||
|
||||
|
||||
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>-83.1143,42.1035,0</coordinates>
|
||||
</Point>
|
||||
</Placemark><Placemark>
|
||||
<name>Test name</name>
|
||||
|
||||
|
||||
<ExtendedData>
|
||||
|
||||
|
||||
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>-79.0528,43.161,0</coordinates>
|
||||
</Point>
|
||||
</Placemark><Placemark>
|
||||
<name>Test name</name>
|
||||
|
||||
|
||||
<ExtendedData>
|
||||
|
||||
|
||||
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>-83.1154,41.3462,0</coordinates>
|
||||
</Point>
|
||||
</Placemark><Placemark>
|
||||
<name>Test name</name>
|
||||
|
||||
|
||||
<ExtendedData>
|
||||
|
||||
|
||||
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>-74.6425,45.0028,0</coordinates>
|
||||
</Point>
|
||||
</Placemark><Placemark>
|
||||
<name>Test name</name>
|
||||
|
||||
|
||||
<ExtendedData>
|
||||
|
||||
|
||||
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>-76.493,44.2246,0</coordinates>
|
||||
</Point>
|
||||
</Placemark><Placemark>
|
||||
<name>Test name</name>
|
||||
|
||||
|
||||
<ExtendedData>
|
||||
|
||||
|
||||
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>-73.4468,44.6818,0</coordinates>
|
||||
</Point>
|
||||
</Placemark><Placemark>
|
||||
<name>Test name</name>
|
||||
|
||||
|
||||
<ExtendedData>
|
||||
|
||||
|
||||
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>-81.7057,42.6941,0</coordinates>
|
||||
</Point>
|
||||
</Placemark><Placemark>
|
||||
<name>Test name</name>
|
||||
<description><![CDATA[]]></description>
|
||||
<TimeStamp><when>1813-06-24</when></TimeStamp>
|
||||
<ExtendedData>
|
||||
|
||||
|
||||
<Data name="theme"><value>theme8</value></Data><Data name="tags"><value>category8,category6,category4,category2</value></Data>
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>-79.2016,43.1227,0</coordinates>
|
||||
</Point>
|
||||
</Placemark><Placemark>
|
||||
<name>Test name</name>
|
||||
|
||||
|
||||
<ExtendedData>
|
||||
|
||||
<Data name="theme"><value>blue</value></Data>
|
||||
|
||||
<Data name="noEventLoad"><value>true</value></Data>
|
||||
|
||||
</ExtendedData>
|
||||
<Point>
|
||||
<coordinates>-76.954,38.9282,0</coordinates>
|
||||
</Point>
|
||||
</Placemark></Document>
|
||||
</kml>
|
||||
Loading…
Reference in New Issue