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.
Add the Sample dataset as a Layer in the Layers window.
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.
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>
The result is seen on the legend on the screenshot below. The images represent the polygon shapes of local government districts.
Thank you for following the demonstration. Send us your comments and feedback.