Edit tilemill legend to add circle symbol

Question

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).

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

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?

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:

---

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.