Labeling and visualizing markers in TileMill

We set out in this post to demonstrate how other ways of labeling can improve the aesthetics and end-user visualization in a map. Using cluster markers is very nice but at times, we can also show a wide variety of data on the map using their numerical values.

Click this link- Grazing Spots to download the sample data.

Add the Sample data to the new project. The sample data consist of Point features representing major grazing spots in the West African sub-region. See the default style in the style.mss window of the screenshot


Click on the Features icon of the sample dataset to open the Attribute table. Our attribute field of interest is the HeadCount. We intend to label the point features by their corresponding numerical value in the HeadCount attribute field.


 Write this CartoCSS style into the style.mss window. The CartoCSS lines of code are allocating different text sizes to ranges of values. The values in the HeadCount attribute field are classified into three categories.
In the screenshot below, an example from each category is encircled in red.


 Edit the polygon-fill of the pseudo-element hashtag countries as on the CartoCSS on the left. Add an extra line of code in each style layer defining the category. See red boxed lines on the style layers.
On the screenshot example below, the different labels now have different colours depending on the category they fall within.


Notice that the numbers tend to cluster at certain zooms and make the map messy. Lets adjust the style layers and add line of extra code to show only certain figures at certain zoom level. The extra code [Zoom>=6] adjust any label above 5001 and less than 10000 to only show after zoom 6.

The screenshot below shows the labels at zoom level 1-5.


In the screenshot example, the labels whose values are in the 5001-10000 category appear at zoom level 6.


Then at zoom 7, the labels with the highest numerical values appear.


This way we have been able to make the map less clustered with labels and easier to read by the end-user.
Thank you for following the blog. Send in your comments and feedback.