Adding map legend with multi-feature types using HTML and CSS

For this post, we will be creating a legend that will describe different types of features from the map. The legend will show point, line and polygon features on a map unlike our previous examples where only one type of feature is displayed.

 

First, we create the web map with the point, line and polygon features added on.

bdt-001

 

Capture-22

 

First we create the div container and a style that will form the legend for the points.

We write this code immediately after the body opening tag

3-001

 

Capture-23

 

Next, we just write a div and style for the legend for the line features.

2-001

 

Capture-25

 

We write the code for the polygon legend and style the div.

1-001

 

Capture-24

 

The final web page contains a map with all the features represented on the legend

 

See live map by clicking:

http://mayotunde.github.io/multilegend

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

https://www.dropbox.com/s/423ya5w8po1hdf6/HTML%20legend%20with%20multifeatures%20in%20leaflet.txt?dl=0

 

See source code below:

gee-001

gee-002

gee-003

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