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

Point labels [Dont merge just yet] #223

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+207 −32
Open

Point labels [Dont merge just yet] #223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
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
cdb986f
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
10 changes: 5 additions & 5 deletions dist/torque.full.js
View file
Open in desktop

Large diffs are not rendered by default.

41 changes: 31 additions & 10 deletions dist/torque.full.uncompressed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4399,9 +4399,9 @@ var Profiler = require('../profiler');

},{"../":10,"../profiler":17}],22:[function(require,module,exports){
var TAU = Math.PI*2;
// min value to render a line.
// min value to render a line.
// it does not make sense to render a line of a width is not even visible
var LINEWIDTH_MIN_VALUE = 0.05;
var LINEWIDTH_MIN_VALUE = 0.05;
var MAX_SPRITE_RADIUS = 255;

function renderPoint(ctx, st) {
Expand Down Expand Up @@ -4473,6 +4473,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){
Expand All @@ -4487,6 +4501,7 @@ module.exports = {
renderPoint: renderPoint,
renderSprite: renderSprite,
renderRectangle: renderRectangle,
renderText: renderText,
MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS
};

Expand Down Expand Up @@ -4557,7 +4572,7 @@ var Filters = require('./torque_filters');
this.TILE_SIZE = 256;
this._style = null;
this._gradients = {};

this._forcePoints = false;
}

Expand Down Expand Up @@ -4659,13 +4674,19 @@ 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();
i.src = canvas.toDataURL();
return i;
}

return canvas;
},

Expand Down Expand Up @@ -4693,7 +4714,7 @@ var Filters = require('./torque_filters');
}
}
}

prof.end(true);

return callback && callback(null);
Expand Down Expand Up @@ -4737,7 +4758,7 @@ var Filters = require('./torque_filters');
},

//
// renders a tile in the canvas for key defined in
// renders a tile in the canvas for key defined in
// the torque tile
//
_renderTile: function(tile, key, frame_offset, sprites, shader, shaderVars) {
Expand Down Expand Up @@ -4774,7 +4795,7 @@ var Filters = require('./torque_filters');
}
}
}


prof.end(true);
},
Expand Down Expand Up @@ -4925,7 +4946,7 @@ var Filters = require('./torque_filters');
}
gradient = {};
var colorize = this._style['image-filters'].args;

var increment = 1/colorize.length;
for (var i = 0; i < colorize.length; i++){
var key = increment * i + increment;
Expand Down Expand Up @@ -13932,7 +13953,7 @@ module.exports={
"url": "https://github.com/cartodb/carto",
"repository": {
"type": "git",
"url": "http://github.com/cartodb/carto.git"
"url": "git+ssh://git@github.com/cartodb/carto.git"
},
"author": {
"name": "CartoDB",
Expand Down Expand Up @@ -14003,7 +14024,7 @@ module.exports={
"bugs": {
"url": "https://github.com/cartodb/carto/issues"
},
"homepage": "https://github.com/cartodb/carto",
"homepage": "https://github.com/cartodb/carto#readme",
"_id": "[email protected]",
"_shasum": "62534c2975cbee073f10c6c14a0c7e889c9469e7",
"_resolved": "https://github.com/CartoDB/carto/archive/master.tar.gz",
Expand Down
2 changes: 1 addition & 1 deletion dist/torque.js
View file
Open in desktop

Large diffs are not rendered by default.

37 changes: 29 additions & 8 deletions dist/torque.uncompressed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4406,9 +4406,9 @@ var Profiler = require('../profiler');

},{"../":10,"../profiler":17}],22:[function(require,module,exports){
var TAU = Math.PI*2;
// min value to render a line.
// min value to render a line.
// it does not make sense to render a line of a width is not even visible
var LINEWIDTH_MIN_VALUE = 0.05;
var LINEWIDTH_MIN_VALUE = 0.05;
var MAX_SPRITE_RADIUS = 255;

function renderPoint(ctx, st) {
Expand Down Expand Up @@ -4480,6 +4480,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){
Expand All @@ -4494,6 +4508,7 @@ module.exports = {
renderPoint: renderPoint,
renderSprite: renderSprite,
renderRectangle: renderRectangle,
renderText: renderText,
MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS
};

Expand Down Expand Up @@ -4564,7 +4579,7 @@ var Filters = require('./torque_filters');
this.TILE_SIZE = 256;
this._style = null;
this._gradients = {};

this._forcePoints = false;
}

Expand Down Expand Up @@ -4666,13 +4681,19 @@ 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();
i.src = canvas.toDataURL();
return i;
}

return canvas;
},

Expand Down Expand Up @@ -4700,7 +4721,7 @@ var Filters = require('./torque_filters');
}
}
}

prof.end(true);

return callback && callback(null);
Expand Down Expand Up @@ -4744,7 +4765,7 @@ var Filters = require('./torque_filters');
},

//
// renders a tile in the canvas for key defined in
// renders a tile in the canvas for key defined in
// the torque tile
//
_renderTile: function(tile, key, frame_offset, sprites, shader, shaderVars) {
Expand Down Expand Up @@ -4781,7 +4802,7 @@ var Filters = require('./torque_filters');
}
}
}


prof.end(true);
},
Expand Down Expand Up @@ -4932,7 +4953,7 @@ var Filters = require('./torque_filters');
}
gradient = {};
var colorize = this._style['image-filters'].args;

var increment = 1/colorize.length;
for (var i = 0; i < colorize.length; i++){
var key = increment * i + increment;
Expand Down
112 changes: 112 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,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>
19 changes: 17 additions & 2 deletions lib/torque/renderer/cartocss_render.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
var TAU = Math.PI*2;
// min value to render a line.
// min value to render a line.
// it does not make sense to render a line of a width is not even visible
var LINEWIDTH_MIN_VALUE = 0.05;
var LINEWIDTH_MIN_VALUE = 0.05;
var MAX_SPRITE_RADIUS = 255;

function renderPoint(ctx, st) {
Expand Down Expand Up @@ -73,6 +73,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){
Expand All @@ -87,5 +101,6 @@ module.exports = {
renderPoint: renderPoint,
renderSprite: renderSprite,
renderRectangle: renderRectangle,
renderText: renderText,
MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS
};
Loading