removes out of date examples
This commit is contained in:
Francisco Dans
parent
2925f09df2
commit
a2067687f9
@ -1,157 +0,0 @@
|
|||||||
<!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="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
|
|
||||||
<style>
|
|
||||||
#torque-slider {
|
|
||||||
position:absolute;
|
|
||||||
bottom:18px;
|
|
||||||
right:25px;
|
|
||||||
width:300px;
|
|
||||||
}
|
|
||||||
#torque-pause {
|
|
||||||
position:absolute;
|
|
||||||
bottom:12px;
|
|
||||||
right:345px;
|
|
||||||
width:28px;
|
|
||||||
height: 26px;
|
|
||||||
padding: 1px 2px 2px 2px;
|
|
||||||
z-index: 1000;
|
|
||||||
border-radius: 3px;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: white;
|
|
||||||
background-image: url(../img/play.png);
|
|
||||||
background-repeat:no-repeat;
|
|
||||||
background-position:center;
|
|
||||||
}
|
|
||||||
#torque-pause.playing {
|
|
||||||
background-color: white; background-image: url(../img/pause.png); background-repeat:no-repeat; background-position:center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#torque-time {
|
|
||||||
position: absolute;
|
|
||||||
top: 100px;
|
|
||||||
left: 50%;
|
|
||||||
color: white;
|
|
||||||
font-size: 31px;
|
|
||||||
font-family: Georgia, serif;
|
|
||||||
}
|
|
||||||
#map_canvas {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="map_canvas"></div>
|
|
||||||
<div id="torque-slider"></div>
|
|
||||||
<a id="torque-pause" class="playing"></a>
|
|
||||||
<div id="torque-time"></div>
|
|
||||||
<a class="cartodb_logo" href="http://www.cartodb.com" target="_blank">CartoDB</a>
|
|
||||||
|
|
||||||
<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://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
|
|
||||||
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
|
|
||||||
<script src="vendor/leaflet.js"></script>
|
|
||||||
<script src="vendor/carto.js"></script>
|
|
||||||
<script src="../dist/torque.uncompressed.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
/**
|
|
||||||
* inits slider and a small play/pause button
|
|
||||||
*/
|
|
||||||
function init_slider(torqueLayer) {
|
|
||||||
var torqueTime = $('#torque-time');
|
|
||||||
$("#torque-slider").slider({
|
|
||||||
min: 0,
|
|
||||||
max: torqueLayer.options.steps,
|
|
||||||
value: 0,
|
|
||||||
step: 1,
|
|
||||||
slide: function(event, ui){
|
|
||||||
var step = ui.value;
|
|
||||||
torqueLayer.setStep(step);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// each time time changes, move the slider
|
|
||||||
torqueLayer.on('change:time', function(changes) {
|
|
||||||
$("#torque-slider" ).slider({ value: changes.step });
|
|
||||||
var month_year = changes.time.toString().substr(4).split(' ');
|
|
||||||
torqueTime.text(month_year[0] + " - " + month_year[2]);
|
|
||||||
console.log(torqueLayer.getTime());
|
|
||||||
});
|
|
||||||
|
|
||||||
// play-pause toggle
|
|
||||||
$("#torque-pause").click(function(){
|
|
||||||
torqueLayer.toggle();
|
|
||||||
$(this).toggleClass('playing');
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
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
|
|
||||||
});
|
|
||||||
|
|
||||||
// dark map style
|
|
||||||
var gmaps_style = [{ stylers:[ { invert_lightness: true }, { weight:1 }, { saturation:-100 }, { lightness:-40 } ]
|
|
||||||
}, {
|
|
||||||
elementType:"labels",
|
|
||||||
stylers:[ { visibility:"simplified" } ]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
|
|
||||||
map.setOptions({ styles: gmaps_style });
|
|
||||||
|
|
||||||
// init torque layer
|
|
||||||
var torqueLayer = new torque.GMapsTorqueLayer({
|
|
||||||
user : 'viz2',
|
|
||||||
table : 'ow',
|
|
||||||
column : 'date',
|
|
||||||
countby : 'count(cartodb_id)',
|
|
||||||
steps: 750,
|
|
||||||
blendmode : 'lighter',
|
|
||||||
animationDuration: 60,
|
|
||||||
map: map
|
|
||||||
});
|
|
||||||
|
|
||||||
var DEFAULT_CARTOCSS = [
|
|
||||||
'#layer {',
|
|
||||||
" marker-width: 3; ",
|
|
||||||
' marker-fill: #FEE391; ',
|
|
||||||
' [value > 2] { marker-fill: #FEC44F; }',
|
|
||||||
' [value > 3] { marker-fill: #FE9929; }',
|
|
||||||
' [value > 4] { marker-fill: #EC7014; }',
|
|
||||||
' [value > 5] { marker-fill: #CC4C02; }',
|
|
||||||
' [value > 6] { marker-fill: #993404; }',
|
|
||||||
' [value > 7] { marker-fill: #662506; }',
|
|
||||||
' [frame-offset = 1] { marker-width: 8;marker-fill-opacity: 0.05;}',
|
|
||||||
' [frame-offset = 2] { marker-width: 20;marker-fill-opacity: 0.02;}',
|
|
||||||
//' [frame-offset = 1] { marker-width: 25;marker-fill-opacity: 0.01;}',
|
|
||||||
'}'
|
|
||||||
].join('\n');
|
|
||||||
|
|
||||||
torqueLayer.setMap(map);
|
|
||||||
torqueLayer.setCartoCSS(DEFAULT_CARTOCSS);
|
|
||||||
|
|
||||||
init_slider(torqueLayer);
|
|
||||||
torqueLayer.play();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
window.onload = initialize;
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,220 +0,0 @@
|
|||||||
<!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="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
|
|
||||||
<style>
|
|
||||||
#torque-slider {
|
|
||||||
position:absolute;
|
|
||||||
bottom:18px;
|
|
||||||
right:25px;
|
|
||||||
width:300px;
|
|
||||||
}
|
|
||||||
#torque-pause {
|
|
||||||
position:absolute;
|
|
||||||
bottom:12px;
|
|
||||||
right:345px;
|
|
||||||
width:28px;
|
|
||||||
height: 26px;
|
|
||||||
padding: 1px 2px 2px 2px;
|
|
||||||
z-index: 1000;
|
|
||||||
border-radius: 3px;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: white;
|
|
||||||
background-image: url(../img/play.png);
|
|
||||||
background-repeat:no-repeat;
|
|
||||||
background-position:center;
|
|
||||||
}
|
|
||||||
#torque-pause.playing {
|
|
||||||
background-color: white; background-image: url(../img/pause.png); background-repeat:no-repeat; background-position:center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#torque-time {
|
|
||||||
position: absolute;
|
|
||||||
top: 100px;
|
|
||||||
left: 50%;
|
|
||||||
color: white;
|
|
||||||
font-size: 31px;
|
|
||||||
font-family: Georgia, serif;
|
|
||||||
}
|
|
||||||
#livecode {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 450px;
|
|
||||||
padding-left: 10px;
|
|
||||||
box-shadow: 0px 0px 5px 6px #ccc;
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
color: rgba(0,0,0,0.9);
|
|
||||||
background-color:rgba(255,255,255,0.92);
|
|
||||||
position: absolute;
|
|
||||||
left: 10px;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: none;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 14px;
|
|
||||||
width: 350px;
|
|
||||||
border: 0;
|
|
||||||
outline: none;
|
|
||||||
padding: 40px;
|
|
||||||
}
|
|
||||||
.highlight {
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 19px;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
#credits a { color: #06c; }
|
|
||||||
#credits {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 50px;
|
|
||||||
left: 40px;
|
|
||||||
font-size: 17px;
|
|
||||||
font-family: Helvetica;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="map_canvas"></div>
|
|
||||||
<textarea id="code">
|
|
||||||
</textarea>
|
|
||||||
<div id="credits">
|
|
||||||
<p>Copy the url to share this visualization</p>
|
|
||||||
<p>Made with <a href="https://github.com/cartodb/torque">Torque</a> and <a href="http://cartodb.com">CartoDB</a></p></div>
|
|
||||||
|
|
||||||
<div id="torque-slider"></div>
|
|
||||||
<a id="torque-pause" class="playing"></a>
|
|
||||||
<div id="torque-time"></div>
|
|
||||||
<!--<a class="cartodb_logo" href="http://www.cartodb.com" target="_blank">CartoDB</a>-->
|
|
||||||
|
|
||||||
<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://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
|
|
||||||
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
|
|
||||||
<script src="vendor/leaflet.js"></script>
|
|
||||||
<script src="vendor/carto.js"></script>
|
|
||||||
<script src="../dist/torque.uncompressed.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
/**
|
|
||||||
* inits slider and a small play/pause button
|
|
||||||
*/
|
|
||||||
function init_slider(torqueLayer) {
|
|
||||||
var torqueTime = $('#torque-time');
|
|
||||||
$("#torque-slider").slider({
|
|
||||||
min: 0,
|
|
||||||
max: torqueLayer.options.steps,
|
|
||||||
value: 0,
|
|
||||||
step: 1,
|
|
||||||
slide: function(event, ui){
|
|
||||||
var step = ui.value;
|
|
||||||
torqueLayer.setStep(step);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// each time time changes, move the slider
|
|
||||||
torqueLayer.on('change:time', function(changes) {
|
|
||||||
$("#torque-slider" ).slider({ value: changes.step });
|
|
||||||
var month_year = changes.time.toString().substr(4).split(' ');
|
|
||||||
torqueTime.text(month_year[0] + " - " + month_year[2]);
|
|
||||||
console.log(torqueLayer.getTime());
|
|
||||||
});
|
|
||||||
|
|
||||||
// play-pause toggle
|
|
||||||
$("#torque-pause").click(function(){
|
|
||||||
torqueLayer.toggle();
|
|
||||||
$(this).toggleClass('playing');
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
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
|
|
||||||
});
|
|
||||||
|
|
||||||
// dark map style
|
|
||||||
var gmaps_style = [{ stylers:[ { invert_lightness: true }, { weight:1 }, { saturation:-100 }, { lightness:-40 } ]
|
|
||||||
}, {
|
|
||||||
elementType:"labels",
|
|
||||||
stylers:[ { visibility:"simplified" } ]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
|
|
||||||
map.setOptions({ styles: gmaps_style });
|
|
||||||
|
|
||||||
// init torque layer
|
|
||||||
var torqueLayer = new torque.GMapsTorqueLayer({
|
|
||||||
user : 'viz2',
|
|
||||||
table : 'ow',
|
|
||||||
column : 'date',
|
|
||||||
countby : 'count(cartodb_id)',
|
|
||||||
resolution: 1,
|
|
||||||
steps: 750,
|
|
||||||
blendmode : 'lighter',
|
|
||||||
animationDuration: 60,
|
|
||||||
map: map
|
|
||||||
});
|
|
||||||
|
|
||||||
var DEFAULT_CARTOCSS = [
|
|
||||||
'#layer {',
|
|
||||||
' marker-width: 2; ',
|
|
||||||
' marker-fill: #FEE391; ',
|
|
||||||
' [value > 2] { marker-fill: #FEC44F; }',
|
|
||||||
' [value > 3] { marker-fill: #FE9929; }',
|
|
||||||
' [value > 4] { marker-fill: #EC7014; }',
|
|
||||||
' [value > 5] { marker-fill: #CC4C02; }',
|
|
||||||
' [value > 6] { marker-fill: #993404; }',
|
|
||||||
' [value > 7] { marker-fill: #662506; }',
|
|
||||||
'',
|
|
||||||
'}',
|
|
||||||
'',
|
|
||||||
'#layer [frame-offset = 1] { ',
|
|
||||||
' marker-fill: #FEE391; ',
|
|
||||||
' marker-width: 8;',
|
|
||||||
' marker-fill-opacity: 0.05;',
|
|
||||||
'}',
|
|
||||||
'',
|
|
||||||
'#layer [frame-offset = 2] { ',
|
|
||||||
' marker-fill: #FEE391; ',
|
|
||||||
' marker-width: 20;',
|
|
||||||
' marker-fill-opacity: 0.02;',
|
|
||||||
'}'
|
|
||||||
].join('\n');
|
|
||||||
|
|
||||||
var code = $('#code')
|
|
||||||
code.on('keyup', function() {
|
|
||||||
torqueLayer.setCartoCSS(code.val());
|
|
||||||
location.hash = btoa(code.val());
|
|
||||||
});
|
|
||||||
|
|
||||||
torqueLayer.setMap(map);
|
|
||||||
|
|
||||||
var css = location.hash ? atob(location.hash.substring(1)): DEFAULT_CARTOCSS;
|
|
||||||
torqueLayer.setCartoCSS(css)
|
|
||||||
code.val(css);
|
|
||||||
|
|
||||||
init_slider(torqueLayer);
|
|
||||||
torqueLayer.play();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
window.onload = initialize;
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,164 +0,0 @@
|
|||||||
<!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;
|
|
||||||
}
|
|
||||||
#torque-pause{
|
|
||||||
position:absolute;
|
|
||||||
bottom:12px;
|
|
||||||
right:345px;
|
|
||||||
width:28px;
|
|
||||||
height: 26px;
|
|
||||||
padding: 1px 2px 2px 2px;
|
|
||||||
z-index: 1000;
|
|
||||||
border-radius: 3px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.playing {background-color: white; background-image: url(../img/pause.png); background-repeat:no-repeat; background-position:center; }
|
|
||||||
.paused { background-color: white; background-image: url(../img/play.png);background-repeat:no-repeat; background-position:center;}
|
|
||||||
/* #torque-pause .playing {
|
|
||||||
background-image: url('../img/pause.png');
|
|
||||||
}
|
|
||||||
#torque-pause .paused{
|
|
||||||
background-image: url('../img/play.png');
|
|
||||||
}*/
|
|
||||||
</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});
|
|
||||||
|
|
||||||
|
|
||||||
function init_slider( that ){
|
|
||||||
var that_opts = that.options;
|
|
||||||
$('body').append('<div id="torque-slider"></div>');
|
|
||||||
// Init jQuery UI options
|
|
||||||
$("#torque-slider").slider({
|
|
||||||
min: Math.round(that_opts.start),
|
|
||||||
max: Math.floor(that_opts.end),
|
|
||||||
value: Math.round(that_opts.start),
|
|
||||||
step: that._step,
|
|
||||||
slide: function(event, ui){
|
|
||||||
that._current = ui.value;
|
|
||||||
var date = new Date(that._current * 1000);
|
|
||||||
var date_arry = date.toString().substr(4).split(' ');
|
|
||||||
that._display.set_time((that._current - that.start) / that._step);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
function on_move (that) {
|
|
||||||
$( "#torque-slider" ).slider({ value: that._current });
|
|
||||||
}
|
|
||||||
|
|
||||||
var TorqueOptions = {
|
|
||||||
user:'osm2',
|
|
||||||
table:'ship_flight_recorder',
|
|
||||||
column:'toc',
|
|
||||||
steps:140,
|
|
||||||
resolution:2,
|
|
||||||
cumulative:false,
|
|
||||||
clock:true,
|
|
||||||
fps:11,
|
|
||||||
fitbounds:false,
|
|
||||||
blendmode:'lighter',
|
|
||||||
trails:true,
|
|
||||||
point_type:'circle',
|
|
||||||
cellsize:1,
|
|
||||||
scrub: init_slider,
|
|
||||||
scrub_move: on_move
|
|
||||||
}
|
|
||||||
|
|
||||||
var torque = null;
|
|
||||||
Torque(function (env) {
|
|
||||||
Torque.app = new env.app.Instance();
|
|
||||||
torque = new Torque.app.addLayer(map, TorqueOptions);
|
|
||||||
Torque.env = env;
|
|
||||||
|
|
||||||
// TODO pause method needs to be added to Torque UI options
|
|
||||||
var pause = $('<a></a>');
|
|
||||||
$(pause).attr('id','torque-pause')
|
|
||||||
$(pause).addClass("playing");
|
|
||||||
$('body').append(pause);
|
|
||||||
$(pause).click(function(){
|
|
||||||
if($(this).hasClass('paused')){
|
|
||||||
torque.pause();
|
|
||||||
$(this).removeClass("paused");
|
|
||||||
$(this).addClass("playing");
|
|
||||||
} else {
|
|
||||||
$(this).removeClass("playing");
|
|
||||||
$(this).addClass("paused");
|
|
||||||
torque.pause();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
</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>
|
|
||||||
Loading…
Reference in New Issue
Block a user