build

adding text render example
compile
2015-09-28 13:14:27 -04:00 · 2015-09-08 12:00:21 -04:00 · 2015-09-08 12:00:05 -04:00 · 2015-09-08 11:58:55 -04:00
7 changed files with 207 additions and 32 deletions
--- a/dist/torque.full.js
+++ b/dist/torque.full.js
--- a/dist/torque.full.uncompressed.js
+++ b/dist/torque.full.uncompressed.js
@ -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){
@ -4487,6 +4501,7 @@ module.exports = {
    renderPoint: renderPoint,
    renderSprite: renderSprite,
    renderRectangle: renderRectangle,
    renderText: renderText,
    MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS
 };
@ -4659,6 +4674,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();
@ -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",
@ -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": "carto@0.15.1-cdb1",
  "_shasum": "62534c2975cbee073f10c6c14a0c7e889c9469e7",
  "_resolved": "https://github.com/CartoDB/carto/archive/master.tar.gz",
--- a/dist/torque.js
+++ b/dist/torque.js
--- a/dist/torque.uncompressed.js
+++ b/dist/torque.uncompressed.js
@ -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){
@ -4494,6 +4508,7 @@ module.exports = {
    renderPoint: renderPoint,
    renderSprite: renderSprite,
    renderRectangle: renderRectangle,
    renderText: renderText,
    MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS
 };
@ -4666,6 +4681,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();
--- a/examples/text_render_example.html
+++ b/examples/text_render_example.html
@ -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>
--- a/lib/torque/renderer/cartocss_render.js
+++ b/lib/torque/renderer/cartocss_render.js
@ -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){
@ -87,5 +101,6 @@ module.exports = {
    renderPoint: renderPoint,
    renderSprite: renderSprite,
    renderRectangle: renderRectangle,
    renderText: renderText,
    MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS
 };
--- a/lib/torque/renderer/point.js
+++ b/lib/torque/renderer/point.js
@ -159,6 +159,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();
Author	SHA1	Message	Date
Stuart Lynn	cdb986f506	build	2015-09-28 13:14:27 -04:00
Stuart Lynn	e2bcae0c84	adding text render example	2015-09-08 12:00:21 -04:00
Stuart Lynn	a03f9ca4e2	compile	2015-09-08 12:00:05 -04:00
Stuart Lynn	2a47541cc5	adding redner text function to cartocss_render	2015-09-08 11:58:55 -04:00