???? 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
<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
var map = L.map('map').setView([-6.200000, 106.816666], 13);

3. Menambahkan Tile Layer

  • Tile layer menampilkan gambar peta dari provider

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

4. Menambahkan Marker

  • Untuk menunjukkan titik lokasi

js
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
L.circle([-6.21, 106.82], { radius: 500 }).addTo(map);

6. Interaksi Pengguna

  • Tangkap klik dan tampilkan koordinat

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