index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Easy earthquakes</title>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
<style type="text/css">
body{
background:black;
}
svg {
width: 960px;
height: 500px;
}
svg:active {
cursor: move;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
circle {
fill: none;
stroke-width: 1.5px;
}
#first_layer path {
fill-opacity:0.8;
fill: none;
stroke: white;
stroke-width:0.5px;
stroke-linecap: round;
stroke-linejoin: round;
}
</style>
</head>
<body>
<script type="text/javascript">
var first_layer = 'live_map_views';
var pub = new cartodb.SQL({ user: 'staging20', format: 'json'});
function detectUserLocation(){
if (navigator.geolocation) {
var timeoutVal = 10 * 1000 * 1000;
navigator.geolocation.watchPosition(
mapToPosition,
alertError,
{ enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
);
}
else {
alert("Geolocation is not supported by this browser");
}
function alertError(error) {
var errors = {
1: 'Permission denied',
2: 'Position unavailable',
3: 'Request timeout'
};
startAnimation();
}
}
function mapToPosition(position){
lon = position.coords.longitude;
lat = position.coords.latitude;
pub.execute("SELECT axh_public_function_314({{lon}},{{lat}},{{cat}}), {{ran}}", {lon: lon, lat: lat, cat: Math.floor(3.99*Math.random()) + 1, ran: Math.random()}).done(function(d){console.log(d)});
console.log('up')
startAnimation();
}
detectUserLocation();
var color = d3.scale.log()
.domain([1, 2, 3, 4])
.range(["red", "yellow", "aqua", "green"]);
var svg = d3.select("body")
.append("svg")
.call(d3.behavior.zoom()
.on("zoom", redraw))
.append("g");
var xy = d3.geo.mercator();
xy.scale(1200);
xy.center([-40,30]);
xy.precision(0);
svg.append("g").attr("id", "first_layer");
var path = d3.geo.path();
d3.json("//staging20.cartodb.com/api/v2/sql?q=SELECT ST_Simplify(the_geom,0.01) as the_geom FROM live_map_views WHERE the_geom IS NOT NULL&format=geojson", function(collection) {
svg.select("#first_layer")
.selectAll("path")
.data(collection.features)
.enter().append("path")
.attr("d", path.projection(xy));
});
var views;
function startAnimation(){
d3.json("//staging20.cartodb.com/api/v2/sql?q=SELECT the_geom, category FROM axh_user_locations WHERE the_geom IS NOT NULL ORDER BY created_at ASC&format=geojson", function(collection) {
views = collection.features;
console.log(views)
if (views.length > 0) replay();
});
}
var i = 0;
function replay() {
var c = views[i];
svg.append("circle")
.attr("cx", xy(c.geometry.coordinates)[0])
.attr("cy", xy(c.geometry.coordinates)[1])
.attr("r", 1)
.style("fill", color(c.properties.category))
.style("fill-opacity", 0.5)
.style("stroke", color(c.properties.category))
.style("stroke-opacity", 0.5)
.transition()
.duration(2000)
.ease(Math.sqrt)
.attr("r", 20)
.style("fill-opacity", 1e-6)
.style("stroke-opacity", 1e-6)
.remove()
setTimeout(replay, 200);
i++;
if (views.length==i) i = 0;
}
function redraw() {
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
</script>
</body>
</html>