220 lines
8.3 KiB
HTML
220 lines
8.3 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
|
|
<title>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>
|