Creating a Simple leaflet map

Leaflet is a light weight java script application created some years back. The popularity has grown over time because it gives a lot of room for customization of many features on a web map.

Creating a web map in web pages by using javasript language and object libraries enclosed within web pages designed with HTML/CSS seems novel to many GIS analyst and cartographers in this part of the world. Vector layers can also be added as variables or in the geojson format as well as other more advanced plugins like marker clustering.

Let us start by building the HTML web page.
Open a new file in a Text editor.
Write this in. (You can edit title and text if you want). Save as HTML.

---

We add the link to leaflet.CSS application in the section of the web HTML (red boxed area).

---

---

Add the div container for the map (red boxed area).

---

---

Connect to the leaflet javascript library (red boxed area).

---

---

Next, we add  the set view of the map- Var map- (red boxed area). The map centre is in West Africa at a zoom of 8. The Tile layers – L.tilelayer are added from openstreetmap.org open layers- http:\\www.openstreetmap.org

---

---

Open the html file with a modern browser. Screenshot below displays the leaflet map in the web page.


Viola! we have added a simple leaflet map into the webpage. The leaflet map centre is in West Africa.

Thank you for following the blog.