Adding vertical style legend to a leaflet map using HTML & CSS

Legends are important to the end user of a web map. It serves as a key to describing the various features on a web map or maps in general. In leaflet powered maps, different styles of legends can be added to the web map using HTML and CSS. There is also the legend control feature that comes with leaflet but in this demonstration, we will not be using that feature.

This example is styled as a vertical box style legend.


Immediately after the opening body tag, we create a div container for the legend and put

the legend contents in it. In this example, we will position the legend at the bottom right side of the map.




See live map at github pages:

Download the plain text version of the source code by clicking:

Save file as HTML and open with a modern browser

See full source code below:

vertical.html - Notepad-001

vertical.html - Notepad-002

Thank you for following the blog.


Leave a Reply

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

You are commenting using your 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