cartodb/torque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
0115852319
torque/index.html

315 lines
12 KiB
HTML
Raw Normal View History

all add
2012-05-17 07:33:56 +08:00
<!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"/>
all changes
2012-09-27 07:20:08 +08:00
<title>CartoDB + Time</title>
all add
2012-05-17 07:33:56 +08:00
<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">
all changes
2012-09-27 07:20:08 +08:00
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
all add
2012-05-17 07:33:56 +08:00
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></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>
all changes
2012-09-27 07:20:08 +08:00
<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>
all add
2012-05-17 07:33:56 +08:00
<script type="text/javascript">
var gui;
function initialize() {
// initialise the google map
var map = new google.maps.Map(document.getElementById('map_canvas'), {
merge OW work. first draft
2012-10-01 07:33:17 +08:00
center: new google.maps.LatLng( 30.95940879245423, -0.609375),
zoom: 2,
all add
2012-05-17 07:33:56 +08:00
mapTypeId: google.maps.MapTypeId.SATELLITE,
all changes
2012-09-27 07:20:08 +08:00
mapTypeControl: false,
merge OW work. first draft
2012-10-01 07:33:17 +08:00
minZoom: 1
added basemap selector
2012-05-24 05:34:19 +08:00
});
var map_style = {};
all changes
2012-09-27 07:20:08 +08:00
map_style.google_maps_customization_style = [
{
stylers: [
{ invert_lightness: true },
{ weight: 1 },
{ saturation: -100 },
{ lightness: -40 }
]
},{
elementType: "labels",
stylers: [
{ visibility: "simplified" }
]
}
];
added basemap selector
2012-05-24 05:34:19 +08:00
var Soft = function(){
this.Soft = function(){
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
map.setOptions({styles: map_style.google_maps_customization_style});
}
}
all add
2012-05-17 07:33:56 +08:00
default soft bm
2012-05-24 22:14:42 +08:00
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
map.setOptions({styles: map_style.google_maps_customization_style});
merge OW work. first draft
2012-10-01 07:33:17 +08:00
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
}
all changes
2012-09-27 07:20:08 +08:00
var torque = null;
Torque(function(env) {
Torque.app = new env.app.Instance();
torque = new Torque.app.addLayer(map, TorqueOptions);
Torque.env = env;
all add
2012-05-17 07:33:56 +08:00
});
merge OW work. first draft
2012-10-01 07:33:17 +08:00
var blend_modes = [
"lighter",
"source-over",
"copy",
"destination-atop",
"destination-in",
"destination-out",
"destination-over",
"source-atop",
"source-in",
"source-out",
"xor"
];
all changes
2012-09-27 07:20:08 +08:00
merge OW work. first draft
2012-10-01 07:33:17 +08:00
var tablename = 'ow';
dat.GUI.DEFAULT_WIDTH = 300;
var toggle = new dat.GUI();
toggle.add(TorqueOptions, 'user').listen();
toggle.add(TorqueOptions, 'table').listen();
toggle.add(TorqueOptions, 'column').listen();
toggle.add(TorqueOptions, 'resolution', [1,2,4,8,16,32]).listen();
toggle.add(TorqueOptions, 'cellsize', 0, 50 ).listen();
toggle.add(TorqueOptions, 'cumulative').listen();
toggle.add(TorqueOptions, 'trails').listen();
toggle.add(TorqueOptions, 'steps', 10, 750 ).listen();
toggle.add(TorqueOptions, 'fps', 0.05, 48, false).listen();
toggle.add(TorqueOptions, 'blendmode', blend_modes).listen();
toggle.add(TorqueOptions, 'point_type', ['circle','square']).listen();
all changes
2012-09-27 07:20:08 +08:00
var that = this;
merge OW work. first draft
2012-10-01 07:33:17 +08:00
var updateTorque = function(){
this.updateTorque = function(){
if (TorqueOptions.table != tablename){
tablename = TorqueOptions.table;
TorqueOptions.fitbounds = true;
} else {
TorqueOptions.fitbounds = false;
}
torque.setOptions(TorqueOptions);
}
}
toggle.add(new updateTorque(), 'updateTorque');
var pause = function(){
this.pause = function(){
torque.pause();
}
}
toggle.add(new pause(), 'pause');
all add
2012-05-17 07:33:56 +08:00
all changes
2012-09-27 07:20:08 +08:00
var PresetOptions = function(){
merge OW work. first draft
2012-10-01 07:33:17 +08:00
this.old_weather_agg = function(){
TorqueOptions.user = "viz2";
TorqueOptions.table = "ow";
TorqueOptions.column = "date";
TorqueOptions.blendmode = 'source-over';
TorqueOptions.trails = false;
TorqueOptions.point_type = 'square';
TorqueOptions.cumulative = true;
TorqueOptions.resolution = 2;
TorqueOptions.steps = 750;
TorqueOptions.fps = 30;
TorqueOptions.fitbounds = 1;
TorqueOptions.clock = true;
tablename = TorqueOptions.table;
torque.setOptions(TorqueOptions)
}
this.old_weather_live = function(){
TorqueOptions.user = "viz2";
TorqueOptions.table = "ow";
TorqueOptions.column = "date";
TorqueOptions.cumulative = false;
TorqueOptions.resolution = 2;
TorqueOptions.steps = 750;
TorqueOptions.fps = 30;
TorqueOptions.fitbounds = 1;
TorqueOptions.clock = true;
TorqueOptions.blendmode = 'lighter';
TorqueOptions.trails = true;
TorqueOptions.point_type = 'circle';
tablename = TorqueOptions.table;
torque.setOptions(TorqueOptions)
}
this.ny_bus = function(){
TorqueOptions.user = "viz2";
TorqueOptions.table = "ny_bus";
TorqueOptions.column = "timestamp";
TorqueOptions.cumulative = false;
TorqueOptions.resolution = 4;
TorqueOptions.steps = 500;
TorqueOptions.fps = 4;
TorqueOptions.fitbounds = 2;
TorqueOptions.clock = true;
tablename = TorqueOptions.table;
torque.setOptions(TorqueOptions)
}
this.us_postoffices = function(){
TorqueOptions.user = "viz2";
TorqueOptions.table = "us_po_offices";
TorqueOptions.column = "built";
TorqueOptions.cumulative = true;
TorqueOptions.resolution = 2;
TorqueOptions.steps = 250;
TorqueOptions.fps = 32;
TorqueOptions.fitbounds = 1;
TorqueOptions.clock = true;
TorqueOptions.blendmode = 'source-over';
TorqueOptions.trails = false;
TorqueOptions.point_type = 'square';
tablename = TorqueOptions.table;
torque.setOptions(TorqueOptions)
}
this.stop_frisk = function(){
TorqueOptions.user = "viz2";
TorqueOptions.table = "sfrisk_dates";
TorqueOptions.column = "datestop";
TorqueOptions.cumulative = true;
TorqueOptions.resolution = 4;
TorqueOptions.steps = 200;
TorqueOptions.fps = 16;
TorqueOptions.fitbounds = 1;
TorqueOptions.clock = true;
TorqueOptions.blendmode = 'source-over';
TorqueOptions.trails = false;
TorqueOptions.point_type = 'square';
tablename = TorqueOptions.table;
torque.setOptions(TorqueOptions)
}
this.stop_frisk_live = function(){
TorqueOptions.user = "viz2";
TorqueOptions.table = "sfrisk_dates";
TorqueOptions.column = "datestop";
TorqueOptions.cumulative = false;
TorqueOptions.blendmode = 'lighter';
TorqueOptions.trails = true;
TorqueOptions.point_type = 'circle';
TorqueOptions.resolution = 2;
TorqueOptions.steps = 200;
TorqueOptions.fps = 50;
TorqueOptions.fitbounds = 1;
TorqueOptions.clock = true;
tablename = TorqueOptions.table;
torque.setOptions(TorqueOptions)
}
this.jatorre_flights = function(){
TorqueOptions.user = "osm2";
TorqueOptions.table = "openpaths_segments";
TorqueOptions.column = "end_timestamp";
TorqueOptions.cumulative = true;
TorqueOptions.resolution = 2;
TorqueOptions.steps = 500;
TorqueOptions.fps = 24;
TorqueOptions.fitbounds = -1;
TorqueOptions.clock = true;
tablename = TorqueOptions.table;
torque.setOptions(TorqueOptions);
}
this.quake_total = function(){
TorqueOptions.user = "viz2";
TorqueOptions.table = "quksigx020";
TorqueOptions.column = "quakedate";
TorqueOptions.cumulative = true;
TorqueOptions.resolution = 8;
TorqueOptions.steps = 441;
TorqueOptions.fps = 21;
TorqueOptions.fitbounds = 1;
TorqueOptions.clock = true;
TorqueOptions.countby = 'sum(mmio)';
TorqueOptions.blendmode = 'source-over';
TorqueOptions.trails = false;
TorqueOptions.point_type = 'square';
tablename = TorqueOptions.table;
torque.setOptions(TorqueOptions);
}
this.quake_size = function(){
TorqueOptions.user = "viz2";
TorqueOptions.table = "quakesize";
TorqueOptions.column = "quakedate";
TorqueOptions.cumulative = true;
TorqueOptions.resolution = 1;
TorqueOptions.steps = 441;
TorqueOptions.fps = 21;
TorqueOptions.fitbounds = 1;
TorqueOptions.clock = true;
TorqueOptions.blendmode = 'source-over';
TorqueOptions.trails = false;
TorqueOptions.point_type = 'square';
//TorqueOptions.countby = 'sum(mmio)';
tablename = TorqueOptions.table;
torque.setOptions(TorqueOptions);
}
this.african_honey_bee = function(){
TorqueOptions.user = "viz2";
TorqueOptions.table = "africanhoneybee";
TorqueOptions.column = "first_year";
TorqueOptions.cumulative = true;
TorqueOptions.resolution = 1;
TorqueOptions.steps = 29;
TorqueOptions.fps = 2;
TorqueOptions.fitbounds = 1;
TorqueOptions.clock = true;
TorqueOptions.blendmode = 'source-over';
TorqueOptions.trails = false;
TorqueOptions.point_type = 'square';
tablename = TorqueOptions.table;
torque.setOptions(TorqueOptions)
}
}
var ps = new PresetOptions();
all changes
2012-09-27 07:20:08 +08:00
var presets = toggle.addFolder("Other examples",false);
presets.add(ps, 'us_postoffices');
presets.add(ps, 'african_honey_bee');
presets.add(ps, 'quake_total');
presets.add(ps, 'quake_size');
presets.add(ps, 'stop_frisk');
merge OW work. first draft
2012-10-01 07:33:17 +08:00
presets.add(ps, 'stop_frisk_live');
all changes
2012-09-27 07:20:08 +08:00
presets.add(ps, 'jatorre_flights');
presets.add(ps, 'ny_bus');
merge OW work. first draft
2012-10-01 07:33:17 +08:00
presets.add(ps, 'old_weather_agg');
presets.add(ps, 'old_weather_live');
}
all add
2012-05-17 07:33:56 +08:00
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
all changes
2012-09-27 07:20:08 +08:00
<div class="torque_time" ></div>
all add
2012-05-17 07:33:56 +08:00
<a class="cartodb_logo" href="http://www.cartodb.com" target="_blank">CartoDB</a>
</body>
</html>
Reference in New Issue Copy Permalink