Initial commit

MapLeaflet.js

@@ -0,0 +1,245 @@
+// =====================
+// 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();