Marker icons overlapping street names in Tilemill?

Question

I'm new to CartoCSS and I'm trying to properly add subway markers on a map using Tilemill and OSM data. My problem is that some street names stay behind my marker icons :

I have add "text-allow-overlap: false", "text-placement-type: simple" and "text-label-position-tolerance: 10" on my road labels in order to make them avoid my markers but I still get these superimpositions.

This is my road labels code:

#mainroad_label[type='primary'][zoom>12],
#mainroad_label[type='secondary'][zoom>13],
#mainroad_label[type='tertiary'][zoom>13] {
    text-name:'[name]';
    text-face-name:@sans;
    text-placement:line;
    text-fill:@road_text;
    text-halo-fill:@road_halo;
    text-halo-radius:1;
    text-min-distance:60;
    text-size:11;
    text-allow-overlap: false;
    text-placement-type: simple;
    text-label-position-tolerance: 10;
    [zoom>=19] { text-size:12; }
    [zoom>=20] { text-size:14; }
}

When I set "marker-allow-overlap" to "false" it hides the markers located on text (street or place names). However, I'm wondering why it is not working in the other way ?

Here is my markers code:

#stations[Description='m'][zoom>=14] {
    marker-file: url(/Users/alexis/Documents/MapBox/Project/OSMBright/Metro-M.svg);
    marker-height: 11;
    marker-allow-overlap: true;
    marker-ignore-placement:false; }

Is it possible to make text disappear when located on a marker ?

Answer 1

Check out TileMill's documentation on Symbol Drawing Ordering. In short, preference is given to lower labels, so in your case #mainroad_label has a higher priority than #stations, which is why you need to add marker-allow-overlap: true; to #stations in order to get it to display.

Try moving #stations below #mainroad_label, and as long as you don't add marker-allow-overlap: true; to #mainroad_label, the road labels shouldn't display under station markers.