simplified version
This commit is contained in:
Javier de la Torre
Andrew Hill
parent
0d84b92a09
commit
57abda2000
169
examples/ow_simple.html
Normal file
169
examples/ow_simple.html
Normal file
@ -0,0 +1,169 @@
|
||||
<!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,
|
||||
disableDefaultUI: true,
|
||||
minZoom:1,
|
||||
zoomControl: true,
|
||||
zoomControlOptions: {
|
||||
style: google.maps.ZoomControlStyle.SMALL
|
||||
}
|
||||
});
|
||||
|
||||
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:'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: 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