LeafletJS is a lightweight JavaScript framework which is used to embed interactive and customized maps in websites and applications. Let's start with creating a simple map with the help of Leaflet JS with just few lines of code. As it is a web map, it is mandatory that will be hosted with the help of web page. Hence, pre-requisite for a leaflet map is HTML file.
Create a file named map.html
<!DOCTYPE html>
<head>
<title>Leaflet.js Map</</title
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- nothing in body -->
</body>
</html>
Once we have an HTML file, follow the following steps to create a map.
Step 1: Reference the Leaflet.js library and the CSS file
Referencing the Leaflet library can be done in two ways.
First, by using the hosted version or CDN (Content Delivery Network) and second one is to download leaflet.js library and host it in your own web server.
Accessing Leaflet.js via CDN:
<!-- CSS file -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
<!-- JavaScript file -->
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js">
Second, by downloading these files, keeping one copy locally and using that.
Step 2: Creating a div element for the map
Create a <div> element of map with id attribute set as mapid, which we will use to provide styling features like appropriate height and width.
<!DOCTYPE html>
<head>
<title>Leaflet.js Map</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#mapid {
width: 600px;
height: 400px
}
</style>
</head>
<body>
<div id="mapid"></div>
</body>
</html>
Step 3: Creating a map object
It is important to create a map object with the help of which it will be easier to display the view of map or add overlays to the same.
The below script will create a map object using the LeafletJS and will attach it to the <div> tag with id as mapid.
<script type="text/javascript">
var mymap = L.map('mapid').setView([28.612, 77.229], 4);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
</script>
The variable mymap is the map object created by using setView function which accepts 3 parameters latitude, longitude and zoom level.
Later, we have added a new layer to the map named tileLayer.
The TileLayer object's constructor takes URL which specifies the application where to get data from as its first parameter.
-
{s} allows one of the subdomains of the primary domain to serve tile requests, enabling our application to make multiple requests simultaneously, and thereby download tiles much faster.
-
{x} and {y} define the tile coordinates.
-
{z} represents the zoom level.
Finally, Tilelayer.addTo() method is called which includes map objects to which we want to add the layer.
In the terminal below, we have the complete code, which you can run and see the output.
You can play around with the zoom level to zoom in and see the streets of the area on the map. You can add a marker on the map using the below code, by specifying latitude and longitude of the location where you want the marker to appear.
var marker = L.marker([28.614, 77.199]).addTo(mymap);
To add a popup with some text on this marker, add the below code,
marker.bindPopup("<b>Welcome to Rashtrapati Bhawan</b>.").openPopup();
Try, varying latitude, longitude and zoom level to see how the map changes in the above live terminal.
Conclusion:
LeafletJS provides a simple and easy way or integrating interactive maps on your website or application using minimum JavaScript code and the maps are fully customizable.
You may also like:
