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 javascript 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.

Capture-1a

 


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


Capture-2

 


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


Capture-3

 


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


Capture-4


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


Capture-5

 

 


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

Capture-1

 

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

You can use newer updated libraries of leaflet stable version 0.7.7 below:

https://npmcdn.com/leaflet@0.7.7/dist/leaflet.js

https://npmcdn.com/leaflet@0.7.7/dist/leaflet.css

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