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.

 

hgy-001

Capture-4

See live map at github pages:

http://htmlpreview.github.io/?https://github.com/mayotunde/legendV/blob/gh-pages/index.html

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

https://www.dropbox.com/s/mvwdli43cx6lnnj/vertical%20box%20style%20legends%20for%20leaflet%20maps.txt?dl=0

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.

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