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

Proof of concept for multi variable torque with scaling functions for variables #224

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

Proof of concept for multi variable torque with scaling functions for variables #224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
85f11a7
Proof of concept of how CartoCSS could be extended to allow propertie…
stuartlynn Sep 4, 2015
2a47541
adding redner text function to cartocss_render
stuartlynn Sep 8, 2015
a03f9ca
compile
stuartlynn Sep 8, 2015
e2bcae0
adding text render example
stuartlynn Sep 8, 2015
6b0e946
Adding some support for multiple variables in Torque. This is a test …
stuartlynn Sep 8, 2015
17f2c2a
build
stuartlynn Sep 8, 2015
35e1044
adding in example
stuartlynn Sep 8, 2015
b9bcb1b
more sensible mapping for the multiple values
stuartlynn Sep 9, 2015
e9bde54
build
stuartlynn Sep 9, 2015
c75271d
Merge branch 'scale_functions_for_variables' into multi_variable_with…
stuartlynn Sep 9, 2015
266919a
updating example
stuartlynn Sep 9, 2015
b24b4b0
Apply the scaling functions to different variables
stuartlynn Sep 9, 2015
a2f7ce0
build
stuartlynn Sep 9, 2015
5763feb
Merge branch 'scale_functions_for_variables' into multi_variable_with…
stuartlynn Sep 9, 2015
73e2a37
fix problem when there is only one variable requested. Default that h…
stuartlynn Sep 9, 2015
cd7bb69
Merge branch 'multi_variable_json_torque_test' into multi_variable_wi…
stuartlynn Sep 9, 2015
73ed8bd
mutli variable scaling function example
stuartlynn Sep 9, 2015
25d0fb7
build
stuartlynn Sep 9, 2015
3a9f47b
adding vector renderer for torque
stuartlynn Sep 9, 2015
70c34d2
build
stuartlynn Sep 9, 2015
1b93a6c
example file for vector field
stuartlynn Sep 9, 2015
05aa3db
Merge branch 'vector_marker' into multi_variable_with_scaling
stuartlynn Sep 9, 2015
3964b32
add properties to scale
stuartlynn Sep 9, 2015
ed58582
tweak example
stuartlynn Sep 9, 2015
dfc8345
build
stuartlynn Sep 9, 2015
29220a1
examples updates
stuartlynn Sep 11, 2015
f41d79a
correcting typo
stuartlynn Sep 11, 2015
120e383
build
stuartlynn Sep 11, 2015
a47279e
Merge branch 'point_labels' into multi_variable_with_scaling
stuartlynn Sep 11, 2015
a27e8f8
allow any values to be used in the text renderer
stuartlynn Sep 14, 2015
7292104
use sql_api
stuartlynn Sep 14, 2015
69b3f97
build
stuartlynn Sep 14, 2015
dc389b7
build
stuartlynn Sep 28, 2015
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
12 changes: 6 additions & 6 deletions dist/torque.full.js
View file
Open in desktop

Large diffs are not rendered by default.

215 changes: 184 additions & 31 deletions dist/torque.full.uncompressed.js
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/torque.js
View file
Open in desktop

Large diffs are not rendered by default.

211 changes: 182 additions & 29 deletions dist/torque.uncompressed.js
View file
Open in desktop

Large diffs are not rendered by default.

80 changes: 80 additions & 0 deletions examples/leaflet_with_scaling_functions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@

<html>
<link rel="stylesheet" href="vendor/leaflet.css" />
<style>
#map, html, body {
width: 100%; height: 100%; padding: 0; margin: 0;
}
#title {
position: absolute;
top: 100px;
left: 50px;
color: white;
font-size: 27px;
font-family: Helvetica, sans-serif;
}
</style>
<body>
<div id="map"></div>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="../../dist/torque.full.uncompressed.js"></script>


<script>
// define the torque layer style using cartocss
// this creates a kind of density map
//color scale from http://colorbrewer2.org/
var CARTOCSS = [
'Map {',
'-torque-time-attribute: "time";',
'-torque-aggregation-function: "avg(abs(depth));avg(mag)";',
'-torque-frame-count: 200;',
'-torque-animation-duration: 20;',
'-torque-resolution: 1',
'}',
'#all_month_3 {',
' marker-width: "scale_lin(value0,0.0,10,0,5)";',
' marker-fill-opacity: "scale_sqrt(frame-offset,0,9,1,0)";',
' marker-type: ellipse;',
' marker-fill: "scale_lin(value1,0.1,5,blue,red)";',
'}',
'#all_month_3[frame-offset=1]{}',
'#all_month_3[frame-offset=2]{}',
'#all_month_3[frame-offset=3]{}',
'#all_month_3[frame-offset=4]{}',
'#all_month_3[frame-offset=5]{}',
'#all_month_3[frame-offset=6]{}',
'#all_month_3[frame-offset=7]{}',
'#all_month_3[frame-offset=8]{}',
'#all_month_3[frame-offset=9]{}',
].join('\n');


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

L.tileLayer('http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
attribution: 'CartoDB'
}).addTo(map);

var torqueLayer = new L.TorqueLayer({
user : 'eschbacher',
table : 'all_month_3',
provider : 'sql_api',
cartocss: CARTOCSS
});
torqueLayer.addTo(map);
torqueLayer.play();



</script>
</body>
</html>
152 changes: 152 additions & 0 deletions examples/multi_variable_test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@

<html>
<link rel="stylesheet" href="vendor/leaflet.css" />
<style>
#map, html, body {
width: 100%; height: 100%; padding: 0; margin: 0;
}
#title {
position: absolute;
top: 100px;
left: 50px;
color: white;
font-size: 27px;
font-family: Helvetica, sans-serif;
}
</style>
<body>
<div id="map"></div>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="../dist/torque.full.uncompressed.js"></script>


<script>
// define the torque layer style using cartocss
// this creates a kind of density map
//color scale from http://colorbrewer2.org/
var CARTOCSS = [
'Map {',
'-torque-time-attribute: "time";',
'-torque-aggregation-function: "avg(mag*10);avg(depth)";',
'-torque-frame-count: 256;',
'-torque-animation-duration: 30;',
'-torque-resolution: 1',
'}',
'#all_day {',
' marker-width: 4;',
' marker-fill-opacity: 0.7;',
' marker-type: ellipse;',
'marker-fill: #FFFFB2;',
'}',
'#all_day [ value1 <= 250] {',
' marker-width: 15.0;',
'}',
'#all_day [ value1 <= 50.15] {',
' marker-width: 14.0;',
'}',
'#all_day [ value1 <= 18.5095] {',
' marker-width: 13.0;',
'}',
'#all_day [ value1 <= 14.5909] {',
' marker-width: 12.0;',
'}',
'#all_day [ value1 <= 11.785] {',
' marker-width: 11.0;',
'}',
'#all_day [ value1 <= 9.30425] {',
' marker-width: 10.0;',
'}',
'#all_day [ value1 <= 7.10635] {',
' marker-width: 9.0;',
'}',
'#all_day [ value1 <= 5.4714] {',
' marker-width: 8.0;',
'}',
'#all_day [ value1 <= 2.825] {',
' marker-width: 7.0;',
'}',
'#all_day [ value1 <= 1.7035] {',
' marker-width: 6.0;',
'}',
'#all_day [ value0 <= 80.2] {',
'marker-fill: #B10026;',
'}',
'#all_day [ value0 <= 60.2] {',
'marker-fill: #E31A1C;',
'}',
'#all_day [ value0 <= 40.58] {',
'marker-fill: #FC4E2A;',
'}',
'#all_day [ value0 <= 30.92] {',
'marker-fill: #FD8D3C;',
'}',
'#all_day [ value0 <= 30.6] {',
'marker-fill: #FEB24C;',
'}',
'#all_day [ value0 <= 30.35] {',
'marker-fill: #FED976;',
'}',
'#all_day [ value0 <= 3.16] {',
'marker-fill: #FFFFB2;',
'}'

].join('\n');


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

L.tileLayer('http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
attribution: 'CartoDB'
}).addTo(map);

var torqueLayer = new L.TorqueLayer({
user : 'stuartlynn',
table : 'quakes_2014',
provider : 'sql_api',
cartocss: CARTOCSS
});
torqueLayer.addTo(map);
torqueLayer.play();

map.on('click', function(e) {
var p = e.containerPoint
var value = torqueLayer.getValueForPos(p.x, p.y);
if (value !== null) {
map.openPopup('average temperature: ' + value.value + "C", e.latlng);
}
});


// show small rectable and change cursor on hover
var hover = null;
map.on('mousemove', function(e) {
var p = e.containerPoint
var value = torqueLayer.getValueForPos(p.x, p.y);

// remove previous hover box
if (hover) {
map.removeLayer(hover);
hover = null;
}

if (value !== null) {
hover = L.rectangle(value.bbox, {
color: '#000',
weight: 1
}).addTo(map);
map._container.style.cursor = 'pointer';
} else {
map._container.style.cursor = 'auto';
}
});


</script>
</body>
</html>
113 changes: 113 additions & 0 deletions examples/text_render_example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@

<html>
<link rel="stylesheet" href="vendor/leaflet.css" />
<style>
#map, html, body {
width: 100%; height: 100%; padding: 0; margin: 0;
}
#title {
position: absolute;
top: 100px;
left: 50px;
color: white;
font-size: 27px;
font-family: Helvetica, sans-serif;
}
</style>
<body>
<div id="map"></div>
<div id="title">Average temperature collected by Britain's Royal Navy (1913-1925)</div>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="../dist/torque.full.uncompressed.js"></script>


<script>
// define the torque layer style using cartocss
// this creates a kind of density map
//color scale from http://colorbrewer2.org/
var CARTOCSS = [
'Map {',
'-torque-time-attribute: "date";',
'-torque-aggregation-function: "avg(temp::float)";',
'-torque-frame-count: 1;',
'-torque-animation-duration: 15;',
'-torque-resolution: 32',

'}',
'#layer {',
' marker-width: 16;',
' marker-fill-opacity: 1.0;',
' marker-fill: #fff5eb; ',
' marker-type: rectangle;',
'text-name: "{{value}}c";',
'text-face-name: "Arial";',
'text-fill: #036;',
'text-size: 100px;',
' [value > 1] { marker-fill: #fee6ce; }',
' [value > 2] { marker-fill: #fdd0a2; }',
' [value > 4] { marker-fill: #fdae6b; }',
' [value > 10] { marker-fill: #fd8d3c; }',
' [value > 15] { marker-fill: #f16913; }',
' [value > 20] { marker-fill: #d94801; }',
' [value > 25] { marker-fill: #8c2d04; }',

'}'
].join('\n');


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

L.tileLayer('http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
attribution: 'CartoDB'
}).addTo(map);

var torqueLayer = new L.TorqueLayer({
user : 'viz2',
table : 'ow',
provider : 'sql_api',
cartocss: CARTOCSS
});
torqueLayer.addTo(map);

map.on('click', function(e) {
var p = e.containerPoint
var value = torqueLayer.getValueForPos(p.x, p.y);
if (value !== null) {
map.openPopup('average temperature: ' + value.value + "C", e.latlng);
}
});


// show small rectable and change cursor on hover
var hover = null;
map.on('mousemove', function(e) {
var p = e.containerPoint
var value = torqueLayer.getValueForPos(p.x, p.y);

// remove previous hover box
if (hover) {
map.removeLayer(hover);
hover = null;
}

if (value !== null) {
hover = L.rectangle(value.bbox, {
color: '#000',
weight: 1
}).addTo(map);
map._container.style.cursor = 'pointer';
} else {
map._container.style.cursor = 'auto';
}
});


</script>
</body>
</html>
Loading