Superimposition of label in CartoDB

Question

I'm currently doing a carte with CartoDB where I use CSS in order to show label but my issue is that I have entities which are very close and their label are difficult to read because of their superimposition.

I try some of the CSS properties' of CartoCSS (like text-min-padding or text-placement) but I failed.

Here is my CSS code

/** category visualization */

#doc {
   marker-opacity: 0.9;
   marker-line-color: #FFF;
   marker-line-width: 1;
   marker-line-opacity: 1;
   marker-placement: point;
   marker-type: ellipse;
   marker-width: 40;
   marker-allow-overlap: true;
}

#doc[type="ONG"] {
   marker-fill: #A6CEE3;
}
#doc[type="Think Tanks"] {
   marker-fill: #1F78B4;
}
#doc[type="Politique"] {
   marker-fill: #B2DF8A;
}

#doc::labels {
  text-name: [name];
  text-placement: point;
  text-face-name: 'DejaVu Sans Book';
  text-size: 20;
  text-fill: #000;
  text-halo-fill: #FFF;
  text-halo-radius: 1;
  text-dy: 0;
  text-allow-overlap: true;
  text-placement-type: simple;
  text-label-position-tolerance: 0;
}

Thanks a lot. Have a nice day

A.H

Answer 1

I always find text placement needs a bit of trial and error. I've gotten the following, which I think fits your question,

Here is the CSS I used,

#populated_places{
  marker-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;
  marker-comp-op: dst-over;
}

#populated_places {
  text-name: [name];
  text-face-name: 'DejaVu Sans Book';
  text-size: 14;
  text-fill: #000;
  text-halo-fill: #FFF;
  text-halo-radius: 1;
  text-dy: -10;
  text-allow-overlap: false;
  text-min-padding: 10;
  text-placement-type: simple;
  text-label-position-tolerance: 10;
}

The key things I did,

1. got rid of the ::labels namespacing
2. added text-allow-overlap: false;. This means that you don't want one label to write over another
3. added text-min-padding: 10;. This adds a buffer around each label that is considered in that overlap calculation
4. added text-placement-type: simple; and text-label-position-tolerance: 10;, which just let the tiles shift around a bit to avoid overlap before omitting if possible

hope that helps