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

314 lines
9.8 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" />
updated main example
2013-09-28 00:55:57 +08:00
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
playground
2013-09-30 21:18:13 +08:00
<link rel="stylesheet" href="examples/vendor/codemirror.css">
updated main example
2013-09-28 00:55:57 +08:00
<style>
added cartodblogo style
2013-10-11 22:24:46 +08:00
a.cartodb_logo {
background: url("http://cartodb.s3.amazonaws.com/embed/embed_sprite.png") no-repeat scroll -61px 0 rgba(0, 0, 0, 0);
bottom: 8px;
display: block;
font-size: 0;
height: 27px;
left: 10px;
line-height: 0;
position: absolute;
text-indent: -9999px;
width: 69px;
}
updated main example
2013-09-28 00:55:57 +08:00
#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;
play image
2013-09-30 23:46:30 +08:00
background-image: url(img/play.png);
updated main example
2013-09-28 00:55:57 +08:00
background-repeat:no-repeat;
background-position:center;
}
#torque-pause.playing {
fixed example
2013-09-30 19:31:21 +08:00
background-color: white; background-image: url(img/pause.png); background-repeat:no-repeat; background-position:center;
updated main example
2013-09-28 00:55:57 +08:00
}
#torque-time {
position: absolute;
top: 100px;
left: 50%;
color: white;
font-size: 31px;
font-family: Georgia, serif;
}
playground
2013-09-30 21:18:13 +08:00
.CodeMirror {
top: 0;
bottom: 0;
position:absolute;
height: auto;
width: 380;
padding-left: 20px;
}
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;
}
improved playground: no reload is needed when animation is changed
2013-10-11 00:16:55 +08:00
body, #map_canvas {
height: 100%;
}
updated main example
2013-09-28 00:55:57 +08:00
</style>
</head>
<body>
<div id="map_canvas"></div>
playground
2013-09-30 21:18:13 +08:00
<textarea id="code"></textarea>
updated main example
2013-09-28 00:55:57 +08:00
<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>
playground
2013-09-30 21:18:13 +08:00
<script id="default-style" type="text/torque-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;
}
}
</script>
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>
updated main example
2013-09-28 00:55:57 +08:00
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Use global carto if present, otherwise fallback to require.
2014-12-10 01:05:11 +08:00
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
added cartodblogo style
2013-10-11 22:24:46 +08:00
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3.12"></script>
Use global carto if present, otherwise fallback to require.
2014-12-10 01:05:11 +08:00
<script src="examples/vendor/leaflet.js"></script>
<script src="examples/vendor/carto.js"></script>
playground
2013-09-30 21:18:13 +08:00
<script src="examples/vendor/codemirror.js"></script>
<script src="examples/vendor/css.js"></script>
updated main example
2013-09-28 00:55:57 +08:00
<script src="dist/torque.uncompressed.js"></script>
reindent all code
2012-10-01 07:41:39 +08:00
updated main example
2013-09-28 00:55:57 +08:00
<script type="text/javascript" src="examples/vendor/dat.gui.min.js"></script>
merge OW work. first draft
2012-10-01 07:33:17 +08:00
updated main example
2013-09-28 00:55:57 +08:00
<script type="text/javascript">
var torqueLayer;
var ui;
playground
2013-09-30 21:18:13 +08:00
var editor;
updated index to remove ui stuff with no_ui option
2013-10-29 01:41:19 +08:00
var ui_enabled = false;
store state in hash
2013-09-30 22:55:31 +08:00
var state = location.hash ? JSON.parse(atob(location.hash.substring(1))): {};
var DEFAULT_CARTOCSS = state.cartocss || $('#default-style').html();
updated index to remove ui stuff with no_ui option
2013-10-29 01:41:19 +08:00
ui_enabled = location.search.indexOf('no_ui') === -1;
store state in hash
2013-09-30 22:55:31 +08:00
function saveState() {
location.hash = btoa(JSON.stringify({
cartocss: editor.getValue(),
options: _.pick(torqueLayer.options,
'user',
'table',
'column',
'countby',
'resolution',
'steps',
'animationDuration'
)
}))
}
updated main example
2013-09-28 00:55:57 +08:00
function init_torque(map, options) {
// init torque layer
torqueLayer = new torque.GMapsTorqueLayer(_.extend({
fixed index
2014-02-25 16:12:29 +08:00
provider: 'sql_api',
fixed example
2013-09-30 19:31:21 +08:00
user : 'viz2',
table : 'ow',
column : 'date',
updated main example
2013-09-28 00:55:57 +08:00
countby : 'count(cartodb_id)',
resolution: 1,
steps: 800,
blendmode : 'lighter',
fixed example
2013-09-30 19:31:21 +08:00
animationDuration: 30,
updated main example
2013-09-28 00:55:57 +08:00
map: map
}, options));
merge OW work. first draft
2012-10-01 07:33:17 +08:00
all changes
2012-09-27 07:20:08 +08:00
updated main example
2013-09-28 00:55:57 +08:00
torqueLayer.setMap(map);
torqueLayer.setCartoCSS(DEFAULT_CARTOCSS);
all add
2012-05-17 07:33:56 +08:00
updated main example
2013-09-28 00:55:57 +08:00
init_slider(torqueLayer);
updated index to remove ui stuff with no_ui option
2013-10-29 01:41:19 +08:00
if(ui_enabled) {
init_ui(map, torqueLayer);
} else {
var textarea = document.getElementById('code')
textarea.parentNode.removeChild(textarea);
}
fixed example
2013-09-30 19:31:21 +08:00
torqueLayer.on('change:bounds', function(changes) {
var bounds = changes.bounds;
var b = new google.maps.LatLngBounds(
new google.maps.LatLng(
bounds[0][0],
bounds[0][1]
),
new google.maps.LatLng(
bounds[1][0],
bounds[1][1]
)
)
map.fitBounds(b);
});
updated main example
2013-09-28 00:55:57 +08:00
torqueLayer.play();
merge OW work. first draft
2012-10-01 07:33:17 +08:00
}
playground
2013-09-30 21:18:13 +08:00
function toggle_editor() {
$(editor.getWrapperElement()).toggle()
}
updated main example
2013-09-28 00:55:57 +08:00
function init_ui(map, torqueLayer) {
var TorqueOptions = _.clone(torqueLayer.options);
dat.GUI.DEFAULT_WIDTH = 300;
if (ui) {
ui.destroy();
ui = null;
}
ui = new dat.GUI();
added remember option to playground
2013-09-30 22:39:44 +08:00
ui.remember(TorqueOptions);
updated main example
2013-09-28 00:55:57 +08:00
ui.add(TorqueOptions, 'user')
ui.add(TorqueOptions, 'table')
ui.add(TorqueOptions, 'column')
added remember option to playground
2013-09-30 22:39:44 +08:00
ui.add(TorqueOptions, 'countby')
updated main example
2013-09-28 00:55:57 +08:00
ui.add(TorqueOptions, 'resolution', [1, 2, 4, 8, 16, 32])
ui.add(TorqueOptions, 'steps', 10, 1024).listen()
improved playground: no reload is needed when animation is changed
2013-10-11 00:16:55 +08:00
ui.add(TorqueOptions, 'animationDuration', 5, 120).onChange(function(d) {
torqueLayer.animator.duration(d);
saveState();
});
playground
2013-09-30 21:18:13 +08:00
ui.add({ cartocss_editor: toggle_editor }, 'cartocss_editor');
added remember option to playground
2013-09-30 22:39:44 +08:00
//ui.remember(TorqueOptions);
updated main example
2013-09-28 00:55:57 +08:00
//ui.add(TorqueOptions, 'blendmode', blend_modes);
ui.add({
update: function() {
if (torqueLayer) {
torqueLayer.setMap(null);
torqueLayer.off('change:time');
fixed example
2013-09-30 19:31:21 +08:00
torqueLayer.off('change:bounds');
updated main example
2013-09-28 00:55:57 +08:00
torqueLayer = null;
}
init_torque(map, TorqueOptions);
store state in hash
2013-09-30 22:55:31 +08:00
saveState();
updated main example
2013-09-28 00:55:57 +08:00
}
}, 'update');
playground
2013-09-30 21:18:13 +08:00
if (!editor) {
var textarea = document.getElementById('code')
textarea.value = DEFAULT_CARTOCSS;
editor = CodeMirror.fromTextArea(textarea, { mode: "text/css" });
editor.on('change', _.debounce(function() {
added remember option to playground
2013-09-30 22:39:44 +08:00
window.torqueLayer.setCartoCSS(editor.getValue());
store state in hash
2013-09-30 22:55:31 +08:00
saveState();
}, 500))
playground
2013-09-30 21:18:13 +08:00
}
editor
updated main example
2013-09-28 00:55:57 +08:00
}
/**
* 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]);
reindent all code
2012-10-01 07:41:39 +08:00
});
updated main example
2013-09-28 00:55:57 +08:00
// play-pause toggle
$("#torque-pause").click(function(){
torqueLayer.toggle();
$(this).toggleClass('playing');
});
};
reindent all code
2012-10-01 07:41:39 +08:00
store state in hash
2013-09-30 22:55:31 +08:00
updated main example
2013-09-28 00:55:57 +08:00
function initialize() {
reindent all code
2012-10-01 07:41:39 +08:00
updated main example
2013-09-28 00:55:57 +08:00
// initialise the google map
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(37.82070064677705, -122.42739200592041),
zoom: 13,
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControl: false,
fixed example
2013-09-30 19:31:21 +08:00
minZoom: 2
updated main example
2013-09-28 00:55:57 +08:00
});
reindent all code
2012-10-01 07:41:39 +08:00
updated main example
2013-09-28 00:55:57 +08:00
// dark map style
var gmaps_style = [{ stylers:[ { invert_lightness: true }, { weight:1 }, { saturation:-100 }, { lightness:-40 } ]
}, {
elementType:"labels",
stylers:[ { visibility:"simplified" } ]
merge OW work. first draft
2012-10-01 07:33:17 +08:00
}
updated main example
2013-09-28 00:55:57 +08:00
];
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
map.setOptions({ styles: gmaps_style });
reindent all code
2012-10-01 07:41:39 +08:00
store state in hash
2013-09-30 22:55:31 +08:00
init_torque(map, state.options);
reindent all code
2012-10-01 07:41:39 +08:00
merge OW work. first draft
2012-10-01 07:33:17 +08:00
}
updated main example
2013-09-28 00:55:57 +08:00
window.onload = initialize;
all add
2012-05-17 07:33:56 +08:00
</script>
updated main example
2013-09-28 00:55:57 +08:00
</body>
Remove non-puntal examples (not supported by snapToGrid based query)
2013-05-15 00:13:24 +08:00
</html>
Reference in New Issue Copy Permalink