UAS-SIG-WebGIS-Poverty-Mapping/MapLeaflet.js

// =====================
// INIT MAP
// =====================
var map = L.map('map').setView([-0.0554, 109.3494], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

// =====================
// LAYER GROUP
// =====================
var drawnItems = new L.FeatureGroup().addTo(map);
var spbuLayer = L.layerGroup().addTo(map);
var kecamatanLayer = L.layerGroup().addTo(map); // 🔥 NEW

// =====================
// DRAW CONTROL
// =====================
var drawControl = new L.Control.Draw({
    edit: { featureGroup: drawnItems },
    draw: {
        marker: false,
        polygon: true,
        polyline: true
    }
});
map.addControl(drawControl);

// =====================
// STYLE
// =====================
function styleJalan(status){
    if(status == "Nasional") return {color: "red", weight: 4};
    if(status == "Provinsi") return {color: "blue", weight: 3};
    if(status == "Kabupaten") return {color: "green", weight: 2};
    return {color: "gray"};
}

function styleParsil(status){
    if(status == "SHM") return {color: "green", fillOpacity: 0.5};
    if(status == "HGB") return {color: "yellow", fillOpacity: 0.5};
    if(status == "HGU") return {color: "orange", fillOpacity: 0.5};
    if(status == "HP") return {color: "red", fillOpacity: 0.5};
    return {color: "gray"};
}

// =====================
// LOAD GEOJSON KECAMATAN
// =====================
fetch('data/Admin_Kecamatan.json')
.then(res => res.json())
.then(data => {

    L.geoJSON(data, {

        style: {
            color: "purple",
            weight: 2,
            fillOpacity: 0.3
        },

        onEachFeature: function(feature, layer){

            // 🔥 AUTO AREA
            var luas = turf.area(feature);

            var nama = feature.properties.Ket || 
                       feature.properties.nama || 
                       feature.properties.NAMOBJ || 
                       "Tidak ada";

            layer.bindPopup(`
                <b>Kecamatan</b><br>
                Nama: ${nama}<br>
                Luas: ${(luas / 1000000).toFixed(2)} km²
            `);
        }

    }).addTo(kecamatanLayer);

});

// =====================
// DRAW MODE DETECTION
// =====================
var isDrawing = false;

map.on('draw:drawstart', function(){
    isDrawing = true;
});

map.on('draw:drawstop', function(){
    setTimeout(() => { isDrawing = false; }, 300);
});

// =====================
// INPUT SPBU (POINT)
// =====================
map.on('click', function(e) {

    if (isDrawing) return;

    var lat = e.latlng.lat;
    var lng = e.latlng.lng;

    var nama = prompt("Nama SPBU:");
    if (!nama) return;

    var no_wa = prompt("No WA:");
    var buka = prompt("Buka 24 jam? (Ya/Tidak)");

    var marker = L.marker([lat, lng]).addTo(spbuLayer);

    marker.bindPopup(`
        <b>${nama}</b><br>
        WA: ${no_wa}<br>
        Buka: ${buka}
    `).openPopup();

    fetch('save_point.php', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            nama: nama,
            no_wa: no_wa,
            buka: buka,
            lat: lat,
            lng: lng
        })
    });

});

// =====================
// DRAW EVENT
// =====================
map.on(L.Draw.Event.CREATED, function (e) {

    var layer = e.layer;
    var type = e.layerType;

    drawnItems.addLayer(layer);

    if (type === 'polyline') {

        var latlngs = layer.getLatLngs();
        var panjang = 0;

        for (var i = 0; i < latlngs.length - 1; i++) {
            panjang += map.distance(latlngs[i], latlngs[i+1]);
        }

        var status = prompt("Status Jalan (Nasional/Provinsi/Kabupaten):");

        layer.setStyle(styleJalan(status));

        saveData("jalan", status, panjang, layer.toGeoJSON());
    }

    if (type === 'polygon') {

        var geojson = layer.toGeoJSON();
        var luas = turf.area(geojson);

        var status = prompt("Status Tanah (SHM/HGB/HGU/HP):");

        layer.setStyle(styleParsil(status));

        saveData("parsil", status, luas, geojson);
    }
});

// =====================
// SAVE FUNCTION
// =====================
function saveData(tipe, status, nilai, geojson){

    fetch('save.php', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            tipe: tipe,
            status: status,
            nilai: nilai,
            geom: geojson
        })
    }).then(() => loadData());
}

// =====================
// LOAD DATA FROM DB
// =====================
function loadData(){

    drawnItems.clearLayers();
    spbuLayer.clearLayers();

    // jalan & parsil
    fetch('get.php')
    .then(res => res.json())
    .then(data => {

        L.geoJSON(data, {
            style: function(feature){
                if(feature.properties.tipe == "jalan"){
                    return styleJalan(feature.properties.status);
                } else {
                    return styleParsil(feature.properties.status);
                }
            }
        }).addTo(drawnItems);
    });

    // SPBU
    fetch('get_point.php')
    .then(res => res.json())
    .then(data => {
        data.forEach(d => {
            L.marker([d.latitude, d.longitude])
            .addTo(spbuLayer)
            .bindPopup(`
                <b>${d.nama}</b><br>
                WA: ${d.no_wa}<br>
                Buka: ${d.buka_24jam}
            `);
        });
    });
}

// =====================
// LAYER CONTROL (🔥 BONUS)
// =====================
var overlayMaps = {
    "Kecamatan": kecamatanLayer,
    "Jalan & Parsil": drawnItems,
    "SPBU": spbuLayer
};

L.control.layers(null, overlayMaps).addTo(map);

// =====================
// LOAD AWAL
// =====================
loadData();