cartodb/torque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

readme

Browse Source
This commit is contained in:
javi 2013-09-30 17:01:56 +02:00
parent 2690dfacc7
commit 1957a4b73f
2 changed files with 104 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -7,8 +7,9 @@ CartoDB users can use this code right away. Specify your username/tablename and
Have fun!
* A car in Nürburgring track: http://cartodb.github.com/torque/examples/car.html
* Play with your own data: http://cartodb.github.com/torque/
* The Guardian's Data Blog write-up of Royal Navy ships in WWI: http://www.guardian.co.uk/news/datablog/interactive/2012/oct/01/first-world-war-royal-navy-ships-mapped
* A car in Nürburgring track: http://cartodb.github.com/torque/examples/car.html
## Torque library reference

102
examples/car.html Normal file
View File

@ -0,0 +1,102 @@
<html>
<link rel="stylesheet" href="../vendor/leaflet.css" />
<style>
#map, html, body {
width: 100%; height: 100%; padding: 0; margin: 0;
}
</style>
<body>
<div id="map"></div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="../vendor/underscore.js"></script>
<script src="../vendor/carto.js"></script>
<script src="../dist/torque.uncompressed.js"></script>
<script>
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(50.36274924193307,6.952676312093109),
zoom: 13,
mapTypeId:google.maps.MapTypeId.SATELLITE,
mapTypeControl:false,
minZoom:1,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
});
var map_style = {};
map_style.google_maps_customization_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:map_style.google_maps_customization_style});
var torqueLayer = new torque.GMapsTorqueLayer({
user : 'javi',
table : 'sensor_log_2013_05_30_15_25',
column : 'cartodb_id',
countby : 'avg(vel)',
resolution: 1,
is_time: false,
steps: 1024,
blendmode : 'lighter',
animationDuration: 20,
map: map
});
var DEFAULT_CARTOCSS = [
'#layer {',
'marker-width: 3; ',
'marker-fill: #FEE391; ',
'marker-fill-opacity: 0.2;',
'[value > 10] { marker-width: 3; }',
'[value > 20] { marker-width: 4; }',
'[value > 30] { marker-width: 6; }',
'[value > 40] { marker-width: 10; marker-fill: #FFF; }',
'[frame-offset = 1] {',
'marker-width: 4;',
'marker-fill-opacity: 0.1;',
'}',
'[frame-offset = 2] { ',
'marker-width: 4;',
'marker-fill-opacity: 0.1;',
'}',
'[frame-offset = 3] { ',
'marker-width: 3;',
'marker-fill-opacity: 0.1;',
'}',
'[frame-offset = 4] { ',
'marker-width: 2;',
'marker-fill-opacity: 0.1;',
'}',
'[frame-offset = 5] { ',
'marker-width: 2;',
'marker-fill-opacity: 0.1;',
'}',
'}'
].join('\n');
torqueLayer.setCartoCSS(DEFAULT_CARTOCSS);
torqueLayer.setMap(map);
torqueLayer.play()
</script>
</body>
</html>