I'm hoping someone can help me with html to create a legend that maps to a custom heatmap I made using the style CSS. When I try using the default legend, it neither maps to the right custom colors, nor does it have values from my torque-aggregate-function.

Picture of map + legend here: https://cl.ly/1l1v062Q3K11

Custom CSS here:

Map {
  -torque-frame-count: 1;
  -torque-animation-duration: 30;
  -torque-time-attribute: "cartodb_id";
  -torque-aggregation-function: "sum(total_visits)";
  -torque-resolution: 3;
  -torque-data-aggregation: linear;
#layer {
  marker-width: 12;
  marker-fill: white;
  marker-fill-opacity: 1;
  marker-file: url(https://cartodb-libs.global.ssl.fastly.net/cartodbui/assets/unversioned/images/alphamarker.png);
  marker-allow-overlap: true;
  marker-line-width: 1;
  marker-line-color: #FFFFFF;
  marker-line-opacity: 1;
  image-filters: colorize-alpha(blue, cyan, lightgreen, yellow , orange, red);
  • 1
    Could you embed the picture in the post itself, instead of posting a (shortened) url to it?
    – JAD
    Nov 30, 2017 at 20:34

1 Answer 1


Replacing count(1) with another Torque aggregation function is a hack. Because what aggregation by pixel is doing is just that aggregating dots within pixels. But if you want to make the operation "works", you need to normalize your total_visits field because Torque only accepts a range of values between 0 and 255.

Regarding the legend issue, you can pass the hexcolor codes instead of the color names:

image-filters: colorize-alpha(#4b2991,#872ca2,#c0369d,#ea4f88,#fa7876,#f6a97a,#edd9a3);


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.