cartodb/torque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modified to allow autoplay + timeslider

Browse Source
This commit is contained in:
andrewxhill 2013-04-02 19:58:52 -04:00
parent 58e9b839f2
commit 0861f290d7
3 changed files with 112 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
examples/ow-scrub.html Normal file
View File

@ -0,0 +1,105 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>CartoDB + Time</title>
<link rel="shortcut icon" href="http://cartodb.com/favicon/favicon_32x32.ico" />
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../lib/cartodb.css">
<link rel="stylesheet" href="../css/jqueryui-smoothness/jquery-ui-1.10.2.custom.min.css">
<style>
#torque-slider{
position:absolute;
bottom:18px;
right:25px;
width:300px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="../lib/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript" src="../lib/wax.g.js"></script>
<script type="text/javascript" src="../lib/cartodb-gmapsv3.js"></script>
<script type="text/javascript" src="../lib/dat.gui.min.js"></script>
<script type="text/javascript" src="../lib/underscore-min.js"></script>
<script type="text/javascript" src="../lib/backbone.js"></script>
<script type="text/javascript" src="../lib/class.js"></script>
<script type="text/javascript" src="../lib/backbone.cartodb.js"></script>
<script type="text/javascript" src="../src/canvas_tile_layer.js"></script>
<script type="text/javascript" src="../src/grid_layer.js"></script>
<script type="text/javascript" src="../src/torque.js"></script>
<script type="text/javascript">
var gui;
function initialize() {
// initialise the google map
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center:new google.maps.LatLng(30.95940879245423, -0.609375),
zoom:2,
mapTypeId:google.maps.MapTypeId.SATELLITE,
mapTypeControl:false,
minZoom:1
});
var map_style = {};
map_style.google_maps_customization_style = [
{
stylers:[
{ invert_lightness:true },
{ weight:1 },
{ saturation:-100 },
{ lightness:-40 }
]
},
{
elementType:"labels",
stylers:[
{ visibility:"simplified" }
]
}
];
var Soft = function () {
this.Soft = function () {
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
map.setOptions({styles:map_style.google_maps_customization_style});
}
}
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
map.setOptions({styles:map_style.google_maps_customization_style});
var TorqueOptions = {
user:'viz2',
table:'ow',
column:'date',
steps:750,
resolution:2,
cumulative:false,
clock:true,
fps:20,
fitbounds:false,
blendmode:'lighter',
trails:true,
point_type:'circle',
cellsize:1,
scrub: true
}
var torque = null;
Torque(function (env) {
Torque.app = new env.app.Instance();
torque = new Torque.app.addLayer(map, TorqueOptions);
Torque.env = env;
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div class="torque_time"></div>
<a class="cartodb_logo" href="http://www.cartodb.com" target="_blank">CartoDB</a>
</body>
</html>

1
examples/uspo-scrub.html
View File

@ -90,6 +90,7 @@
trails: false, trails: false,
point_type:'circle', point_type:'circle',
cellsize:2, cellsize:2,
autoplay: false,
scrub: true scrub: true
} }

10
src/torque.js
View File

@ -151,8 +151,8 @@ Torque.modules.layer = function (torque) {
// If scrubbable, override other options that may have been set // If scrubbable, override other options that may have been set
if (this.options.scrub){ if (this.options.scrub){
this.options.autoplay = false; // this.options.autoplay = false;
this.options.trails = false; // this.options.trails = false;
$('body').append('<div id="torque-slider"></div>'); $('body').append('<div id="torque-slider"></div>');
} }
@ -234,6 +234,9 @@ Torque.modules.layer = function (torque) {
this._display.set_time((this._current - this.start) / this._step); this._display.set_time((this._current - this.start) / this._step);
if (this.options.scrub==true){
$( "#torque-slider" ).slider({ value: this._current });
}
if (this.running) { if (this.running) {
setTimeout(function () { setTimeout(function () {
this.play() this.play()
@ -337,11 +340,10 @@ Torque.modules.subtitles = function (torque) {
function init_slider( that ){ function init_slider( that ){
var that_opts = that.options; var that_opts = that.options;
// Init jQuery UI options // Init jQuery UI options
$("#torque-slider").slider({ $("#torque-slider").slider({
min: Math.round(that_opts.start), min: Math.round(that_opts.start),
max: Math.round(that_opts.end), max: Math.floor(that_opts.end),
value: Math.round(that_opts.start), value: Math.round(that_opts.start),
step: that._step, step: that._step,
slide: function(event, ui){ slide: function(event, ui){