Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

executable file 198 lines (183 sloc) 7.782 kB
<!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>Darfield earthquake timeline</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA69DfOEx1y1daALUHQUXAXBTTo2ugwXF-rwj8SU4JkiH73zqXbRQctklcY5DNaxz_swtlbgPjP3YmXg" type="text/javascript"></script>
<script type="text/javascript" src="http://static.simile.mit.edu/timeline/api/timeline-api.js"></script>
<!--
<script src="timemap_full.pack.js" type="text/javascript"></script>
-->
<script src="timemap.js" type="text/javascript"></script>
<script src="param.js" type="text/javascript"></script>
<script src="loaders/xml.js" type="text/javascript"></script>
<script src="loaders/geonetkml.js" type="text/javascript"></script>
<script type="text/javascript">
var tm;
function onLoad() {
window.magmin = 2;
window.magmax = 8;
tm = TimeMap.init({
mapId: "map", // Id of map div element (required)
timelineId: "timeline", // Id of timeline div element (required)
options: {
eventIconPath: "images/",
},
datasets: [
{
title: "Darfield Earthquake",
theme: "red",
type: "geonetkml",
options: {
url: "earthquakes.kml",
extendedData: ["date","z","mag","info"],
infoTemplate: '<strong>Magnitude:</strong> {{mag}}<br/>' +
'<strong>Depth:</strong> {{z}}km<br/>' +
'<strong>Time:</strong> {{date}}<br/>' +
'<strong>Info:</strong> {{info}}'
}
}
],
bandInfo: [
{
width: "80%",
intervalUnit: Timeline.DateTime.HOUR,
intervalPixels: 400,
timeZone: 12
},
{
width: "20%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 100,
showEventText: false,
overview: true,
trackHeight: 0.2,
trackGap: 0.1,
timeZone: 12
}
]
});
tm.addFilter("map", TimeMap.filters.isMagnitude);
tm.addFilter("timeline", TimeMap.filters.isMagnitude);
}
sizes = {red: 128, orange: 96, yellow: 64, green: 32, blue: 24, ltblue: 16};
colours = {red: "#ff0000", orange: "#FF9900", yellow: "#ECE64A", green: "#19CF54", blue: "#5A7ACF", ltblue: "#5ACFCF"};
for (colour in sizes) {
var size = sizes[colour];
icon = new GIcon(G_DEFAULT_ICON);
icon.image = "images/" + colour + "-" + size + ".png";
icon.iconSize = new GSize(size,size);
icon.iconAnchor = new GPoint(size / 2,size / 2);
icon.infoWindowAnchor = new GPoint(size / 2,size / 2);
icon.shadow = null;
TimeMap.themes[colour] = new TimeMapTheme({
icon: icon, color: colours[colour], eventIconImage: colour + '-circle.png'
});
}
TimeMap.filters.isMagnitude = function(item) {
if (!window.magmin && !window.magmax) {
return true;
}
return (Number(item.opts.mag) > window.magmin) && (Number(item.opts.mag) < window.magmax);
}
function setMagnitude(select) {
if (select.id == 'magmin') {
window.magmin = Number(select.options[select.selectedIndex].value);
} else if (select.id == 'magmax') {
window.magmax = Number(select.options[select.selectedIndex].value);
}
tm.filter('map');
tm.filter('timeline');
}
</script>
<link href="styles.css" type="text/css" rel="stylesheet"/>
<style>
div#timelinecontainer{ height: 300px; }
div#mapcontainer{ height: 300px; }
</style>
</head>
<body onload="onLoad();" onunload="GUnload();">
<h1>Darfield earthquake timeline</h1>
<p>
This map shows a timeline of the main quake and aftershocks from the
Darfield Earthquake of 4th September 2010.
</p>
<p>
Drag the grey bars above the map to change the time.
</p>
<form>
<fieldset>
<legend>Filters</legend>
<label for="magmin">Min magnitude</label>
<select id="magmin" onChange="setMagnitude(this)">
<option value="2" selected="true">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<label for="magmax">Max magnitude</label>
<select id="magmax" onChange="setMagnitude(this)">
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8" selected="true">8</option>
</select>
</fieldset>
</form>
<div id="timemap">
<div id="timelinecontainer">
<div id="timeline"></div>
</div>
<div id="mapcontainer">
<div id="map"></div>
</div>
</div>
<ul class="key">
<li><img src="images/red-circle.png" />Mag 7+</li>
<li><img src="images/orange-circle.png" />Mag 6 - 7</li>
<li><img src="images/yellow-circle.png" />Mag 5 - 6</li>
<li><img src="images/green-circle.png" />Mag 4 - 5</li>
<li><img src="images/blue-circle.png" />Mag 3 - 4</li>
<li><img src="images/ltblue-circle.png" />Under 3</li>
</ul>
<img width="800" height="200" src="http://chart.apis.google.com/chart?cht=bvs&chs=800x200&chxt=x,y&chbh=30,10&chco=67dddd,6991fd,00e64d,fdf569,ff9900,fd7567&chm=N,000000,-1,,12&chtt=Quake+count+by+day&chd=t:10,33,98,66,52,66,3,3,13,9,3,3,6,4,3,1,3,0,6,7,1,0|51,57,112,47,29,32,7,6,12,15,20,18,32,17,13,6,4,7,6,8,2,4|30,19,9,1,7,5,3,2,3,3,2,3,5,1,2,0,1,0,0,1,2,3|4,0,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0|0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0|1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0&chxl=0:|Sep+04|Sep+05|Sep+06|Sep+07|Sep+08|Sep+09|Sep+10|Sep+11|Sep+12|Sep+13|Sep+14|Sep+15|Sep+16|Sep+17|Sep+18|Sep+19|Sep+20|Sep+21|Sep+22|Sep+23|Sep+24|Sep+25|"/>
<ul class="totals">
<li><strong>M2 total:</strong> 390</li>
<li><strong>M3 total:</strong> 505</li>
<li><strong>M4 total:</strong> 102</li>
<li><strong>M5 total:</strong> 8</li>
<li><strong>M7 total:</strong> 1</li>
</ul>
<hr />
<h2>About</h2>
<p>
Uses the excellent data from
<a href="http://geonet.org.nz/">GeoNet</a> and Nick Rabinowitz's <a
href="http://code.google.com/p/timemap">timemap</a> javascript library,
which in turn uses the <a
href="http://www.simile-widgets.org/timeline/">MIT SIMILE timeline</a>
library and the <a href="http://maps.google.com/">Google Maps</a> API.
</p>
<p>
Coders, <a
href="http://github.com/malclocke/darfield-earthquake-timeline">fork
it on github</a>, improvements gratefully received. Cobbled together
by <a href="http://wholemeal.co.nz/">Malcolm Locke</a>.
</p>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12394165-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.