what is Leaflet Leaflet is a lightweight, open source web mapping library created on the javascript platform. It is a software that works on web pages and is used to create interactive maps on pc and online.
-Create simple web maps within web pages without resort to any proprietary software;
- Leaflet scripts are small in size and can be downloaded and launched within the local directory;
- Easily add customized features to the web map;
-Leaflet is compatible with pc and mobile devices as well as other platforms;
Note that leaflet does not serve as a GIS software but a visualization tool used to create and publish web maps.
Creating a leaflet map in a web page requires a minimal knowledge of using HTML tags, CSS styles and javascript codes. This tutorial will quickly describe some of the common tags used in HTML that is relevant to this work.
<html></html> These tags opens and closes the web page
<head></head> defines the Head section of the web page
<body></body> These tags open and close the main body of the web page
<div></div> These are known as div containers and divide the page into smaller sections.
Content of a HTML file is rendered by a web browser.
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. External stylesheets are stored in CSS files Leaflet package comes with its own CSS style file- leaflet.css
JavaScript is the programming language of HTML and the Web. <script></script> these tags open and close snippets of javascript code on a HTML page. Leaflet package comes with a javascript file- leaflet.js
For further study on the basics of HTML, CSS and Javascript , you can go to this site- W3schools
Downloading the Leaflet Package Click on this link-Folder to download the leaflet 1.0.2 Stable version, released on November 21, 2016. Unzip the folder and save the folder on your desktop or local directory. Inside the archives downloaded from the above link, you will see five things:
-leaflet.js - This is the minified Leaflet JavaScript code. -leaflet-src.js - This is the readable, unminified Leaflet JavaScript, which is sometimes helpful for debugging.
-leaflet.css - This is the stylesheet for Leaflet.
-images - This is a folder that contains images.
-leaflet.css. It must be in the same directory as leaflet.css.
A simple leaflet map contains three main segments -
- A HTML page
- CSS styles
- Javascript codes
We start by writing the source code to create the web page that would house the leaflet map.Open your text editor (notepad, wordpad, sublime text etc) and fill this in a blank page.
<html>
<head>
<meta charset='utf-8' />
<title>introduction to leaflet</title>
</head>
<body>
<div id='map' style='width:600px;height:400px'></div>
</body>
</html>Then we add inside the <head></head> section the page header link to the CSS style provided in the leaflet.css file in the leaflet package. <link rel='stylesheet' href='leaflet.css'/>
Thirdly, we start adding the javascript codes just after the <div></div> section. Add The link below to the leaflet javascript file
<script src='leaflet.js'></script>
Load map object into the script, using setView to set the geographical extent of the map while minzoom is a figure that signifies the lowest zoom of the map. var map = L.map('map').setView([9.00, 7.30], 6);
L.tileLayer is a leaflet function used to add tile layers from base map providers like openstreetmap, google and mapbox etc. {z}/{x}/{y} is a XML format used to position map tiles in Leaflet. For this demo, we use tile layers from openstreetmap. The ‘addto(map);’ function adds the contents of the function to the map object. L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png') .addTo(map);
Below is the full source code:
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>leaflet map</title>
<link rel='stylesheet' href='leaflet.css'/>
</head>
<body>
<div id='map' style='width:600px;height:400px'>
<script src='leaflet.js'></script>
<script>
var map = L.map('map').setView([9.00, 7.30], 6);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
.addTo(map);
</script>
</body>
</html>Save your file as a HTML file and make sure to save it in your leaflet package folder. Open with a modern browser. Openstreetmap tile layers are rendered over the web so make sure you can connected to the internet if you want to see the base map.
This simply means connecting to leaflet javascript and CSS libraries that are stored online. Common hosted CDN is
<link rel='stylesheet' href='https://unpkg.com/leaflet@1.0.2/dist/leaflet.css' />
<script src=https://unpkg.com/leaflet@1.0.2/dist/leaflet.js'></script>
Simply remove the previous links and add the two urls into the script as shown in the source code below.
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>leaflet map</title>
<link rel='stylesheet href= 'https://unpkg.com/leaflet@1.0.2/dist/leaflet.css'/>
</head>
<body>
<div id='map' style='width:600px;height:400px'>
<script src='https://unpkg.com/leaflet@1.0.2/dist/leaflet.js'></script>
<script>
var map = L.map('map').setView([9.00, 7.30], 6);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
.addTo(map);
</script>
</body>
</html>
See Live example illustrated below:
Click this link to download video version of this tutorial.
Send your questions to admin@mapsnigeriainitiative.com
Part two will see us demonstrating how to draw point, polyline and polygon features to leaflet maps.
©mapsnigeriainitiative.com