???? Apa itu Leaflet.js?

Leaflet adalah pustaka ringan untuk membuat peta interaktif berbasis web. Leaflet sangat populer karena mudah digunakan dan bisa digabungkan dengan data dari berbagai sumber seperti OpenStreetMap, Google Maps, atau GeoJSON.

---

???? Materi yang Dipelajari:

1. Instalasi Leaflet.js

• Cara termudah: gunakan CDN link di HTML

html
CopyEdit
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

2. Menampilkan Peta Dasar

• Buat div dengan id map

• Inisialisasi peta dengan koordinat (latitude, longitude)

js
CopyEdit
var map = L.map('map').setView([-6.200000, 106.816666], 13);

3. Menambahkan Tile Layer

• Tile layer menampilkan gambar peta dari provider

js
CopyEdit
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

4. Menambahkan Marker

• Untuk menunjukkan titik lokasi

js
CopyEdit
L.marker([-6.2, 106.8]).addTo(map)
  .bindPopup('Ini Jakarta!')
  .openPopup();

5. Menambahkan Circle, Polygon dan Pop-up

• Untuk memberi penanda area/zonasi

js
CopyEdit
L.circle([-6.21, 106.82], { radius: 500 }).addTo(map);

6. Interaksi Pengguna

• Tangkap klik dan tampilkan koordinat

js
CopyEdit
map.on('click', function(e) {
  alert("Koordinat: " + e.latlng);
});