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 '17 at 20:34

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, privacy policy and cookie policy

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