Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Internal provider #221

Open
wants to merge 18 commits into
base: master
Choose a base branch
from
Open

Internal provider #221

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
4d1cf96
basic connector + example
Jun 23, 2015
2c604a8
support for dates + cumulative + animated heatmaps
Jun 30, 2015
521ae23
fixed bug with date order
Jul 10, 2015
e91a29a
add styles
Aug 17, 2015
859c8c6
add changes
Aug 17, 2015
fd426fb
change ui
Sep 3, 2015
dacef12
time scale is linear now
Sep 4, 2015
24307da
Merge branch 'internal-provider' of github.com:CartoDB/torque into in…
Sep 4, 2015
8bdc9bf
add comment with csv order of train file
Sep 4, 2015
5c665d1
Merge branch 'master' into internal-provider
Sep 4, 2015
e422b0a
missing </ul>
Sep 4, 2015
9d9d402
fix ui
Sep 17, 2015
0c1aba5
use mercator library for calculations
Sep 17, 2015
20acea1
Merge branch 'internal-provider' of github.com:CartoDB/torque into in…
Sep 17, 2015
eeb1093
add loader
Sep 17, 2015
332cbeb
Merge branch 'internal-provider' of github.com:CartoDB/torque into in…
Sep 17, 2015
ff43225
simplified
Sep 21, 2015
d2ad868
CSV example revamped
Jul 15, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 148 additions & 0 deletions examples/csv.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="vendor/leaflet.css"/>
<style>
html, body, #map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="file_selector"><input type="file" id="files" name="files" /> <i>Row: lat, lon, time, value</i></div>
<div id="map">
<div class="mapLayer" id="filter">
<p>Filter zone</p>
<input type="checkbox" class="toogle" name="foo" value="foo">
</div>
</div>

<script src="vendor/leaflet.js"></script>
<script src="vendor/papaparse.min.js"></script>
<script src="../dist/torque.full.uncompressed.js"></script>


<script>
var map = new L.Map('map', {
zoomControl: true,
center: [40, 0],
zoom: 6
});

L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);

var CARTOCSS_NORMAL = [
'Map {',
'}',
'#layer{',
' comp-op: lighter;',
' marker-line-color: #FFF;',
' marker-line-width: 0;',
' marker-line-opacity: 1;',
' marker-type: ellipse;',
' marker-width: 2;',
' marker-fill: #FF6600;',
' marker-opacity: 0.1',
'}',
'#layer::point2 {',
' marker-width: 1;',
' marker-fill: #FF6600;',
' marker-fill-opacity: 1;',
' marker-line-color: #fff;',
' marker-line-width: 1;',
' marker-line-opacity: 0;',
'}',
'#layer::point3 {',
' marker-width: 4;',
' marker-fill: #ff6600;',
' marker-fill-opacity: .2;',
' marker-line-color: #fff;',
' marker-line-width: 1;',
' marker-line-opacity: 0;',
'}',
'#layer::point {',
' marker-width: 6;',
' marker-fill: #ff6600;',
' marker-fill-opacity: 0;',
' marker-line-color: #ff6600;',
' marker-line-width: 1;',
' marker-line-opacity: .1;',
'}',
'#layer[frame-offset=1] {',
' marker-width:2;',
' marker-opacity:0.45;',
'}',
'#layer[frame-offset=2]{',
' marker-width:4;',
' marker-opacity:0.225;',
'}',
'#layer[frame-offset=3]{',
' marker-width:6;',
' marker-opacity:0.1;',
'}',
'#layer[frame-offset=4]{',
' marker-width:8;',
' marker-opacity:0.05;',
'}',
'#layer[frame-offset=5]{',
' marker-width:10;',
' marker-opacity:0.02;',
'}'
].join('\n');

var CARTOCSS_INTENSITY = [
'Map {',
'}',
'#layer {',
' image-filters: colorize-alpha(blue, cyan, lightgreen, 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 pointsToLoad = 50000;

var animationDuration = 60;
var steps = 2048;
var cumulative = false;
var loop = true;
var cartocss = CARTOCSS_NORMAL;

var torqueLayer = new L.TorqueLayer({
provider: 'internal',
loop: loop,
steps: steps,
animationDuration: animationDuration,
data_aggregation: cumulative ? "cumulative" : undefined,
cartocss: cartocss
});

torqueLayer.addTo(map);

function handleFileSelect(evt) {
document.getElementById("file_selector").style.display = "none";
var file = evt.target.files[0];

Papa.parse(file, {
complete: function (results) {
for (var i = 1; i <= pointsToLoad && i < results.data.length; i++) {
var point = results.data[i];
// lat, lon, time, value
torqueLayer.provider.addPoint(point[0], point[1], point[2], point[3]);
}
torqueLayer.provider.setReady();
torqueLayer.play();
}
});
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>

6 changes: 6 additions & 0 deletions examples/vendor/papaparse.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion lib/torque/leaflet/torque.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ L.TorqueLayer = L.CanvasLayer.extend({
providers: {
'sql_api': torque.providers.json,
'url_template': torque.providers.JsonArray,
'windshaft': torque.providers.windshaft
'windshaft': torque.providers.windshaft,
'internal': torque.providers.internal
},

renderers: {
Expand Down
Loading