How to Use Leaflet.js: A Step-by-Step Guide

Spread the love

Leaflet.js is a powerful open-source JavaScript library for creating interactive maps. It’s lightweight, simple to use, and perfect for creating beautiful web maps. In this tutorial, we’ll walk you through the steps to set up and use Leaflet in an HTML file.

Step 1: Create a Basic HTML File

First, create a basic HTML file. You can name it index.html.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet Map</title>
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<style>
#map {
height: 600px; /* Set the height of the map */
}
</style>
</head>
<body>
<h1>My Leaflet Map</h1>
<div id="map"></div>

<!-- Leaflet JavaScript -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
// Your JavaScript code will go here
</script>
</body>
</html>

Step 2: Initialize the Map

Next, we need to initialize the map. Add the following code inside the <script> tag to set up the map view.

<script>
// Initialize the map and set its view to the chosen geographical coordinates and zoom level
var map = L.map('map').setView([51.505, -0.09], 13);

// Add a tile layer to our map using OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
</script>

Step 3: Add a Marker

To add a marker to the map, include the following lines inside the <script> tag:

<script>
// Initialize the map and set its view to the chosen geographical coordinates and zoom level
var map = L.map('map').setView([51.505, -0.09], 13);

// Add a tile layer to our map using OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Add a marker at the specified coordinates
var marker = L.marker([51.5, -0.09]).addTo(map);

// Add a popup to the marker
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
</script>

Step 4: Add a Circle and a Polygon

You can also add other shapes like circles and polygons to your map. Here’s how:

<script>
// Initialize the map and set its view to the chosen geographical coordinates and zoom level
var map = L.map('map').setView([51.505, -0.09], 13);

// Add a tile layer to our map using OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Add a marker at the specified coordinates
var marker = L.marker([51.5, -0.09]).addTo(map);

// Add a popup to the marker
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

// Add a circle
var circle = L.circle([51.508, -0.11], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(map);

// Add a popup to the circle
circle.bindPopup("I am a circle.");

// Add a polygon
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(map);

// Add a popup to the polygon
polygon.bindPopup("I am a polygon.");
</script>

Step 5: Customize Your Map

You can further customize your map by adding different types of layers, controls, and more. Leaflet’s official documentation provides extensive information on various features and options available.

Scroll to Top