Skip to content

Commit

Permalink
starting to merge branch and trunk
Browse files Browse the repository at this point in the history
  • Loading branch information
nick.rabinowitz@gmail.com committed Jan 9, 2011
1 parent 8b5625f commit 4c89dfb
Show file tree
Hide file tree
Showing 23 changed files with 632 additions and 430 deletions.
36 changes: 19 additions & 17 deletions examples/artists.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,19 @@
<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.4.4.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="../timemap.js" type="text/javascript"></script>
<script src="../lib/json2.pack.js" type="text/javascript"></script>
<script src="../loaders/json.js" type="text/javascript"></script>
<script src="../loaders/metaweb.js" type="text/javascript"></script>
<script src="../manipulation.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 onLoad() {
$(function() {

// These two queries are in the Metaweb Query Language syntax.
// See http://www.freebase.com/view/freebase/api for more details.
Expand Down Expand Up @@ -102,20 +104,20 @@
],
bandInfo: [
{
width: "85%",
intervalUnit: Timeline.DateTime.DECADE,
intervalPixels: 200,
theme: theme
},
{
width: "15%",
intervalUnit: Timeline.DateTime.CENTURY,
intervalPixels: 300,
overview: true
width: "85%",
intervalUnit: Timeline.DateTime.DECADE,
intervalPixels: 200,
theme: theme
},
{
width: "15%",
intervalUnit: Timeline.DateTime.CENTURY,
intervalPixels: 300,
overview: true
}
]
});
}
});


function transformPersonData(data) {
Expand Down Expand Up @@ -200,7 +202,7 @@
</style>
</head>

<body onload="onLoad();" onunload="GUnload();">
<body onload="onLoad();">

<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 &ndash; 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>

Expand Down
22 changes: 12 additions & 10 deletions examples/basic.html → examples/basic_googlev2.html
100755 → 100644
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,22 @@
<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://maps.google.com/maps?file=api&v=2&key=ABQIAAAASI0kCI-azC8RgbOZzWc3VRRarOQe_TKf_51Omf6UUSOFm7EABRRhO0PO4nBAO9FCmVDuowVwROLo3w"
type="text/javascript"></script>
<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.4.4.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="../timemap.js" type="text/javascript"></script>
<script type="text/javascript">
<script src="../src/timemap.js" type="text/javascript"></script>
<script type="text/javascript">

var tm;
function onLoad() {
$(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: [
Expand Down Expand Up @@ -81,18 +83,18 @@
]
});
// manipulate the timemap further here if you like
}
});
</script>
<link href="examples.css" type="text/css" rel="stylesheet"/>
<link href="examples.css" type="text/css" rel="stylesheet"/>
<style>
div#timelinecontainer{ height: 300px; }
div#mapcontainer{ height: 300px; }
</style>
</head>

<body onload="onLoad();" onunload="GUnload();">
<body onload="onLoad();">
<div id="help">
<h1>Basic Example, Timeline v.1.2</h1>
<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">
Expand Down
133 changes: 133 additions & 0 deletions examples/basic_googlev3.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
<!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.4.4.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 onload="onLoad();">
<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>
116 changes: 116 additions & 0 deletions examples/basic_microsoft.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<!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.4.4.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 onload="onLoad();">
<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>
Loading

0 comments on commit 4c89dfb

Please sign in to comment.