Apa itu Leaflet.js?

Leaflet.js adalah library JavaScript open source untuk membuat peta interaktif di web. Library ini ringan (hanya ~42KB), mudah digunakan, dan memiliki banyak plugin.

Setup Dasar Leaflet

<!DOCTYPE html>
<html>
<head>
    <title>Web GIS dengan Leaflet</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <style>
        #map { height: 500px; width: 100%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        // Inisialisasi peta di Kota Mataram
        var map = L.map('map').setView([-8.5833, 116.1167], 13);
        
        // Tambahkan layer OpenStreetMap
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap'
        }).addTo(map);
    </script>
</body>
</html>

Menambahkan Marker

// Marker sederhana
var marker = L.marker([-8.5833, 116.1167]).addTo(map);
marker.bindPopup("Ini adalah Kota Mataram").openPopup();

// Marker dengan icon kustom
var customIcon = L.icon({
    iconUrl: 'marker-icon.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34]
});
L.marker([-8.5900, 116.1200], {icon: customIcon}).addTo(map);

Menambahkan GeoJSON

// Data GeoJSON
var geojsonData = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [116.1167, -8.5833]
            },
            "properties": {
                "nama": "Lokasi A",
                "deskripsi": "Deskripsi lokasi A"
            }
        }
    ]
};

// Tampilkan di peta
L.geoJSON(geojsonData, {
    onEachFeature: function(feature, layer) {
        layer.bindPopup(feature.properties.nama);
    }
}).addTo(map);

Integrasi dengan Database

Untuk skripsi, data biasanya diambil dari database (MySQL/PostgreSQL) via API. Buat endpoint yang mengembalikan data dalam format GeoJSON, lalu fetch dari JavaScript.

// Fetch data dari API
fetch('/api/lokasi/')
    .then(response => response.json())
    .then(data => {
        L.geoJSON(data).addTo(map);
    });