1

I’m doing a bubble/choropleth combo map with point data (cities) using CSS in CartoDB, and I want my biggest bubbles (that correspond with population size) to draw on the map first so that the map is easier to read and the infowindow feature is easier to use. I’ve assigned IDs to my data according the population size so that the city with the largest population has carto_id 1 and so forth (that’s how I would do it with ArcMap, because it draws ID 1 first). I’ve also tried to write my CSS so that the largest bubbles would be drawn first (I have little CSS experience). The CSS is below. I can’t figure out what order it’s drawing the bubbles in. How can I fix this?

#tm_db001_merge2{
  marker-fill: #F11810;
  marker-line-color: #FFF;
  marker-line-width: 0.5;
  marker-line-opacity: 0.6;
  marker-opacity: 0.6;
  marker-comp-op: screen;
  marker-placement: point;
  marker-type: ellipse;
  marker-allow-overlap: true;
  marker-clip: false;
  marker-multi-policy: largest;
}
#tm_db001_merge2 [ population <= 2880546] {
   marker-width: 62.0;  
}
#tm_db001_merge2 [ population <= 2000000] {
   marker-width: 52.0;
}
#tm_db001_merge2 [ population <= 1000000] {
   marker-width: 43.0;
}
#tm_db001_merge2 [ population <= 750000] {
   marker-width: 35.0;
}
#tm_db001_merge2 [ population <= 500000] {
   marker-width: 28.0;
}
#tm_db001_merge2 [ population <= 250000] {
   marker-width: 22.0;
}
#tm_db001_merge2 [ population <= 100000] {
   marker-width: 17.0;
}
#tm_db001_merge2 [ population <= 75000] {
   marker-width: 13.0;
}
#tm_db001_merge2 [ population <= 50000] {
   marker-width: 10.0;
}
#tm_db001_merge2 [ population <= 25000] {
   marker-width: 8.0;
}


#tm_db001_merge2 [ percent_inner_city <= 100] {
   marker-fill: #e31a1c;
}
#tm_db001_merge2 [ percent_inner_city < 75] {
   marker-fill: #fd8d3c;
}
#tm_db001_merge2 [ percent_inner_city < 50] {
   marker-fill: #fecc5c;
}
#tm_db001_merge2 [ percent_inner_city < 25] {
   marker-fill: #ffffb2;
}
2

There are a few ways to modify drawing order in CartoDB. The first is to do an ORDER BY in your SQL statement. In your case, you can either use the ID you created or the column containing population size directly.

SELECT * FROM table_name ORDER BY population

or

SELECT * FROM table_name ORDER BY order_id

Of course you can flip those with DESC if you need,

SELECT * FROM table_name ORDER BY order_id DESC

You want this last one, because you want the renderer to get the biggest bubbles first, so that they draw first and smaller ones end up on top of them.

There is a second way to do it is multi-part. You could apply the SQL,

SELECT * FROM table_name ORDER BY population

This would make the big bubbles end up drawn on top. But, you can change you CartoCSS drawing behavior to flip them by adding this line,

marker-comp-op: dst-over;

But there might only be edge cases where this second option is needed.

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.