How do I show database info in a map pin? - css

Question

I created a map using mapbox of team member locations per state for my company. The number of team members by state ranges from 1 - 10. The map pin (marker) symbols only go to nine.
I started to mess with Tilemill and saw a post saying it is possible to put the numbers inside of the markers, https://www.mapbox.com/tilemill/docs/guides/advanced-map-design/ (scroll to 'Text Labels' section, it is exactly what I am trying to do).
The database column with the numbers I want is called 'marker-symbol'. Here is the code so far in the default styles.mss:
Map {
background-color: #b8dee6;
}
#countries {
::outline {
line-color: #85c5d3;
line-width: 2;
line-join: round;
}
polygon-fill: #fff;
}
#features {
marker-width:20;
marker-fill:#f45;
marker-line-color:#813;
marker-allow-overlap:true;
}
Any help is greatly appreciated!
Thank you.

Answer 1

I actually had it right in some of the code I was testing. I just put the code in the wrong spot so it was behind the marker instead of in front of it. Here is the fix:
Map {
background-color: #b8dee6;
}
#countries {
::outline {
line-color: #85c5d3;
line-width: 2;
line-join: round;
}
polygon-fill: #fff;
}
#features {
marker-width:20;
marker-fill:#f45;
marker-line-color:#813;
marker-line-opacity:2;
marker-allow-overlap:true;
::labels {
text-name:"[marker-symbol]";
text-face-name:"Arial Bold";
text-allow-overlap:true;
}
}