How to add a Leaflet.js Map ( Vanilla JS )
Step 1 - Create an index.html file and a main.js file
Make a directory and create both index.html file and main.js file.
Step 2 - Add Basic HTML Structure and load js file.
Add the following code to the index.html file
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.js Map Example</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<style>
#map {
height: 500px;
width: 500px;
}
</style>
</head>
<body>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="main.js"></script>
</body>
</html>Step 3 - Modify HTML file to add the contianer for Leaflet map.
index.html
<body>
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="main.js"></script>
</body>the <div id="map"></div> element will contain your map.
Step 5 - Display the map using the main.js file.
main.js
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.505, -0.09]).addTo(map)
.bindPopup('A simple marker example.')
.openPopup();L.map() takes in the map element id.
The setView() function accepts the initial latitude and longitude and inital zoom level for the map.
tileLayer() loads in openstreetmap map tiles. addTo() adds the map tiles to the map
L.marker() sets a Marker ( a simple location pin ) on the map at the given coordinates with a popup that says A simple marker example. on hover.
Step 6 - Open the HTML file in the browser to veriy.
You should See the following small interactive map.
Full Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet.js Map Example</title>
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<style>
/* Style for the map container */
#map {
height: 500px;
width: 500px;
}
</style>
</head>
<body>
<!-- Map Container -->
<div id="map"></div>
<!-- Leaflet JS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
// Initialize the map and set its view to your chosen geographical coordinates and zoom level
var map = L.map('map').setView([51.505, -0.09], 13);
// Add a tile layer to the map (you can use different tile providers)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Add a marker to the map at the same coordinates
L.marker([51.505, -0.09]).addTo(map)
.bindPopup('A simple marker example.')
.openPopup();
</script>
</body>
</html>Last updated on