88 lines
3.0 KiB
HTML
88 lines
3.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<link rel="stylesheet" href="vendor/leaflet.css"/>
|
||
|
|
<style>
|
||
|
|
#map, html, body {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<input type="file" id="files" name="files" />
|
||
|
|
<div id="map"></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, -100],
|
||
|
|
zoom: 3
|
||
|
|
});
|
||
|
|
|
||
|
|
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
|
||
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
|
||
|
|
}).addTo(map);
|
||
|
|
|
||
|
|
var CARTOCSS = [
|
||
|
|
'Map {',
|
||
|
|
'-torque-time-attribute: "date";',
|
||
|
|
'-torque-aggregation-function: "count(cartodb_id)";',
|
||
|
|
'-torque-frame-count: 1000;',
|
||
|
|
'-torque-animation-duration: 200;',
|
||
|
|
'-torque-resolution: 2',
|
||
|
|
'}',
|
||
|
|
'#layer {',
|
||
|
|
' marker-width: 3;',
|
||
|
|
' marker-fill-opacity: 0.8;',
|
||
|
|
' marker-fill: #FEE391; ',
|
||
|
|
' comp-op: "lighten";',
|
||
|
|
' [value > 10] { marker-fill: #FEC44F; }',
|
||
|
|
' [value > 20] { marker-fill: #CC4C02; }',
|
||
|
|
' [value > 30] { marker-fill: #662506; }',
|
||
|
|
' [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 torqueLayer = new L.TorqueLayer({
|
||
|
|
provider: 'internal',
|
||
|
|
resolution: 4,
|
||
|
|
start: 0,
|
||
|
|
end_date: 999,
|
||
|
|
step: 1,
|
||
|
|
steps: 1000,
|
||
|
|
countby: 'count(amount)',
|
||
|
|
pixel_size: 3,
|
||
|
|
cartocss: CARTOCSS
|
||
|
|
});
|
||
|
|
|
||
|
|
torqueLayer.addTo(map);
|
||
|
|
|
||
|
|
function handleFileSelect(evt) {
|
||
|
|
var file = evt.target.files[0];
|
||
|
|
|
||
|
|
Papa.parse(file, {
|
||
|
|
complete: function (results) {
|
||
|
|
for (var i = 1; i <= 1000; i++) {
|
||
|
|
var point = results.data[i];
|
||
|
|
torqueLayer.provider.addPoint(point[1], point[0], point[3], point[2]);
|
||
|
|
}
|
||
|
|
torqueLayer.provider.setReady();
|
||
|
|
torqueLayer.play();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
document.getElementById('files').addEventListener('change', handleFileSelect, false);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|