cartodb/torque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
8bdc9bfe35
torque/examples/csv.html

392 lines
14 KiB
HTML
Raw Normal View History

basic connector + example
2015-06-23 23:40:00 +08:00
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="vendor/leaflet.css"/>
<style>
#map, html, body {
width: 100%;
support for dates + cumulative + animated heatmaps new default styles
2015-07-01 04:04:05 +08:00
height: 95%;
basic connector + example
2015-06-23 23:40:00 +08:00
padding: 0;
margin: 0;
}
fixed bug with date order getbounds now work
2015-07-11 01:24:21 +08:00
#control {
add changes
2015-08-17 21:34:18 +08:00
display:inline-block;
add styles
2015-08-17 15:49:29 +08:00
z-index: 10000;
fixed bug with date order getbounds now work
2015-07-11 01:24:21 +08:00
background: #fff;
add styles
2015-08-17 15:49:29 +08:00
border-radius: 50%;
fixed bug with date order getbounds now work
2015-07-11 01:24:21 +08:00
box-shadow: 0 0 4px rgba(0, 0, 0, .2);
padding: 8px;
cursor: pointer;
add changes
2015-08-17 21:34:18 +08:00
float: left;
display: inline;
fixed bug with date order getbounds now work
2015-07-11 01:24:21 +08:00
}
#control:hover {
background: #f5f5f5;
}
#control span {
display: block;
width: 12px;
height: 12px;
vertical-align: middle;
position:relative
}
#control span.play:before {
content:"";
position: absolute;
display: block;
height: 10px;
width: 3px;
background: #666;
left: 2px;
top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#control span.play:after {
content:"";
position: absolute;
display: block;
height: 10px;
width: 3px;
background: #666;
right: 1px;
top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#control span.pause:before {
content:"";
position: absolute;
display: block;
height: 0px;
width: 0px;
border: 6px solid transparent;
border-left: 8px solid #666;
left: 3px;
}
basic connector + example
2015-06-23 23:40:00 +08:00
</style>
</head>
<body>
add styles
2015-08-17 15:49:29 +08:00
<style type="text/css">
.timeline-inner {
border-radius: 50px;
height: 6px;
background: #fff;
add changes
2015-08-17 21:34:18 +08:00
display: block;
margin-left: 46px;
margin-top: 10px;
add styles
2015-08-17 15:49:29 +08:00
}
.timeline-progress{
display: inline-block;
border-radius: 50px;
height: 6px;
background: #0090D7;
vertical-align: top;
position: relative;
}
.timeline-progress > span {
width: 18px;
height: 18px;
position: absolute;
add changes
2015-08-17 21:34:18 +08:00
top: -6px;
add styles
2015-08-17 15:49:29 +08:00
right: 0;
background: #FFFFFF;
display: inline-block;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, .2);
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.30);
}
#filter *:focus {
outline: none;
}
#filter p {
display: inline-block;
vertical-align: middle;
font-size: 12px;
margin-right: 4px;
}
#filter input[type=checkbox] {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#filter input[type=checkbox].toogle {
border: 0;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1);
background: #ddd;
border-radius: 50px;
width: 36px;
height: 20px;
position: relative;
display: inline-block;
vertical-align: middle;
}
#filter input[type=checkbox].toogle:before {
content: "";
top: 4px;
left: 4px;
position: absolute;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
position: absolute;
box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
}
#filter input[type=checkbox]:checked.toogle {
background: #8FB83F
}
#filter input[type=checkbox]:checked.toogle:before {
left: auto;
right: 4px;
}
add changes
2015-08-17 21:34:18 +08:00
#container {
height: 50px;
background: rgba(0, 0, 0, .8);
width: 100%;
overflow: hidden;
border-top: 1px solid #000;
change ui
2015-09-03 18:32:34 +08:00
font-family: Arial, Helvetica;
font-size: 12px;
add changes
2015-08-17 21:34:18 +08:00
}
#container * {
box-sizing: border-box;
}
#container > ul {
padding: 0;
margin: 0;
}
#container li:first-child {
margin-left: 0;
}
#container li {
list-style-type: none;
change ui
2015-09-03 18:32:34 +08:00
float: left;
add changes
2015-08-17 21:34:18 +08:00
margin: 0;
}
.container-filter {
change ui
2015-09-03 18:32:34 +08:00
width: 20%;
add changes
2015-08-17 21:34:18 +08:00
height: 50px;
padding: 0;
}
.container-action {
change ui
2015-09-03 18:32:34 +08:00
width: 20%;
add changes
2015-08-17 21:34:18 +08:00
padding: 0;
change ui
2015-09-03 18:32:34 +08:00
float: right;
text-align: center;
}
.container-action a {
color: #fff;
text-decoration: none;
line-height: 47px;
}
.container-action img {
display: inline-block;
vertical-align: middle;
margin-left: 8px;
add changes
2015-08-17 21:34:18 +08:00
}
.container-timeline {
change ui
2015-09-03 18:32:34 +08:00
width: 60%;
add changes
2015-08-17 21:34:18 +08:00
padding: 10px 20px 0 20px;
height: 50px;
border-left: 1px solid rgba(255, 255, 255, .2);
border-right: 1px solid rgba(255, 255, 255, .2);
}
.ButtonAction {
text-align: center;
margin: 0;
}
.ButtonAction > a{
background: #3aa9e3;
display: inline-block;
padding: 8px 20px;
color: #fff;
border-radius: 50px;
text-align: center;
text-decoration: none;
}
.ButtonAction > a:hover {
text-decoration: none;
background: #249fe0
}
.container-filter {
text-align: center;
padding-top: 4px;
}
.container-filter p {
display: inline-block;
vertical-align: middle;
color: #fff;
}
add styles
2015-08-17 15:49:29 +08:00
</style>
basic connector + example
2015-06-23 23:40:00 +08:00
<input type="file" id="files" name="files" />
add styles
2015-08-17 15:49:29 +08:00
<div id="map">
change ui
2015-09-03 18:32:34 +08:00
</div>
add changes
2015-08-17 21:34:18 +08:00
change ui
2015-09-03 18:32:34 +08:00
<div id="container">
<ul>
<li class="container-filter" id="filter">
<p>Filter zone</p>
<input type="checkbox" class="toogle" name="foo" value="foo">
</li>
<li class="container-timeline">
<div id="control"><span class="play"></span></div>
<div class="timeline-inner">
<div class="timeline-progress" style="width: 50%;">
<span></span>
add changes
2015-08-17 21:34:18 +08:00
</div>
add styles
2015-08-17 15:49:29 +08:00
</div>
change ui
2015-09-03 18:32:34 +08:00
</li>
<li class="container-action">
<a href="#">
<span>Analyze your data</span>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAclJREFUSA3VlzFLA0EQhe80BC2sRNDSLp2dIApaCVb+BC1tbBQrW4vUIthKWsHCSrESLUQsRdBCsDBJYUARC0E9vwm33uVyyc1uSIIDj5mdnZmX3Z3sJl4QBHlQBGXQbREO4cp7odFtwmT9oo+n7HneBOilVIQ46CWj4RowRq/1vyU+YaemwIP1jiXbzWJ8RuygEKLXLfLqoZ00V8H3/fuQeAT9DESrxPaMf6h6DE4NqbBgv6MOxNaKDfE5RWWVy+irFII9fC8p/nSX8mwOicuZCthLYMiM4xr/BsgUaYwseSWg6ezwjQM/Tio2vhy4Bm1Fs9U34Rk2cOCrgqZbD98XgfsNwSkDDfFbSl6W6y4rQEOsb5iIbSwy0y0N8QqHtZqe3tI723LGTLTtgGjyE3PR5CQ1c3JzLYgfPQwyf1RoViz18uCIgjMyiAu+bcaTYC7076Cz33cSbaRGcCEkkNVtgTVwCUbBJlCJy139CLG8SB+gBuS+vgDzYBqoxIVYCsv39BbsgvoLhbYS7Rkni8oqq+A7OaEd/92/2oQw7gktj780nZO4brUTWTzJdavjNZzsvhJXnD5yZ0kVWXGpsxpO2SW5ffryp+0XLlaMejDd+O4AAAAASUVORK5CYII="/>
</a>
</li>
add styles
2015-08-17 15:49:29 +08:00
</div>
basic connector + example
2015-06-23 23:40:00 +08:00
<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,
fixed bug with date order getbounds now work
2015-07-11 01:24:21 +08:00
center: [40, 0],
zoom: 6
basic connector + example
2015-06-23 23:40:00 +08:00
});
add changes
2015-08-17 21:34:18 +08:00
support for dates + cumulative + animated heatmaps new default styles
2015-07-01 04:04:05 +08:00
L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
basic connector + example
2015-06-23 23:40:00 +08:00
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
support for dates + cumulative + animated heatmaps new default styles
2015-07-01 04:04:05 +08:00
var CARTOCSS_NORMAL = [
basic connector + example
2015-06-23 23:40:00 +08:00
'Map {',
'}',
support for dates + cumulative + animated heatmaps new default styles
2015-07-01 04:04:05 +08:00
'#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;',
basic connector + example
2015-06-23 23:40:00 +08:00
'}'
].join('\n');
support for dates + cumulative + animated heatmaps new default styles
2015-07-01 04:04:05 +08:00
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');
fixed bug with date order getbounds now work
2015-07-11 01:24:21 +08:00
var pointsToLoad = 50000;
support for dates + cumulative + animated heatmaps new default styles
2015-07-01 04:04:05 +08:00
var animationDuration = 60;
fixed bug with date order getbounds now work
2015-07-11 01:24:21 +08:00
var steps = 2048;
var cumulative = false;
support for dates + cumulative + animated heatmaps new default styles
2015-07-01 04:04:05 +08:00
var loop = true;
var cartocss = CARTOCSS_NORMAL;
basic connector + example
2015-06-23 23:40:00 +08:00
var torqueLayer = new L.TorqueLayer({
provider: 'internal',
support for dates + cumulative + animated heatmaps new default styles
2015-07-01 04:04:05 +08:00
loop: loop,
steps: steps,
animationDuration: animationDuration,
data_aggregation: cumulative ? "cumulative" : undefined,
cartocss: cartocss
basic connector + example
2015-06-23 23:40:00 +08:00
});
torqueLayer.addTo(map);
function handleFileSelect(evt) {
var file = evt.target.files[0];
Papa.parse(file, {
complete: function (results) {
support for dates + cumulative + animated heatmaps new default styles
2015-07-01 04:04:05 +08:00
for (var i = 1; i <= pointsToLoad && i < results.data.length; i++) {
basic connector + example
2015-06-23 23:40:00 +08:00
var point = results.data[i];
add comment with csv order of train file
2015-09-04 17:52:53 +08:00
//torqueLayer.provider.addPoint(point[2], point[1], point[0], point[3]);
add styles
2015-08-17 15:49:29 +08:00
torqueLayer.provider.addPoint(point[1], point[0], point[3], point[2]);
basic connector + example
2015-06-23 23:40:00 +08:00
}
torqueLayer.provider.setReady();
fixed bug with date order getbounds now work
2015-07-11 01:24:21 +08:00
document.getElementById('control').style.visibility = "visible";
basic connector + example
2015-06-23 23:40:00 +08:00
torqueLayer.play();
fixed bug with date order getbounds now work
2015-07-11 01:24:21 +08:00
basic connector + example
2015-06-23 23:40:00 +08:00
}
});
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
fixed bug with date order getbounds now work
2015-07-11 01:24:21 +08:00
function handlePlayPause(evt) {
if (torqueLayer.isRunning()) {
torqueLayer.pause();
} else {
torqueLayer.play();
}
}
document.getElementById('control').addEventListener('click', handlePlayPause, false);
basic connector + example
2015-06-23 23:40:00 +08:00
</script>
</body>
</html>
Reference in New Issue Copy Permalink