Drawing WMS layers onto a leaflet powered map

WMS is a popular format for publishing maps over the web. This post will demonstrate writing source code to draw WMS layers onto leaflet powered maps.

We use the L.tileLayer.wms function to load WMS from the server where it is stored.

For this demo, we will load two WMS layers – multipolygon layer comprising the administrative boundaries of countries in the West Africa and a point map of major grazing spots in West Africa.

In the script section we add the two WMS to the leaflet map using the L.tileLayer.wms :

L.tileLayer.wms(“URL of WMS server”, {Layers:”WMS layer”, otherOptions}).addTo(maps);




See live map by clicking this link:http://preview.github.io/?https://github.com/mayotunde/demonstration/blob/master/wmslayers

The source code for the leaflet map in the screenshot above is:

loading wms layers onto leaflet powered maps - Notepad

Note that the second wmslayer2 was given the option-transparent so it can be seen above the first WMS layer.

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




Thank you for following the blog.


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