I am trying to edit my tilemill legend so that instead of displaying a red rectangle as below, it displays a red circle (I'm making a proportional symbol map).

enter image description here

What line would I need to add in my legend code (see below) to make this happen?

enter image description here enter image description here

On the mapbox website it says : "The advantage with html/css is that you can quickly make edits to the legend directly in TileMill, and maintain the ability to manipulate the legend styling with css even after the map has been exported to MBTile format. However, you are limited to right angles and solid colors, and may have to write many lines of code to create a relatively simple design." https://www.mapbox.com/tilemill/docs/guides/advanced-legends/

Hopefully "limited to right angles" does not mean that I cannot create a circle?


1 Answer 1


This is what you need to modify in your code:

.my-legend ul.legend-labels li span {
    border-radius: 50%/50%; 
    float: left;
    height: 16px;
    width: 16px;
    margin-right : 5px;
    margin-left: 0;
    border: 1px solid #999;

to obtain this:

enter image description here

Notice: in your code there is an unnecessary closing tag </a> for this line:

<div class = 'legend-source'>Source:<a href=http://frac.org>Food and Research Action Center</a></div>

So, I think you don't have a working link. But if you intend to go to the Food and Research Action Center, when you press the link, you may replace your line with that specified by me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.