Skip to content

Instantly share code, notes, and snippets.

@oriolbx

oriolbx/index.html

Created April 23, 2016 19:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oriolbx/8aa36a091ce32ae939ab156c13b2aa10 to your computer and use it in GitHub Desktop.
Save oriolbx/8aa36a091ce32ae939ab156c13b2aa10 to your computer and use it in GitHub Desktop.
Download ZIP
CartoDB.js: Torque, Heatmap and Torque category map
Raw
index.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"/>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
#selector_menu{
position: absolute;
top: 20px;
left: 40px;
z-index: 9000;
}
</style>
<!-- include cartodb css -->
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
</head>
<body>
<!-- define a map object-->
<div id="map"></div>
<div id='selector_menu'>
<select id='selector'>
<option value='torque'>Torque</option>
<option value='heatmap'>Heatmap</option>
<option value = 'torquecat'>Torque Category</option>
</select>
</div>
<script>
function main() {
//create map element
var map = new L.Map('map', {
zoomControl: true,
center: [40, 0],
zoom: 3
});
// add map
L.tileLayer('http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
attribution: 'CartoDB'
}).addTo(map);
// cartocss style
var CARTOCSSTorque = [
'Map {',
'-torque-time-attribute: "cartodb_id";',
'-torque-aggregation-function: "count(cartodb_id)";',
'-torque-frame-count: 256;',
'-torque-animation-duration: 30;',
'-torque-resolution: 2',
'-torque-data-aggregation:linear;',
'}',
'#populated_places{',
' marker-width: 3;',
' marker-fill-opacity: 0.8;',
' marker-fill: #FEE391; ',
' comp-op: "lighten";',
' [frame-offset = 1] { marker-width: 10; marker-fill-opacity: 0.05;}',
' [frame-offset = 2] { marker-width: 15; marker-fill-opacity: 0.02;}',
'}'
].join('\n');
var CARTOCSSHeatMap = [
'Map {',
'-torque-frame-count:256;',
'-torque-animation-duration:30;',
'-torque-time-attribute:"cartodb_id";',
'-torque-aggregation-function:"count(cartodb_id)";',
'-torque-resolution:8;',
'-torque-data-aggregation:linear;',
'}',
'#populated_places{',
'image-filters: colorize-alpha(blue, cyan, #008000, yellow , orange, red);',
'marker-file: url(http://s3.amazonaws.com/com.cartodb.assets.static/alphamarker.png);',
'marker-fill-opacity: 0.4*[value];',
'marker-width: 35;',
'}'
].join('\n');
var CARTOCSSTorqueCat = [
'Map {',
'-torque-time-attribute: "cartodb_id";',
'-torque-aggregation-function: "CDB_Math_Mode(labelrank)";',
'-torque-frame-count: 256;',
'-torque-animation-duration: 30;',
'-torque-resolution: 2',
'-torque-data-aggregation:linear;',
'}',
'#populated_places{',
'comp-op: source-over;',
'marker-fill-opacity: 0.9;',
'marker-line-color: #FFF;',
'marker-line-width: 0;',
'marker-line-opacity: 1;',
'marker-type: ellipse;',
'marker-width: 6;',
'marker-fill: #FFFFFF;',
'}',
'#populated_places[frame-offset=1] {',
'marker-width:8;',
'marker-fill-opacity:0.45;',
'}',
'#populated_places[frame-offset=2] {',
'marker-width:10;',
'marker-fill-opacity:0.225;',
'}',
'#populated_places[value <= 10] {',
'marker-fill: #F11810;',
'}',
'#populated_places[value < 8] {',
'marker-fill: #1F78B4;',
'}',
'#populated_places[value < 2 ] {',
'marker-fill: #B2DF8A;',
'}'
].join('\n');
// initialize a torque layer that uses the CartoDB account details and SQL API to pull in data
var layerSource = {
type: 'torque',
options: {
query: "SELECT * FROM populated_places",
user_name: 'oboix',
cartocss: CARTOCSSTorque,
loop: false // stop loop of the animation
}
}
cartodb.createLayer(map, layerSource)
.addTo(map)
.done(function(layer){
var torqueLayer = layer;
torqueLayer.stop(); // everytime that the map is reloaded, the torque layer is stop, the animation won't start
// unless you click the "play" button.
torqueLayer.getStep(0); // everytime that the map is reloaded, it restarts the animation
var LayerActions = {
torque: function(){
torqueLayer.setCartoCSS(CARTOCSSTorque);
torqueLayer.getStep(0); // it restarts the animation
torqueLayer.stop(); // the torque layer is stop, the animation won't start unless you click the "play" button.
},
heatmap: function(){
torqueLayer.setCartoCSS(CARTOCSSHeatMap);
torqueLayer.getStep(0); // it restarts the animation
torqueLayer.stop(); // the torque layer is stop, the animation won't start unless you click the "play" button.
return true;
},
torquecat: function(){
torqueLayer.setCartoCSS(CARTOCSSTorqueCat);
torqueLayer.getStep(0); // it restarts the animation
torqueLayer.stop(); // the torque layer is stop, the animation won't start unless you click the "play" button.
return true;
}
}
$('#selector').change(function() {
LayerActions[$(this).val()]();
});
});
}
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment