<!DOCTYPE html>
<html>
<head>
<title>Application | CartoDB</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
font-family: 'Open Sans', serif;
font-size: 28px;
}
</style>
<style>
#map {
width: 100%;
height: 420px;
padding: 0;
margin: 0;
}
#report {
padding: 18px;
}
#report .text{
margin-top: 8px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="report">
<h3>Report</h3>
<div class="text">Monday, July 23 - A sonic boom with 3.5 magnitude was recorded 11km NE of San Simeon, California</div>
</div>
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
// get the viz.json url from the CartoDB Editor
// - click on visualize
// - create new visualization
// - make visualization public
// - click on publish
// - go to API tab
window.onload = function() {
cartodb.createVis('map', 'http://andrewxhill.cartodb.com/api/v2/viz/d56c6f06-1354-11e4-9ad2-7054d21a95e5/viz.json')
.done(function(vis, layers){
var earthquakes = layers[1].getSubLayer(0);
earthquakes.setSQL("SELECT *, to_char(time, 'Day, Month DD') date FROM all_week");
earthquakes.setInteraction(true);
earthquakes.setInteractivity("latitude, longitude, date, place, type, mag");
earthquakes.on('featureClick', function(e, latlng, pos, data, subLayerIndex) {
$('.text').html(data.date+" - A "+data.type+" with "+data.mag+" magnitude was recorded "+data.place);
vis.getNativeMap().setView([data.latitude, data.longitude], 8);
});
})
}
</script>
</body>
</html>