Adding Images in Map legends in TileMill

A legend serves as a key to the different elements of map itself. It communicates information about the elements that make up the map.

In previous posts, we have demonstrated how to create beautiful legends using HTML and CSS. Now, we would add images to the legend and label them.

Click on the link and download Sample dataset- Data

Launch TileMill. Create a new Add the sample dataset.

Capture-2

Add the Sample dataset as a Layer in the Layers window.

Capture-5

image Edit the default lines of code and then add the extra lines (from line 7) of CartoCSS code on the image to the left to label the polygon features. Click Save. See the final result on our demo example on the screenshot below.

Capture-6

Click on the Templates icon and then select Legend.

Write out our example HTML code below into the legend window:


<strong><em style=’color:red;background:yellow;’>Ondo State Local Districts Admin Map</em></strong><br>
<img src=’https://lh3.googleusercontent.com/OR1Tu_YmvdUMY2n7-Pvr-1RxqRrhTKhR18zo4RP6IFw=w30-h50-no’> Ese-Odo LG<br>
<img src=”https://lh3.googleusercontent.com/grAsgBc_j48Zi4HEi7PTqHtdjZXWEZkpRYJRLYzyLkg=w30-h50-no”> Idanre LG<br>
<img src=”https://lh3.googleusercontent.com/Uz5m5CMeVKRAlS2AOs17zQS9ejo-5KYMfiRwWy8eJ1U=w30-h50-no”> Akure South LG<br>


Capture-7

The result is seen on the legend on the screenshot below. The images represent the polygon shapes of local government districts.

Capture-10

Thank you for following the demonstration. Send us your comments and feedback.

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