An Introduction to Creating Leaflet Maps
Leaflet is an open-source library for interactive maps in web applications. Here's a quick guide on how you can create your own simple Leaflet map:
Prepare your HTML
Create a new HTML document and add the basic elements needed:
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 ...
5 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
6 </head>
7 <body>
8 <div id="map" style="width: 800px; height: 600px;"></div>
9 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
10 </body>
11</html>Add JavaScript:
Right before the closing </body> tag, insert your JavaScript code to create and display the map:
1<script>
2 // Create map
3 const map = L.map('map').setView([51.505, -0.09], 13); // Set coordinates and zoom level
4
5 // Add tile layer (e.g., OpenStreetMap)
6 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
7 attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
8 }).addTo(map);
9
10 // Add an examplary marker
11 L.marker([51.5, -0.09]).addTo(map).bindPopup('A marker here.');
12</script>Adjustments
You can adjust the coordinates, zoom level, map style, and more options as per your requirements. The Leaflet Documentation offers comprehensive information about all available options and features: Leaflet Documentation
Wrap Up
Save your HTML file and open it in a web browser. You should be able to see your interactive Leaflet map now.
Remember that this is only a basic introduction. You can adjust the functionality and the appearance further, depending on your requirements.
