Creating custom legends for TileMill projects using HTML&CSS

In this post, we will demonstrate how to create custom legends for TileMill projects by simply writing HTML and CSS codes. We have been creating legends but this has been only using HTML. For this demonstration, we will write legends which will include both HTML and CSS styles. These types of legends are termed as Advanced Legends in the TileMill and Mapbox documentation.

Download your sample dataset here- Populationdatanigeria.shp

Create a new project in TileMill.

Capture-1

Open the Layer window and Click Add Layer.  Save and style the sample dataset provided through the link above.

Capture-2

Click on the features icon beside the layer you just added. The Attribute table of the layer will open and inspect the RegionID field.  States within the same region have their unique RegionID. First, we create a choropleth map showing these regional divisions clearly and then design a vertical span style legend using HTML and CSS styles.

Capture-3

image Erase the default style that TileMill allocated to the #populationdatanigeri layer. Next write out the lines of code on the image on the far left into the style.mss window. Write out five more of these sections to represent the other five regions. Substitute 2,3,4,5 and 6 in place of 1 in line 1. In line two, change the polygon-fill to #ae8, #594, #b85c16, #4d4d4d and #954 for subsequent regions as in the order presented.

See our example on the screenshot below.

Capture-5

Now click on the Templates icon (green boxed) and Select the Legend tab (red boxed).

Capture-6

Write out our example HTML/CSS code below into the main window.

(Do Not Include the text in red when copying)


 

 

Geopolitical Zones in Nigeria

>>>You can add a title of yours

 

 

 

  • Northwest

 

 

 

  • Northeast

 

 

  • Northcentral

 

 

 

  • Southwest

 

 

 

  • Southeast

 

 

 

  • Southsouth

 

 

 

 

 

</div>

<style type=’text/css’>

.my-legend .legend-title {

text-align: left;

margin-bottom: 5px;

font-weight: bold;

font-size: 90%;

}

.my-legend .legend-scale ul {

margin: 0;

margin-bottom: 5px;

padding: 0;

float: left;

list-style: none;

}

.my-legend .legend-scale ul li {

font-size: 80%;

list-style: none;

margin-left: 0;

line-height: 18px;

margin-bottom: 2px;

}

.my-legend ul.legend-labels li span {

display: block;

float: left;

height: 16px;

width: 30px;

margin-right: 5px;

margin-left: 0;

border: 1px solid #999;

}

.my-legend .legend-source {

font-size: 70%;

color: #999;

clear: both;

}

.my-legend a {

color: #777;

}

</style>


imageSee the results on the bottom right corner of the screenshot.

Capture-7

This legend style is in vertical bar form.

Custom HTML/CSS legend with a horizontal bar

Click on the features icon beside the polygon layer. We would use the attribute field-census_Tot to classify the States by their population size.

Capture-8

At this juncture, you can save the previous map and open a new project. Add the sample dataset again.

image Erase the default layer in style.mss and write out the lines of code on the left. This will classify the States into three groups based on the size of their population. See the screenshot example below.

Capture-9

Click on the Templates icon and Select the Legend tab. Copy out our example HTML/CSS into the main window.


 

 

Add a Legend Title of your own

 

 

 

  • 1.4m-3m

 

 

 

  • >3m-5m

 

 

 

  • >5m

 

 

 

 

 

*m behind the figure stands for million

 

 

</div>

<style type=’text/css’>

.my-legend .legend-title {

text-align: left;

margin-bottom: 8px;

font-weight: bold;

font-size: 90%;

}

.my-legend .legend-scale ul {

margin: 0;

padding: 0;

float: left;

list-style: none;

}

.my-legend .legend-scale ul li {

display: block;

float: left;

width: 50px;

margin-bottom: 6px;

text-align: center;

font-size: 80%;

list-style: none;

}

.my-legend ul.legend-labels li span {

display: block;

float: left;

height: 15px;

width: 50px;

}

.my-legend .legend-source {

font-size: 70%;

color: #999;

clear: both;

}

.my-legend a {

color: #777;

}

</style>


See the screenshot example below.

Capture-10

image This legend style is in horizontal bar form.

Thank you for following the demonstration and the blog.

Advertisements

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