I am trying to build a map using Carto Builder that compares the average price of single family housing and multi-family housing by neighborhood. The data are offset centroids for each neighborhood, sized by the average cost of each type of housing. It is important that each data set use the same class breaks so that a visual comparison is possible. The data sets have different min/max values, so I manually set the class breaks for each using CartoCSS. However, the legend does not reflect the class breaks I set, and returns 'No data available' in the legend box. How do I fix this?

Here is the CartoCSS I am using:

#layer {
  marker-width: ramp([avg_sf], (6,12,18,24,30), 
  marker-fill: #e19c0c;
  marker-fill-opacity: 0.79;
  marker-allow-overlap: true;
  marker-line-width: 1;
  marker-line-color: #FFF;
  marker-line-opacity: 1;

And a screenshot showing the empty legend.

enter image description here

1 Answer 1


As explained in a previous related question, TurboCARTO was created to style layers to adapt to dynamic queries. As soon as you set the breaks values to static ones, the legend will not be generated. So if you know the structure of your layer dataset, we recommend using traditional CartoCSS conditionals as the following screenshot:


Then copy those breaks values in order to create a custom legend:


As you can see, my workaround is making a legend with colors instead of sizes. But because the color palette matches the size gradient, it can make the trick. Here is the resulting BUILDER public map.

  • Thank you for this response. However, it does not solve my problem, because I am comparing single family sales prices (all points in orange) to multi-family sales prices (all points in blue). The two colors indicate type of sale, and the size represents sales price. Therefore the legend must differentiate by size. This seems like key functionality and I'm surprised that it does not seem to be possible in Carto Builder. Aug 7, 2017 at 23:03
  • I can give you another workaround: style those two categories using different img markers. For instance, one as squares and the other as circles. :-) Aug 8, 2017 at 8:28

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.