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

Merge branch 'point_labels' into multi_variable_with_scaling

Browse Source
This commit is contained in:
Stuart Lynn 2015-09-11 13:07:18 -04:00
commit a47279e11a
7 changed files with 181 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
dist/torque.full.js vendored
View File

File diff suppressed because one or more lines are too long

21
dist/torque.full.uncompressed.js vendored
View File

@ -4548,6 +4548,20 @@ var Profiler = require('../profiler');
}
}
function renderText(ctx,st){
var width = st['marker-width']
var text = st['text-name']
var font = st['text-face-name'] ? st['text-face-name'] : 'Droid Sans Regular'
var textSize = st['text-size'] ? st['text-size'] : '10px'
var color = st['text-fill'] ? st['text-fill'] : 'white'
// ctx.font = textSize+"px "+font
ctx.fillStyle = color
ctx.font= textSize + " " + font
ctx.fillText(text, -width/2.0, width/2.0 )
}
function renderSprite(ctx, img, st) {
if(img.complete){
@ -4563,6 +4577,7 @@ module.exports = {
renderSprite: renderSprite,
renderRectangle: renderRectangle,
renderVector: renderVector,
renderText: renderText,
MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS
};
@ -4786,6 +4801,12 @@ var Filters = require('./torque_filters');
cartocss.renderPoint(ctx, st);
}
}
if(st['text-name']){
st['text-name'] = st['text-name'].replace("{{value}}",value)
cartocss.renderText(ctx,st)
}
prof.end(true);
if (torque.flags.sprites_to_images) {
var i = this._createImage();

2
dist/torque.js vendored
View File

File diff suppressed because one or more lines are too long

21
dist/torque.uncompressed.js vendored
View File

@ -4555,6 +4555,20 @@ var Profiler = require('../profiler');
}
}
function renderText(ctx,st){
var width = st['marker-width']
var text = st['text-name']
var font = st['text-face-name'] ? st['text-face-name'] : 'Droid Sans Regular'
var textSize = st['text-size'] ? st['text-size'] : '10px'
var color = st['text-fill'] ? st['text-fill'] : 'white'
// ctx.font = textSize+"px "+font
ctx.fillStyle = color
ctx.font= textSize + " " + font
ctx.fillText(text, -width/2.0, width/2.0 )
}
function renderSprite(ctx, img, st) {
if(img.complete){
@ -4570,6 +4584,7 @@ module.exports = {
renderSprite: renderSprite,
renderRectangle: renderRectangle,
renderVector: renderVector,
renderText: renderText,
MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS
};
@ -4793,6 +4808,12 @@ var Filters = require('./torque_filters');
cartocss.renderPoint(ctx, st);
}
}
if(st['text-name']){
st['text-name'] = st['text-name'].replace("{{value}}",value)
cartocss.renderText(ctx,st)
}
prof.end(true);
if (torque.flags.sprites_to_images) {
var i = this._createImage();

112
examples/text_render_example.html Normal file
View File

@ -0,0 +1,112 @@
<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',
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>

15
lib/torque/renderer/cartocss_render.js
View File

@ -98,6 +98,20 @@
}
}
function renderText(ctx,st){
var width = st['marker-width']
var text = st['text-name']
var font = st['text-face-name'] ? st['text-face-name'] : 'Droid Sans Regular'
var textSize = st['text-size'] ? st['text-size'] : '10px'
var color = st['text-fill'] ? st['text-fill'] : 'white'
// ctx.font = textSize+"px "+font
ctx.fillStyle = color
ctx.font= textSize + " " + font
ctx.fillText(text, -width/2.0, width/2.0 )
}
function renderSprite(ctx, img, st) {
if(img.complete){
@ -113,5 +127,6 @@ module.exports = {
renderSprite: renderSprite,
renderRectangle: renderRectangle,
renderVector: renderVector,
renderText: renderText,
MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS
};

6
lib/torque/renderer/point.js
View File

@ -210,6 +210,12 @@ var Filters = require('./torque_filters');
cartocss.renderPoint(ctx, st);
}
}
if(st['text-name']){
st['text-name'] = st['text-name'].replace("{{value}}",value)
cartocss.renderText(ctx,st)
}
prof.end(true);
if (torque.flags.sprites_to_images) {
var i = this._createImage();