Bring marker on same layer to front in CartoDB

Question

I'm using a category map showing markers based on the value of one column. They can be one of two values. One is for customer location and the other for store location.

I'd like to have it so that the store locations are ALWAYS shown on top of the customer locations. Is there a way to force this with CartoCSS. Looking for something like z-index but this doesn't seem to work.

Answer 1

you can use the ORDER BY column DESC or ASC to make the results come back in a different order. Points are returned first being put to the back of the map.

This is good for dates when you want the most current ones on top. You can also use CASE statements to do more advanced conditions to then order by those results.

Answer 2

you can use, for example, the approach that was explained here: How to chose which line goes on top of the other line

Basically, in your CartoCSS code you can create some layers with different z indexes. For example:

/** simple visualization */

#untitled_table_17{
  marker-fill-opacity: 0.9;
  marker-line-color: #FFF;
  marker-line-width: 1.5;
  marker-line-opacity: 1;
  marker-placement: point;
  marker-type: ellipse;
  marker-width: 10;
  marker-fill: #FF6600;
  marker-allow-overlap: true;
}

#untitled_table_17[name = 'type1']::z1{
 marker-fill-opacity: 0.9;
  marker-line-color: #FFF;
  marker-line-width: 1.5;
  marker-line-opacity: 1;
  marker-placement: point;
  marker-type: ellipse;
  marker-width: 10;
  marker-fill: #5CA2D1;
  marker-allow-overlap: true;

}

#untitled_table_17[name = 'type2']::z2{
marker-fill-opacity: 0.9;
  marker-line-color: #FFF;
  marker-line-width: 1.5;
  marker-line-opacity: 1;
  marker-placement: point;
  marker-type: ellipse;
  marker-width: 10;
  marker-fill: #229A00;
  marker-allow-overlap: true;

}