309 lines
9.5 KiB
HTML
309 lines
9.5 KiB
HTML
<!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">
|
|
<link rel="stylesheet" href="examples/vendor/codemirror.css">
|
|
<style>
|
|
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;
|
|
}
|
|
#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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
body, #map_canvas {
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="map_canvas"></div>
|
|
<textarea id="code"></textarea>
|
|
<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 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>
|
|
|
|
<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&v=3.12"></script>
|
|
<script src="vendor/leaflet.js"></script>
|
|
<script src="vendor/underscore.js"></script>
|
|
<script src="vendor/carto.js"></script>
|
|
<script src="examples/vendor/codemirror.js"></script>
|
|
<script src="examples/vendor/css.js"></script>
|
|
|
|
<script src="dist/torque.uncompressed.js"></script>
|
|
|
|
<script type="text/javascript" src="examples/vendor/dat.gui.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var torqueLayer;
|
|
var ui;
|
|
var editor;
|
|
var state = location.hash ? JSON.parse(atob(location.hash.substring(1))): {};
|
|
var DEFAULT_CARTOCSS = state.cartocss || $('#default-style').html();
|
|
|
|
function saveState() {
|
|
location.hash = btoa(JSON.stringify({
|
|
cartocss: editor.getValue(),
|
|
options: _.pick(torqueLayer.options,
|
|
'user',
|
|
'table',
|
|
'column',
|
|
'is_time',
|
|
'countby',
|
|
'resolution',
|
|
'steps',
|
|
'animationDuration'
|
|
)
|
|
}))
|
|
}
|
|
|
|
function init_torque(map, options) {
|
|
// init torque layer
|
|
torqueLayer = new torque.GMapsTorqueLayer(_.extend({
|
|
user : 'viz2',
|
|
table : 'ow',
|
|
column : 'date',
|
|
countby : 'count(cartodb_id)',
|
|
resolution: 1,
|
|
is_time: true,
|
|
steps: 800,
|
|
blendmode : 'lighter',
|
|
animationDuration: 30,
|
|
map: map
|
|
}, options));
|
|
|
|
|
|
torqueLayer.setMap(map);
|
|
torqueLayer.setCartoCSS(DEFAULT_CARTOCSS);
|
|
|
|
init_slider(torqueLayer);
|
|
init_ui(map, torqueLayer);
|
|
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);
|
|
});
|
|
torqueLayer.play();
|
|
}
|
|
|
|
function toggle_editor() {
|
|
$(editor.getWrapperElement()).toggle()
|
|
}
|
|
|
|
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();
|
|
ui.remember(TorqueOptions);
|
|
ui.add(TorqueOptions, 'user')
|
|
ui.add(TorqueOptions, 'table')
|
|
ui.add(TorqueOptions, 'column')
|
|
ui.add(TorqueOptions, 'is_time')
|
|
ui.add(TorqueOptions, 'countby')
|
|
ui.add(TorqueOptions, 'resolution', [1, 2, 4, 8, 16, 32])
|
|
ui.add(TorqueOptions, 'steps', 10, 1024).listen()
|
|
ui.add(TorqueOptions, 'animationDuration', 5, 120).onChange(function(d) {
|
|
torqueLayer.animator.duration(d);
|
|
saveState();
|
|
});
|
|
ui.add({ cartocss_editor: toggle_editor }, 'cartocss_editor');
|
|
//ui.remember(TorqueOptions);
|
|
//ui.add(TorqueOptions, 'blendmode', blend_modes);
|
|
ui.add({
|
|
update: function() {
|
|
if (torqueLayer) {
|
|
torqueLayer.setMap(null);
|
|
torqueLayer.off('change:time');
|
|
torqueLayer.off('change:bounds');
|
|
torqueLayer = null;
|
|
}
|
|
init_torque(map, TorqueOptions);
|
|
saveState();
|
|
}
|
|
}, 'update');
|
|
|
|
if (!editor) {
|
|
var textarea = document.getElementById('code')
|
|
textarea.value = DEFAULT_CARTOCSS;
|
|
editor = CodeMirror.fromTextArea(textarea, { mode: "text/css" });
|
|
editor.on('change', _.debounce(function() {
|
|
window.torqueLayer.setCartoCSS(editor.getValue());
|
|
saveState();
|
|
}, 500))
|
|
}
|
|
editor
|
|
|
|
}
|
|
/**
|
|
* 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]);
|
|
});
|
|
|
|
// 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(37.82070064677705, -122.42739200592041),
|
|
zoom: 13,
|
|
mapTypeId: google.maps.MapTypeId.SATELLITE,
|
|
mapTypeControl: false,
|
|
minZoom: 2
|
|
});
|
|
|
|
// 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(map, state.options);
|
|
|
|
|
|
}
|
|
|
|
window.onload = initialize;
|
|
</script>
|
|
</body>
|
|
</html>
|