Two Column TileMill Legends

I am working on a map that contains a lot of sequential data as well as transportation lines and political boundaries.  Having had very limited experience with html (used to style legends in TillMill) I wanted to find a quick solution to get my data in two columns, one for the sequential data and one for the rest.

I stumbled across Matt Danner’s blog piece which is a very elegant solution:

<div style="float: left; width: 50%;">
<ul>
<li>Left Item 1</li>
<li>Left Item 2</li>
<li>Left Item 3</li>
<li>Left Item 4</li>
<li>Left Item 5</li>
</ul>
</div>
<div style="float: right; width: 50%;">
<ul>
<li>Right Item 1</li>
<li>Right Item 2</li>
<li>Right Item 3</li>
<li>Right Item 4</li>
<li>Right Item 5</li>
</ul>
</div>

As seen below it worked perfectly.

Denver Legend

And here is how the html was implemented to get the above result:

<div style="float: left; width: 50%;">
 <ul class='legend-labels'>
 <span style='color:#eee'>▉</span> 5% < </li> <br>
 <span style='color:#bbb'>▉</span> 5% - 10%</li> <br>
 <span style='color:#aaa'>▉</span> 10% - 15%</li> <br>
 <span style='color:#999'>▉</span> 15% - 20%</li> <br>
 <span style='color:#888'>▉</span> 20% - 25%</li> <br>
 <span style='color:#666'>▉</span> 25% - 30%</li> <br>
 <span style='color:#555'>▉</span> 30% - 35%</li> <br>
 <span style='color:#444'>▉</span> 35% - 40%</li> <br>
 <span style='color:#333'>▉</span> 40% - 45%</li> <br>
 </ul>
 </div>
<div style="float: right; width: 50%;">
 <ul>
 <span style='color:#000'><img src="https://db.tt/rjPrfl5B" height="30" width="20"></span> Amtrak Station <br>
 <span style='color:#000'><img src="https://db.tt/1EttCeFm" height="30" width="20"> </span> Major Roads <br>
 <span style='color:#000'><img src="https://db.tt/ME3dpnuw" height="30" width="20"> </span> Roads <br>
 <span style='color:#000'><img src="https://db.tt/s6Xtf3Vn" height="30" width="20"> </span> RTD<br>
 <span style='color:#000'><img src="https://db.tt/lT2BgHni" height="20" width="20"> </span> 1/2 Mile Buffer<br>
 </ul>
 </div>
About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s