init: publish to github
This commit is contained in:
Syariffullah
@@ -0,0 +1,141 @@
|
||||
// --- Setup Leaflet Draw ---
|
||||
|
||||
// Layer terpisah untuk hasil gambar sementara sebelum disimpan
|
||||
const drawnItems = new L.FeatureGroup();
|
||||
map.addLayer(drawnItems);
|
||||
|
||||
const drawControl = new L.Control.Draw({
|
||||
draw: {
|
||||
polygon: {
|
||||
allowIntersection: false,
|
||||
showArea: true
|
||||
},
|
||||
polyline: {
|
||||
metric: true
|
||||
},
|
||||
circle: false,
|
||||
circlemarker: false,
|
||||
marker: false, // Marker default dimatikan, kita pakai klik peta untuk SPBU
|
||||
rectangle: false
|
||||
},
|
||||
edit: {
|
||||
featureGroup: drawnItems, // Kita tidak mengedit di drawnItems, karena data aslinya di jalanLayer/parsilLayer
|
||||
edit: false,
|
||||
remove: false
|
||||
}
|
||||
});
|
||||
// Hapus map.addControl(drawControl); agar tidak tampil UI bawaan LeafletJS
|
||||
|
||||
|
||||
// Flag untuk menghindari munculnya form SPBU saat sedang menggambar
|
||||
map.on(L.Draw.Event.DRAWSTART, function (e) {
|
||||
isDrawingMode = true;
|
||||
});
|
||||
|
||||
map.on(L.Draw.Event.DRAWSTOP, function (e) {
|
||||
setTimeout(() => {
|
||||
isDrawingMode = false;
|
||||
window.currentDrawMode = null;
|
||||
window.activeDrawHandler = null;
|
||||
deactivateAddMode();
|
||||
}, 200);
|
||||
});
|
||||
|
||||
window.activateDraw = function(type) {
|
||||
// Toggle: cek dari class button, lebih reliable daripada state variable
|
||||
const btnJalan = document.getElementById('btnMenuJalan');
|
||||
const btnParsil = document.getElementById('btnMenuParsil');
|
||||
const isJalanActive = btnJalan.classList.contains('active');
|
||||
const isParsilActive = btnParsil.classList.contains('active');
|
||||
|
||||
if ((type === 'polyline' && isJalanActive) || (type === 'polygon' && isParsilActive)) {
|
||||
window.deactivateAddMode();
|
||||
return;
|
||||
}
|
||||
|
||||
deactivateAddMode();
|
||||
window.currentDrawMode = type;
|
||||
|
||||
if (type === 'polyline') {
|
||||
const handler = new L.Draw.Polyline(map, drawControl.options.draw.polyline);
|
||||
handler.enable();
|
||||
window.activeDrawHandler = handler;
|
||||
btnJalan.classList.add('active');
|
||||
if (window.cursorTooltip) window.cursorTooltip.textContent = 'Klik untuk menggambar Jalan';
|
||||
} else if (type === 'polygon') {
|
||||
const handler = new L.Draw.Polygon(map, drawControl.options.draw.polygon);
|
||||
handler.enable();
|
||||
window.activeDrawHandler = handler;
|
||||
btnParsil.classList.add('active');
|
||||
if (window.cursorTooltip) window.cursorTooltip.textContent = 'Klik untuk menggambar Parsil';
|
||||
}
|
||||
};
|
||||
|
||||
map.on(L.Draw.Event.CREATED, function (e) {
|
||||
const type = e.layerType;
|
||||
const layer = e.layer;
|
||||
|
||||
// Convert layer to GeoJSON geometry
|
||||
const geoJson = layer.toGeoJSON().geometry;
|
||||
const geoJsonStr = JSON.stringify(geoJson);
|
||||
|
||||
if (type === 'polyline') {
|
||||
let length = 0;
|
||||
const latlngs = layer.getLatLngs();
|
||||
for (let i = 0; i < latlngs.length - 1; i++) {
|
||||
length += latlngs[i].distanceTo(latlngs[i + 1]);
|
||||
}
|
||||
|
||||
// Gunakan Modal alih-alih prompt
|
||||
const bodyHTML = `
|
||||
<div class="form-group">
|
||||
<label>Nama Jalan</label>
|
||||
<input type="text" id="modalJalanNama" placeholder="Nama Jalan">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<select id="modalJalanStatus">
|
||||
<option value="Nasional">Nasional</option>
|
||||
<option value="Provinsi">Provinsi</option>
|
||||
<option value="Kabupaten" selected>Kabupaten</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Panjang: ${length.toFixed(2)} m</label>
|
||||
</div>
|
||||
`;
|
||||
openModal("Tambah Jalan Baru", bodyHTML, function() {
|
||||
window.saveNewJalan(geoJsonStr, length, 'modalJalanNama', 'modalJalanStatus');
|
||||
});
|
||||
|
||||
}
|
||||
else if (type === 'polygon') {
|
||||
const latlngs = layer.getLatLngs()[0];
|
||||
let area = 0;
|
||||
if (L.GeometryUtil && L.GeometryUtil.geodesicArea) {
|
||||
area = L.GeometryUtil.geodesicArea(latlngs);
|
||||
}
|
||||
|
||||
const bodyHTML = `
|
||||
<div class="form-group">
|
||||
<label>Nama Pemilik/Area</label>
|
||||
<input type="text" id="modalParsilNama" placeholder="Contoh: Budi atau Sawah A">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Status Tanah</label>
|
||||
<select id="modalParsilStatus">
|
||||
<option value="SHM" selected>SHM</option>
|
||||
<option value="HGB">HGB</option>
|
||||
<option value="HGU">HGU</option>
|
||||
<option value="HP">HP</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Luas: ${area.toFixed(2)} m²</label>
|
||||
</div>
|
||||
`;
|
||||
openModal("Tambah Parsil Tanah", bodyHTML, function() {
|
||||
window.saveNewParsil(geoJsonStr, area, 'modalParsilNama', 'modalParsilStatus');
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,84 @@
|
||||
// --- Fitur Import GeoJSON ---
|
||||
|
||||
const fileGeoJson = document.getElementById('fileGeoJson');
|
||||
let geoJsonLayers = {};
|
||||
let geoJsonCounter = 0;
|
||||
|
||||
window.toggleGeoJsonMenu = function() {
|
||||
const list = document.getElementById('geoJsonFileList');
|
||||
const icon = document.getElementById('geoJsonToggleIcon');
|
||||
if (list.style.display === 'none') {
|
||||
list.style.display = 'block';
|
||||
icon.className = 'fas fa-minus';
|
||||
} else {
|
||||
list.style.display = 'none';
|
||||
icon.className = 'fas fa-plus';
|
||||
}
|
||||
};
|
||||
|
||||
fileGeoJson.addEventListener('change', function(e) {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(event) {
|
||||
try {
|
||||
const geoJsonData = JSON.parse(event.target.result);
|
||||
const fileName = file.name;
|
||||
const layerId = 'gj_' + (++geoJsonCounter);
|
||||
|
||||
// Buat FeatureGroup khusus untuk file ini
|
||||
const individualLayer = L.featureGroup();
|
||||
|
||||
// Tambahkan ke map
|
||||
L.geoJSON(geoJsonData, {
|
||||
onEachFeature: function (feature, layer) {
|
||||
if (feature.properties) {
|
||||
let popupContent = '<h4>Informasi Feature</h4><ul style="list-style:none; padding:0;">';
|
||||
for (let key in feature.properties) {
|
||||
popupContent += `<li><strong>${key}:</strong> ${feature.properties[key]}</li>`;
|
||||
}
|
||||
popupContent += '</ul>';
|
||||
layer.bindPopup(popupContent);
|
||||
}
|
||||
},
|
||||
style: function(feature) {
|
||||
return {
|
||||
color: feature.properties.color || '#3388ff',
|
||||
weight: 2,
|
||||
fillOpacity: 0.4
|
||||
};
|
||||
}
|
||||
}).addTo(individualLayer);
|
||||
|
||||
individualLayer.addTo(map);
|
||||
geoJsonLayers[layerId] = individualLayer;
|
||||
|
||||
// Tambahkan checkbox ke UI
|
||||
const container = document.getElementById('geoJsonLayersContainer');
|
||||
const label = document.createElement('label');
|
||||
label.className = 'layer-option';
|
||||
label.innerHTML = `<input type="checkbox" id="chk_${layerId}" checked> ${fileName}`;
|
||||
|
||||
label.querySelector('input').addEventListener('change', function(e) {
|
||||
if (e.target.checked) {
|
||||
map.addLayer(geoJsonLayers[layerId]);
|
||||
} else {
|
||||
map.removeLayer(geoJsonLayers[layerId]);
|
||||
}
|
||||
});
|
||||
|
||||
container.appendChild(label);
|
||||
|
||||
// Reset input file agar bisa import file yang sama jika dihapus
|
||||
fileGeoJson.value = '';
|
||||
|
||||
alert('File GeoJSON berhasil dimuat!');
|
||||
|
||||
} catch (error) {
|
||||
alert('Gagal memproses file GeoJSON. Pastikan format valid.');
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
});
|
||||
@@ -0,0 +1,30 @@
|
||||
// --- Fitur Geolocation ---
|
||||
|
||||
// Tambahkan tombol di dalam wadah zoom control
|
||||
const geoBtn = document.createElement('button');
|
||||
geoBtn.className = 'custom-layer-btn';
|
||||
geoBtn.style.position = 'relative';
|
||||
geoBtn.style.top = '0';
|
||||
geoBtn.style.left = '0';
|
||||
geoBtn.style.right = 'auto';
|
||||
geoBtn.innerHTML = '<i class="fas fa-crosshairs fa-lg"></i>';
|
||||
geoBtn.title = 'Lokasi Saya';
|
||||
document.querySelector('.custom-zoom-control').appendChild(geoBtn);
|
||||
|
||||
let userMarker = null;
|
||||
|
||||
geoBtn.addEventListener('click', function() {
|
||||
map.locate({setView: true, maxZoom: 16});
|
||||
});
|
||||
|
||||
map.on('locationfound', function(e) {
|
||||
if (userMarker) {
|
||||
map.removeLayer(userMarker);
|
||||
}
|
||||
userMarker = L.marker(e.latlng).addTo(map)
|
||||
.bindPopup("Anda berada di sini!").openPopup();
|
||||
});
|
||||
|
||||
map.on('locationerror', function(e) {
|
||||
alert("Gagal mendapatkan lokasi Anda.");
|
||||
});
|
||||
@@ -0,0 +1,162 @@
|
||||
// --- Fitur Jalan ---
|
||||
|
||||
const jalanColors = {
|
||||
'Nasional': '#ff0000', // Merah
|
||||
'Provinsi': '#0000ff', // Biru
|
||||
'Kabupaten': '#00ff00' // Hijau
|
||||
};
|
||||
|
||||
function loadJalan() {
|
||||
jalanLayer.clearLayers();
|
||||
fetch('api/jalan/read.php')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.status === 'success' && data.data) {
|
||||
data.data.forEach(item => {
|
||||
addJalanToMap(item);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addJalanToMap(item) {
|
||||
// geom adalah GeoJSON {type: "LineString", coordinates: [[lng, lat], ...]}
|
||||
const latlngs = item.geom.coordinates.map(coord => [coord[1], coord[0]]);
|
||||
|
||||
const polyline = L.polyline(latlngs, {
|
||||
color: jalanColors[item.status] || '#3388ff',
|
||||
weight: 5
|
||||
});
|
||||
|
||||
polyline.jalanData = item;
|
||||
|
||||
// Tampilkan label nama jalan sejajar dengan garis (diagonal)
|
||||
polyline.setText(item.nama, {
|
||||
center: true,
|
||||
offset: 0,
|
||||
attributes: {
|
||||
fill: '#000000',
|
||||
'font-weight': 'bold',
|
||||
'font-size': '14px',
|
||||
'dy': '7'
|
||||
}
|
||||
});
|
||||
|
||||
// Hitung popupContent sekali saat jalan dibuat
|
||||
const d = item;
|
||||
const popupContent = `
|
||||
<div style="font-family: Arial, sans-serif; min-width: 150px;">
|
||||
<h4 style="margin:0 0 5px 0;">Jalan ${d.nama}</h4>
|
||||
<p style="margin: 0 0 5px 0;"><b>Status:</b> ${d.status}</p>
|
||||
<p style="margin: 0 0 10px 0;"><b>Panjang:</b> ${d.panjang.toFixed(2)} m</p>
|
||||
<div style="display:flex; gap:5px;">
|
||||
<button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditJalanModal(${d.id})">Edit</button>
|
||||
<button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteJalan(${d.id})">Hapus</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
polyline.bindPopup(popupContent);
|
||||
|
||||
jalanLayer.addLayer(polyline);
|
||||
}
|
||||
|
||||
window.openEditJalanModal = function(id) {
|
||||
let d = null;
|
||||
jalanLayer.eachLayer(function(layer) {
|
||||
if (layer.jalanData && layer.jalanData.id == id) d = layer.jalanData;
|
||||
});
|
||||
if (!d) return;
|
||||
|
||||
const bodyHTML = `
|
||||
<div class="form-group">
|
||||
<label>Nama Jalan</label>
|
||||
<input type="text" id="editJalanNama" value="${d.nama}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<select id="editJalanStatus">
|
||||
<option value="Nasional" ${d.status === 'Nasional' ? 'selected' : ''}>Nasional</option>
|
||||
<option value="Provinsi" ${d.status === 'Provinsi' ? 'selected' : ''}>Provinsi</option>
|
||||
<option value="Kabupaten" ${d.status === 'Kabupaten' ? 'selected' : ''}>Kabupaten</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Panjang: ${d.panjang.toFixed(2)} m</label>
|
||||
</div>
|
||||
`;
|
||||
map.closePopup();
|
||||
openModal("Edit Jalan", bodyHTML, function() {
|
||||
window.saveEditJalan(d.id, 'editJalanNama', 'editJalanStatus');
|
||||
});
|
||||
};
|
||||
|
||||
window.saveEditJalan = function(id, namaId, statusId) {
|
||||
const nama = document.getElementById(namaId).value;
|
||||
const status = document.getElementById(statusId).value;
|
||||
|
||||
fetch('api/jalan/update.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id, nama, status })
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if(data.status === 'success') {
|
||||
map.closePopup();
|
||||
loadJalan();
|
||||
} else {
|
||||
alert(data.message);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
window.deleteJalan = function(id) {
|
||||
openConfirmModal("Yakin hapus jalan ini?", function() {
|
||||
fetch('api/jalan/delete.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id })
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if(data.status === 'success') {
|
||||
map.closePopup();
|
||||
loadJalan();
|
||||
} else {
|
||||
alert(data.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
window.saveNewJalan = function(geoJsonStr, panjang, namaId, statusId) {
|
||||
const nama = document.getElementById(namaId).value;
|
||||
if (!nama) {
|
||||
alert("Nama jalan harus diisi!");
|
||||
return false;
|
||||
}
|
||||
|
||||
const status = document.getElementById(statusId).value;
|
||||
|
||||
const geom = JSON.parse(geoJsonStr);
|
||||
|
||||
fetch('api/jalan/create.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ nama, status, panjang, geom })
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if(data.status === 'success') {
|
||||
closeModal();
|
||||
loadJalan();
|
||||
} else {
|
||||
alert(data.message);
|
||||
}
|
||||
});
|
||||
return true;
|
||||
};
|
||||
|
||||
// Initial Load
|
||||
loadJalan();
|
||||
@@ -0,0 +1,487 @@
|
||||
// --- Fitur Pemetaan Kemiskinan ---
|
||||
|
||||
// Emoji Bubble Icon builder
|
||||
function makeIbadahIcon() {
|
||||
return L.divIcon({
|
||||
className: '',
|
||||
html: `<div class="emoji-marker"><div class="bubble ibadah"><span>🕌</span></div></div>`,
|
||||
iconSize: [38, 38],
|
||||
iconAnchor: [19, 38],
|
||||
popupAnchor: [0, -40]
|
||||
});
|
||||
}
|
||||
|
||||
function makeMiskinIcon(inRadius) {
|
||||
const cls = inRadius ? 'miskin-in' : 'miskin-out';
|
||||
return L.divIcon({
|
||||
className: '',
|
||||
html: `<div class="emoji-marker"><div class="bubble ${cls}"><span>🏠</span></div></div>`,
|
||||
iconSize: [38, 38],
|
||||
iconAnchor: [19, 38],
|
||||
popupAnchor: [0, -40]
|
||||
});
|
||||
}
|
||||
|
||||
const ibadahIcon = makeIbadahIcon();
|
||||
const miskinMerahIcon = makeMiskinIcon(true);
|
||||
const miskinHijauIcon = makeMiskinIcon(false);
|
||||
|
||||
|
||||
let ibadahDataList = [];
|
||||
let miskinMarkerList = []; // Simpan referensi marker untuk update warna
|
||||
|
||||
let isResizing = false;
|
||||
let resizingCircle = null;
|
||||
let resizingIbadah = null;
|
||||
|
||||
map.on('mousemove', function(e) {
|
||||
if (isResizing && resizingCircle && resizingIbadah) {
|
||||
const center = resizingCircle.getLatLng();
|
||||
const newRadius = center.distanceTo(e.latlng);
|
||||
resizingCircle.setRadius(newRadius);
|
||||
resizingIbadah.radius = newRadius;
|
||||
|
||||
// Update data radius di marker juga
|
||||
rumahIbadahLayer.eachLayer(function(layer) {
|
||||
if (layer.ibadahData && layer.ibadahData.id === resizingIbadah.id && layer instanceof L.Marker) {
|
||||
layer.ibadahData.radius = newRadius;
|
||||
}
|
||||
});
|
||||
|
||||
updateSemuaWarnaMiskin();
|
||||
}
|
||||
});
|
||||
|
||||
map.on('mouseup', function(e) {
|
||||
if (isResizing) {
|
||||
isResizing = false;
|
||||
map.dragging.enable();
|
||||
if (resizingIbadah) {
|
||||
updateIbadah(resizingIbadah.id, resizingIbadah.nama, resizingIbadah.alamat, resizingIbadah.radius, resizingIbadah.lat, resizingIbadah.lng);
|
||||
}
|
||||
resizingCircle = null;
|
||||
resizingIbadah = null;
|
||||
}
|
||||
});
|
||||
|
||||
// --- Rumah Ibadah ---
|
||||
function loadRumahIbadah() {
|
||||
rumahIbadahLayer.clearLayers();
|
||||
ibadahDataList = [];
|
||||
fetch('api/rumah_ibadah/read.php')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.status === 'success' && data.data) {
|
||||
ibadahDataList = data.data;
|
||||
data.data.forEach(item => {
|
||||
addIbadahMarker(item);
|
||||
});
|
||||
updateSemuaWarnaMiskin(); // Update warna setelah memuat rumah ibadah
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addIbadahMarker(item) {
|
||||
const marker = L.marker([item.lat, item.lng], { icon: ibadahIcon, draggable: true });
|
||||
|
||||
// Lingkaran radius
|
||||
const circle = L.circle([item.lat, item.lng], {
|
||||
radius: item.radius,
|
||||
color: '#ff7800',
|
||||
weight: 2,
|
||||
fillColor: '#ff7800',
|
||||
fillOpacity: 0.2
|
||||
});
|
||||
|
||||
circle.on('mousemove', function(e) {
|
||||
if (isResizing) return;
|
||||
const center = circle.getLatLng();
|
||||
const radius = circle.getRadius();
|
||||
const dist = center.distanceTo(e.latlng);
|
||||
|
||||
const metersPerPixel = map.distance(map.containerPointToLatLng([0,0]), map.containerPointToLatLng([0,1]));
|
||||
const tolerance = Math.max(radius * 0.1, metersPerPixel * 15); // toleransi 15px atau 10%
|
||||
|
||||
if (Math.abs(dist - radius) <= tolerance) {
|
||||
if (circle._path) circle._path.style.cursor = 'ew-resize';
|
||||
circle.nearEdge = true;
|
||||
} else {
|
||||
if (circle._path) circle._path.style.cursor = 'pointer';
|
||||
circle.nearEdge = false;
|
||||
}
|
||||
});
|
||||
|
||||
circle.on('mousedown', function(e) {
|
||||
if (circle.nearEdge) {
|
||||
map.dragging.disable();
|
||||
isResizing = true;
|
||||
resizingCircle = circle;
|
||||
resizingIbadah = item;
|
||||
L.DomEvent.stopPropagation(e);
|
||||
}
|
||||
});
|
||||
|
||||
marker.ibadahData = item;
|
||||
marker.circleLayer = circle;
|
||||
|
||||
const d = item;
|
||||
const popupContent = `
|
||||
<div style="font-family: Arial, sans-serif; min-width: 150px;">
|
||||
<h4 style="margin:0 0 5px 0;">Rumah Ibadah ${d.nama}</h4>
|
||||
<p style="margin: 0 0 5px 0;"><b>Alamat:</b> ${d.alamat}</p>
|
||||
<p style="margin: 0 0 10px 0;"><b>Radius:</b> ${d.radius} m</p>
|
||||
<div style="display:flex; gap:5px;">
|
||||
<button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditIbadahModal(${d.id})">Edit</button>
|
||||
<button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteIbadah(${d.id})">Hapus</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
marker.bindPopup(popupContent);
|
||||
|
||||
marker.on('dragend', function(e) {
|
||||
const newPos = marker.getLatLng();
|
||||
circle.setLatLng(newPos);
|
||||
item.lat = newPos.lat;
|
||||
item.lng = newPos.lng;
|
||||
// Update ke DB
|
||||
updateIbadah(item.id, item.nama, item.alamat, item.radius, newPos.lat, newPos.lng);
|
||||
});
|
||||
|
||||
rumahIbadahLayer.addLayer(circle);
|
||||
rumahIbadahLayer.addLayer(marker);
|
||||
}
|
||||
|
||||
// Konteks Menu untuk Tambah Penduduk Miskin (klik kanan peta)
|
||||
map.on('contextmenu', function(e) {
|
||||
if (isDrawingMode) return;
|
||||
|
||||
const popupContent = `
|
||||
<div class="popup-form">
|
||||
<h4>Tambah Titik</h4>
|
||||
<button class="btn-danger" style="margin-top:5px;" onclick="formAddMiskin(${e.latlng.lat}, ${e.latlng.lng})">Tambah Penduduk Miskin</button>
|
||||
</div>
|
||||
`;
|
||||
L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(map);
|
||||
});
|
||||
|
||||
// Map Click -> Form Add Rumah Ibadah
|
||||
map.on('click', function(e) {
|
||||
if (isDrawingMode) return;
|
||||
|
||||
if (window.currentAddMode === 'rumah_ibadah') {
|
||||
const lat = e.latlng.lat;
|
||||
const lng = e.latlng.lng;
|
||||
|
||||
// Reverse Geocoding
|
||||
fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`)
|
||||
.then(res => res.json())
|
||||
.then(geoData => {
|
||||
const alamat = geoData.display_name || 'Alamat tidak ditemukan';
|
||||
const bodyHTML = `
|
||||
<div class="form-group">
|
||||
<label>Lat: ${lat.toFixed(6)}, Lng: ${lng.toFixed(6)}</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Nama Rumah Ibadah</label>
|
||||
<input type="text" id="modalIbadahNama" placeholder="Nama Rumah Ibadah">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Alamat (Auto)</label>
|
||||
<textarea id="modalIbadahAlamat" rows="3">${alamat}</textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Radius (m)</label>
|
||||
<input type="number" id="modalIbadahRadius" value="500">
|
||||
</div>
|
||||
`;
|
||||
|
||||
openModal("Tambah Rumah Ibadah", bodyHTML, function() {
|
||||
window.saveNewIbadah(lat, lng, 'modalIbadahNama', 'modalIbadahAlamat', 'modalIbadahRadius');
|
||||
});
|
||||
|
||||
window.deactivateAddMode();
|
||||
})
|
||||
.catch(err => {
|
||||
// Tetap buka modal meskipun gagal mendapatkan alamat
|
||||
const alamat = '';
|
||||
const bodyHTML = `
|
||||
<div class="form-group">
|
||||
<label>Lat: ${lat.toFixed(6)}, Lng: ${lng.toFixed(6)}</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Nama Rumah Ibadah</label>
|
||||
<input type="text" id="modalIbadahNama" placeholder="Nama Rumah Ibadah">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Alamat (Manual)</label>
|
||||
<textarea id="modalIbadahAlamat" rows="3" placeholder="Masukkan alamat manual">${alamat}</textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Radius (m)</label>
|
||||
<input type="number" id="modalIbadahRadius" value="500">
|
||||
</div>
|
||||
`;
|
||||
|
||||
openModal("Tambah Rumah Ibadah", bodyHTML, function() {
|
||||
window.saveNewIbadah(lat, lng, 'modalIbadahNama', 'modalIbadahAlamat', 'modalIbadahRadius');
|
||||
});
|
||||
|
||||
window.deactivateAddMode();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
window.saveNewIbadah = function(lat, lng, namaId, alamatId, radiusId) {
|
||||
const nama = document.getElementById(namaId).value;
|
||||
const alamat = document.getElementById(alamatId).value;
|
||||
const radius = document.getElementById(radiusId).value;
|
||||
|
||||
if (!nama) {
|
||||
alert("Nama Rumah Ibadah harus diisi!");
|
||||
return;
|
||||
}
|
||||
|
||||
fetch('api/rumah_ibadah/create.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ nama, alamat, radius, lat, lng })
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if(data.status === 'success') {
|
||||
closeModal();
|
||||
loadRumahIbadah();
|
||||
} else { alert(data.message); }
|
||||
});
|
||||
};
|
||||
|
||||
window.openEditIbadahModal = function(id) {
|
||||
let d = null;
|
||||
rumahIbadahLayer.eachLayer(function(layer) {
|
||||
if (layer.ibadahData && layer.ibadahData.id == id) d = layer.ibadahData;
|
||||
});
|
||||
if (!d) return;
|
||||
|
||||
const bodyHTML = `
|
||||
<div class="form-group">
|
||||
<label>Nama Rumah Ibadah</label>
|
||||
<input type="text" id="editIbadahNama" value="${d.nama}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Alamat</label>
|
||||
<textarea id="editIbadahAlamat" rows="2">${d.alamat}</textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Radius (m)</label>
|
||||
<input type="number" id="editIbadahRadius" value="${d.radius}" oninput="previewRadius(${d.id}, this.value)">
|
||||
</div>
|
||||
`;
|
||||
map.closePopup();
|
||||
openModal("Edit Rumah Ibadah", bodyHTML, function() {
|
||||
window.saveEditIbadah(d.id, d.lat, d.lng, 'editIbadahNama', 'editIbadahAlamat', 'editIbadahRadius');
|
||||
});
|
||||
};
|
||||
|
||||
window.previewRadius = function(id, newRadius) {
|
||||
rumahIbadahLayer.eachLayer(function(layer) {
|
||||
// layer ini bisa marker atau circle, kita cek yang punya circleLayer (marker)
|
||||
if (layer.ibadahData && layer.ibadahData.id === id && layer.circleLayer) {
|
||||
layer.circleLayer.setRadius(parseFloat(newRadius));
|
||||
layer.ibadahData.radius = parseFloat(newRadius);
|
||||
updateSemuaWarnaMiskin(); // Update warna miskin real-time
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
window.saveEditIbadah = function(id, lat, lng, namaId, alamatId, radiusId) {
|
||||
const nama = document.getElementById(namaId).value;
|
||||
const alamat = document.getElementById(alamatId).value;
|
||||
const radius = document.getElementById(radiusId).value;
|
||||
updateIbadah(id, nama, alamat, radius, lat, lng);
|
||||
};
|
||||
|
||||
function updateIbadah(id, nama, alamat, radius, lat, lng) {
|
||||
fetch('api/rumah_ibadah/update.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id, nama, alamat, radius, lat, lng })
|
||||
}).then(res => res.json()).then(data => {
|
||||
if(data.status === 'success') { map.closePopup(); loadRumahIbadah(); }
|
||||
});
|
||||
}
|
||||
|
||||
window.deleteIbadah = function(id) {
|
||||
openConfirmModal("Yakin hapus rumah ibadah ini?", function() {
|
||||
fetch('api/rumah_ibadah/delete.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id })
|
||||
}).then(res => res.json()).then(data => {
|
||||
if(data.status === 'success') { map.closePopup(); loadRumahIbadah(); }
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// --- Penduduk Miskin ---
|
||||
function loadPendudukMiskin() {
|
||||
pendudukMiskinLayer.clearLayers();
|
||||
miskinMarkerList = [];
|
||||
fetch('api/penduduk_miskin/read.php')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.status === 'success' && data.data) {
|
||||
data.data.forEach(item => {
|
||||
addMiskinMarker(item);
|
||||
});
|
||||
updateSemuaWarnaMiskin();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addMiskinMarker(item) {
|
||||
const marker = L.marker([item.lat, item.lng], { icon: miskinHijauIcon, draggable: true });
|
||||
marker.miskinData = item;
|
||||
|
||||
const d = item;
|
||||
const popupContent = `
|
||||
<div style="font-family: Arial, sans-serif; min-width: 150px;">
|
||||
<h4 style="margin:0 0 5px 0;">Penduduk Miskin ${d.nama}</h4>
|
||||
<p style="margin: 0 0 10px 0;"><b>Bantuan:</b> ${d.kategori_bantuan}</p>
|
||||
<div style="display:flex; gap:5px;">
|
||||
<button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditMiskinModal(${d.id})">Edit</button>
|
||||
<button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteMiskin(${d.id})">Hapus</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
marker.bindPopup(popupContent);
|
||||
|
||||
marker.on('dragend', function(e) {
|
||||
const newPos = marker.getLatLng();
|
||||
item.lat = newPos.lat;
|
||||
item.lng = newPos.lng;
|
||||
updateSemuaWarnaMiskin(); // Update warna segera
|
||||
// Simpan ke DB
|
||||
fetch('api/penduduk_miskin/update.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(item)
|
||||
});
|
||||
});
|
||||
|
||||
miskinMarkerList.push(marker);
|
||||
pendudukMiskinLayer.addLayer(marker);
|
||||
}
|
||||
|
||||
window.formAddMiskin = function(lat, lng) {
|
||||
const popupContent = `
|
||||
<div class="popup-form">
|
||||
<h4>Penduduk Miskin Baru</h4>
|
||||
<input type="text" id="miskinNama" placeholder="Nama Penduduk">
|
||||
<select id="miskinKategori">
|
||||
<option value="Makan">Bantuan Makan</option>
|
||||
<option value="Pemberdayaan">Pemberdayaan</option>
|
||||
</select>
|
||||
<button onclick="saveNewMiskin(${lat}, ${lng})">Simpan</button>
|
||||
</div>
|
||||
`;
|
||||
map.closePopup();
|
||||
L.popup().setLatLng([lat, lng]).setContent(popupContent).openOn(map);
|
||||
};
|
||||
|
||||
window.saveNewMiskin = function(lat, lng) {
|
||||
const nama = document.getElementById('miskinNama').value;
|
||||
const kategori_bantuan = document.getElementById('miskinKategori').value;
|
||||
|
||||
fetch('api/penduduk_miskin/create.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ nama, kategori_bantuan, lat, lng })
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if(data.status === 'success') {
|
||||
map.closePopup();
|
||||
loadPendudukMiskin();
|
||||
} else { alert(data.message); }
|
||||
});
|
||||
};
|
||||
|
||||
window.openEditMiskinModal = function(id) {
|
||||
let d = null;
|
||||
pendudukMiskinLayer.eachLayer(function(layer) {
|
||||
if (layer.miskinData && layer.miskinData.id == id) d = layer.miskinData;
|
||||
});
|
||||
if (!d) return;
|
||||
|
||||
const bodyHTML = `
|
||||
<div class="form-group">
|
||||
<label>Nama Penduduk</label>
|
||||
<input type="text" id="editMiskinNama" value="${d.nama}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Bantuan</label>
|
||||
<select id="editMiskinKategori">
|
||||
<option value="Makan" ${d.kategori_bantuan === 'Makan' ? 'selected' : ''}>Bantuan Makan</option>
|
||||
<option value="Pemberdayaan" ${d.kategori_bantuan === 'Pemberdayaan' ? 'selected' : ''}>Pemberdayaan</option>
|
||||
</select>
|
||||
</div>
|
||||
`;
|
||||
map.closePopup();
|
||||
openModal("Edit Penduduk Miskin", bodyHTML, function() {
|
||||
window.saveEditMiskin(d.id, d.lat, d.lng, 'editMiskinNama', 'editMiskinKategori');
|
||||
});
|
||||
};
|
||||
|
||||
window.saveEditMiskin = function(id, lat, lng, namaId, kategoriId) {
|
||||
const nama = document.getElementById(namaId).value;
|
||||
const kategori_bantuan = document.getElementById(kategoriId).value;
|
||||
fetch('api/penduduk_miskin/update.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id, nama, kategori_bantuan, lat, lng })
|
||||
}).then(res => res.json()).then(data => {
|
||||
if(data.status === 'success') { closeModal(); loadPendudukMiskin(); }
|
||||
});
|
||||
};
|
||||
|
||||
window.deleteMiskin = function(id) {
|
||||
openConfirmModal("Yakin hapus penduduk miskin ini?", function() {
|
||||
fetch('api/penduduk_miskin/delete.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id })
|
||||
}).then(res => res.json()).then(data => {
|
||||
if(data.status === 'success') { map.closePopup(); loadPendudukMiskin(); }
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Logika dinamis warna: Merah jika di dalam salah satu radius Rumah Ibadah, Hijau jika di luar
|
||||
function updateSemuaWarnaMiskin() {
|
||||
miskinMarkerList.forEach(marker => {
|
||||
let inRadius = false;
|
||||
const pLatlng = L.latLng(marker.miskinData.lat, marker.miskinData.lng);
|
||||
|
||||
for (let i = 0; i < ibadahDataList.length; i++) {
|
||||
const ibadah = ibadahDataList[i];
|
||||
const iLatlng = L.latLng(ibadah.lat, ibadah.lng);
|
||||
const dist = pLatlng.distanceTo(iLatlng); // meter
|
||||
|
||||
if (dist <= ibadah.radius) {
|
||||
inRadius = true;
|
||||
break; // Jika sudah masuk satu radius, langsung merah
|
||||
}
|
||||
}
|
||||
|
||||
if (inRadius) {
|
||||
marker.setIcon(makeMiskinIcon(true));
|
||||
} else {
|
||||
marker.setIcon(makeMiskinIcon(false));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initial Load
|
||||
loadRumahIbadah();
|
||||
loadPendudukMiskin();
|
||||
@@ -0,0 +1,149 @@
|
||||
// --- Fitur Parsil ---
|
||||
|
||||
const parsilColors = {
|
||||
'SHM': '#28a745', // Hijau
|
||||
'HGB': '#17a2b8', // Biru Muda
|
||||
'HGU': '#ffc107', // Kuning
|
||||
'HP': '#fd7e14' // Oranye
|
||||
};
|
||||
|
||||
function loadParsil() {
|
||||
parsilLayer.clearLayers();
|
||||
fetch('api/parsil/read.php')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.status === 'success' && data.data) {
|
||||
data.data.forEach(item => {
|
||||
addParsilToMap(item);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addParsilToMap(item) {
|
||||
// geom adalah GeoJSON Polygon
|
||||
// coordinates pada Polygon formatnya: [[[lng, lat], [lng, lat], ...]]
|
||||
// Leaflet Polygon butuh array of [lat, lng]
|
||||
const latlngs = item.geom.coordinates[0].map(coord => [coord[1], coord[0]]);
|
||||
|
||||
const polygon = L.polygon(latlngs, {
|
||||
color: parsilColors[item.status] || '#3388ff',
|
||||
fillColor: parsilColors[item.status] || '#3388ff',
|
||||
fillOpacity: 0.5,
|
||||
weight: 2
|
||||
});
|
||||
|
||||
polygon.parsilData = item;
|
||||
|
||||
const d = item;
|
||||
const popupContent = `
|
||||
<div style="font-family: Arial, sans-serif; min-width: 150px;">
|
||||
<h4 style="margin:0 0 5px 0;">Parsil ${d.nama || ''}</h4>
|
||||
<p style="margin: 0 0 5px 0;"><b>Status:</b> ${d.status}</p>
|
||||
<p style="margin: 0 0 10px 0;"><b>Luas:</b> ${d.luas.toFixed(2)} m²</p>
|
||||
<div style="display:flex; gap:5px;">
|
||||
<button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditParsilModal(${d.id})">Edit</button>
|
||||
<button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteParsil(${d.id})">Hapus</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
polygon.bindPopup(popupContent);
|
||||
|
||||
parsilLayer.addLayer(polygon);
|
||||
}
|
||||
|
||||
window.openEditParsilModal = function(id) {
|
||||
let d = null;
|
||||
parsilLayer.eachLayer(function(layer) {
|
||||
if (layer.parsilData && layer.parsilData.id == id) d = layer.parsilData;
|
||||
});
|
||||
if (!d) return;
|
||||
|
||||
const bodyHTML = `
|
||||
<div class="form-group">
|
||||
<label>Nama Pemilik/Area</label>
|
||||
<input type="text" id="editParsilNama" value="${d.nama || ''}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<select id="editParsilStatus">
|
||||
<option value="SHM" ${d.status === 'SHM' ? 'selected' : ''}>SHM</option>
|
||||
<option value="HGB" ${d.status === 'HGB' ? 'selected' : ''}>HGB</option>
|
||||
<option value="HGU" ${d.status === 'HGU' ? 'selected' : ''}>HGU</option>
|
||||
<option value="HP" ${d.status === 'HP' ? 'selected' : ''}>HP</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Luas: ${d.luas.toFixed(2)} m²</label>
|
||||
</div>
|
||||
`;
|
||||
map.closePopup();
|
||||
openModal("Edit Parsil Tanah", bodyHTML, function() {
|
||||
window.saveEditParsil(d.id, 'editParsilNama', 'editParsilStatus');
|
||||
});
|
||||
};
|
||||
|
||||
window.saveEditParsil = function(id, namaId, statusId) {
|
||||
const nama = document.getElementById(namaId).value;
|
||||
const status = document.getElementById(statusId).value;
|
||||
|
||||
fetch('api/parsil/update.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id, nama, status })
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if(data.status === 'success') {
|
||||
map.closePopup();
|
||||
loadParsil();
|
||||
} else {
|
||||
alert(data.message);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
window.deleteParsil = function(id) {
|
||||
openConfirmModal("Yakin hapus parsil ini?", function() {
|
||||
fetch('api/parsil/delete.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id })
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if(data.status === 'success') {
|
||||
map.closePopup();
|
||||
loadParsil();
|
||||
} else {
|
||||
alert(data.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
window.saveNewParsil = function(geoJsonStr, luas, namaId, statusId) {
|
||||
const nama = document.getElementById(namaId).value;
|
||||
const status = document.getElementById(statusId).value;
|
||||
|
||||
const geom = JSON.parse(geoJsonStr);
|
||||
|
||||
fetch('api/parsil/create.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ nama, status, luas, geom })
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if(data.status === 'success') {
|
||||
closeModal();
|
||||
loadParsil();
|
||||
} else {
|
||||
alert(data.message);
|
||||
}
|
||||
});
|
||||
return true;
|
||||
};
|
||||
|
||||
// Initial Load
|
||||
loadParsil();
|
||||
@@ -0,0 +1,204 @@
|
||||
// --- Fitur SPBU ---
|
||||
|
||||
// Emoji Bubble Icon builder
|
||||
function makeSpbuIcon(is24) {
|
||||
const cls = is24 ? 'spbu-24' : 'spbu-not24';
|
||||
return L.divIcon({
|
||||
className: '',
|
||||
html: `<div class="emoji-marker"><div class="bubble ${cls}"><span>⛽</span></div></div>`,
|
||||
iconSize: [38, 38],
|
||||
iconAnchor: [19, 38],
|
||||
popupAnchor: [0, -40]
|
||||
});
|
||||
}
|
||||
|
||||
const spbuGreenIcon = makeSpbuIcon(true);
|
||||
const spbuRedIcon = makeSpbuIcon(false);
|
||||
|
||||
let isDrawingMode = false; // Akan diset true saat draw mode aktif (jalan/parsil)
|
||||
|
||||
|
||||
// Fetch SPBU
|
||||
function loadSpbu() {
|
||||
spbuLayer.clearLayers();
|
||||
fetch('api/spbu/read.php')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.status === 'success' && data.data) {
|
||||
data.data.forEach(item => {
|
||||
addSpbuMarker(item);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addSpbuMarker(item) {
|
||||
const icon = makeSpbuIcon(item.is_24_jam);
|
||||
const marker = L.marker([item.lat, item.lng], {
|
||||
icon: icon,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
marker.spbuData = item; // Simpan data di objek marker
|
||||
|
||||
// Hitung popupContent sekali saat marker dibuat
|
||||
const d = item;
|
||||
const popupContent = `
|
||||
<div style="font-family: Arial, sans-serif; min-width: 150px;">
|
||||
<h4 style="margin:0 0 5px 0;">SPBU ${d.nama}</h4>
|
||||
<p style="margin: 0 0 5px 0;"><b>No. WA:</b> ${d.no_wa}</p>
|
||||
<p style="margin: 0 0 10px 0;"><b>Buka 24 Jam:</b> ${d.is_24_jam ? 'Ya' : 'Tidak'}</p>
|
||||
<div style="display:flex; gap:5px;">
|
||||
<button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditSpbuModal(${d.id})">Edit</button>
|
||||
<button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteSpbu(${d.id})">Hapus</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
marker.bindPopup(popupContent);
|
||||
|
||||
// Event drag untuk update koordinat
|
||||
marker.on('dragend', function(e) {
|
||||
const newPos = marker.getLatLng();
|
||||
updateSpbu(item.id, item.nama, item.no_wa, item.is_24_jam, newPos.lat, newPos.lng);
|
||||
});
|
||||
|
||||
spbuLayer.addLayer(marker);
|
||||
}
|
||||
|
||||
// Map Click -> Form Add
|
||||
map.on('click', function(e) {
|
||||
if (isDrawingMode) return; // Jangan muncul form jika sedang gambar garis/polygon
|
||||
|
||||
// Hanya proses jika mode tambah SPBU aktif
|
||||
if (window.currentAddMode === 'spbu') {
|
||||
const bodyHTML = `
|
||||
<div class="form-group">
|
||||
<label>Lat: ${e.latlng.lat.toFixed(6)}, Lng: ${e.latlng.lng.toFixed(6)}</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Nama SPBU</label>
|
||||
<input type="text" id="modalSpbuNama" placeholder="Nama SPBU">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>No. WA</label>
|
||||
<input type="text" id="modalSpbuWa" placeholder="No. WA">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Buka 24 Jam?</label>
|
||||
<div class="radio-group" style="margin-top:5px;">
|
||||
<label><input type="radio" name="modalSpbu24" value="1"> Ya</label>
|
||||
<label><input type="radio" name="modalSpbu24" value="0" checked> Tidak</label>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
openModal("Tambah SPBU Baru", bodyHTML, function() {
|
||||
window.saveNewSpbu(e.latlng.lat, e.latlng.lng, 'modalSpbuNama', 'modalSpbuWa', 'modalSpbu24');
|
||||
});
|
||||
|
||||
// Nonaktifkan mode tambah setelah modal muncul
|
||||
window.deactivateAddMode();
|
||||
}
|
||||
});
|
||||
|
||||
window.saveNewSpbu = function(lat, lng, namaId, waId, radioName) {
|
||||
const nama = document.getElementById(namaId).value;
|
||||
if (!nama) {
|
||||
alert("Nama SPBU harus diisi!");
|
||||
return;
|
||||
}
|
||||
const no_wa = document.getElementById(waId).value;
|
||||
const is_24_jam = document.querySelector(`input[name="${radioName}"]:checked`).value;
|
||||
|
||||
fetch('api/spbu/create.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ nama, no_wa, is_24_jam, lat, lng })
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if(data.status === 'success') {
|
||||
closeModal();
|
||||
loadSpbu();
|
||||
} else {
|
||||
alert(data.message);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
window.openEditSpbuModal = function(id) {
|
||||
let d = null;
|
||||
spbuLayer.eachLayer(function(layer) {
|
||||
if (layer.spbuData && layer.spbuData.id == id) d = layer.spbuData;
|
||||
});
|
||||
if (!d) return;
|
||||
|
||||
const bodyHTML = `
|
||||
<div class="form-group">
|
||||
<label>Nama SPBU</label>
|
||||
<input type="text" id="editSpbuNama" value="${d.nama}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>No. WA</label>
|
||||
<input type="text" id="editSpbuWa" value="${d.no_wa}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Buka 24 Jam?</label>
|
||||
<div class="radio-group" style="margin-top:5px;">
|
||||
<label><input type="radio" name="editSpbu24" value="1" ${d.is_24_jam ? 'checked' : ''}> Ya</label>
|
||||
<label><input type="radio" name="editSpbu24" value="0" ${!d.is_24_jam ? 'checked' : ''}> Tidak</label>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
map.closePopup();
|
||||
openModal("Edit SPBU", bodyHTML, function() {
|
||||
window.saveEditSpbu(d.id, d.lat, d.lng, 'editSpbuNama', 'editSpbuWa', 'editSpbu24');
|
||||
});
|
||||
};
|
||||
|
||||
window.saveEditSpbu = function(id, lat, lng, namaId, waId, radioName) {
|
||||
const nama = document.getElementById(namaId).value;
|
||||
const no_wa = document.getElementById(waId).value;
|
||||
const is_24_jam = document.querySelector(`input[name="${radioName}"]:checked`).value;
|
||||
|
||||
updateSpbu(id, nama, no_wa, is_24_jam, lat, lng);
|
||||
};
|
||||
|
||||
function updateSpbu(id, nama, no_wa, is_24_jam, lat, lng) {
|
||||
fetch('api/spbu/update.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id, nama, no_wa, is_24_jam, lat, lng })
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if(data.status === 'success') {
|
||||
map.closePopup();
|
||||
loadSpbu();
|
||||
} else {
|
||||
alert(data.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.deleteSpbu = function(id) {
|
||||
openConfirmModal("Yakin hapus SPBU ini?", function() {
|
||||
fetch('api/spbu/delete.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id })
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if(data.status === 'success') {
|
||||
map.closePopup();
|
||||
loadSpbu();
|
||||
} else {
|
||||
alert(data.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Initial Load
|
||||
loadSpbu();
|
||||
@@ -0,0 +1,326 @@
|
||||
// Inisialisasi Peta
|
||||
// Koordinat awal: [-0.0263, 109.3425] (Pontianak)
|
||||
const map = L.map('map', { zoomControl: false }).setView([-0.0263, 109.3425], 13);
|
||||
|
||||
// Custom Zoom Control Logic
|
||||
document.getElementById('zoomInBtn').addEventListener('click', function() { map.zoomIn(); });
|
||||
document.getElementById('zoomOutBtn').addEventListener('click', function() { map.zoomOut(); });
|
||||
|
||||
// Base Map dari OpenStreetMap
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
|
||||
// Inisialisasi FeatureGroups untuk masing-masing layer
|
||||
const spbuLayer = L.featureGroup().addTo(map);
|
||||
const jalanLayer = L.featureGroup().addTo(map);
|
||||
const parsilLayer = L.featureGroup().addTo(map);
|
||||
const rumahIbadahLayer = L.featureGroup().addTo(map);
|
||||
const pendudukMiskinLayer = L.featureGroup().addTo(map);
|
||||
const geoJsonLayer = L.featureGroup().addTo(map);
|
||||
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const searchClear = document.getElementById('searchClear');
|
||||
|
||||
searchInput.addEventListener('input', function() {
|
||||
const val = this.value.toLowerCase();
|
||||
if (val.length > 0) {
|
||||
searchClear.style.visibility = 'visible';
|
||||
window.showSearchResults(val);
|
||||
} else {
|
||||
searchClear.style.visibility = 'hidden';
|
||||
document.getElementById('searchResults').style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
searchClear.addEventListener('click', function() {
|
||||
searchInput.value = '';
|
||||
searchClear.style.visibility = 'hidden';
|
||||
document.getElementById('searchResults').style.display = 'none';
|
||||
searchInput.focus();
|
||||
});
|
||||
|
||||
window.showSearchResults = function(query) {
|
||||
const resultsContainer = document.getElementById('searchResults');
|
||||
resultsContainer.innerHTML = '';
|
||||
let results = [];
|
||||
|
||||
if (typeof spbuLayer !== 'undefined') {
|
||||
spbuLayer.eachLayer(layer => {
|
||||
if (layer.spbuData && layer.spbuData.nama && layer.spbuData.nama.toLowerCase().includes(query)) {
|
||||
results.push({ type: 'SPBU', nama: layer.spbuData.nama, layer: layer });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof jalanLayer !== 'undefined') {
|
||||
jalanLayer.eachLayer(layer => {
|
||||
if (layer.jalanData && layer.jalanData.nama && layer.jalanData.nama.toLowerCase().includes(query)) {
|
||||
results.push({ type: 'Jalan', nama: layer.jalanData.nama, layer: layer });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof parsilLayer !== 'undefined') {
|
||||
parsilLayer.eachLayer(layer => {
|
||||
if (layer.parsilData && layer.parsilData.nama && layer.parsilData.nama.toLowerCase().includes(query)) {
|
||||
results.push({ type: 'Parsil', nama: layer.parsilData.nama, layer: layer });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof rumahIbadahLayer !== 'undefined') {
|
||||
rumahIbadahLayer.eachLayer(layer => {
|
||||
if (layer.ibadahData && layer.ibadahData.nama && layer.ibadahData.nama.toLowerCase().includes(query)) {
|
||||
if(layer instanceof L.Marker) {
|
||||
results.push({ type: 'Rumah Ibadah', nama: layer.ibadahData.nama, layer: layer });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (results.length === 0) {
|
||||
resultsContainer.innerHTML = '<div style="padding: 10px 15px; color: #666; font-size: 14px;">Tidak ada hasil</div>';
|
||||
} else {
|
||||
results.forEach(res => {
|
||||
const item = document.createElement('div');
|
||||
item.style.padding = '10px 15px';
|
||||
item.style.cursor = 'pointer';
|
||||
item.style.borderBottom = '1px solid #eee';
|
||||
item.style.fontSize = '14px';
|
||||
item.innerHTML = `<strong>${res.type}:</strong> ${res.nama}`;
|
||||
item.addEventListener('mouseenter', () => item.style.backgroundColor = '#f8f9fa');
|
||||
item.addEventListener('mouseleave', () => item.style.backgroundColor = 'white');
|
||||
item.addEventListener('click', () => {
|
||||
if (res.layer instanceof L.Marker) {
|
||||
map.setView(res.layer.getLatLng(), 17);
|
||||
} else if (res.layer.getBounds) {
|
||||
map.fitBounds(res.layer.getBounds());
|
||||
}
|
||||
res.layer.openPopup();
|
||||
resultsContainer.style.display = 'none';
|
||||
});
|
||||
resultsContainer.appendChild(item);
|
||||
});
|
||||
}
|
||||
resultsContainer.style.display = 'block';
|
||||
};
|
||||
|
||||
// UI Logic: Custom Layer Control Toggle
|
||||
const layerBtn = document.getElementById('layerBtn');
|
||||
const layerPanel = document.getElementById('layerPanel');
|
||||
|
||||
layerBtn.addEventListener('click', function() {
|
||||
if (layerPanel.style.display === 'block') {
|
||||
layerPanel.style.display = 'none';
|
||||
} else {
|
||||
layerPanel.style.display = 'block';
|
||||
}
|
||||
});
|
||||
|
||||
// Sembunyikan layer panel saat klik di luar area (pada map)
|
||||
map.on('click', function() {
|
||||
layerPanel.style.display = 'none';
|
||||
});
|
||||
|
||||
// Logic untuk Toggle Layer Visibility
|
||||
document.getElementById('layerSpbu').addEventListener('change', function(e) {
|
||||
e.target.checked ? map.addLayer(spbuLayer) : map.removeLayer(spbuLayer);
|
||||
});
|
||||
document.getElementById('layerJalan').addEventListener('change', function(e) {
|
||||
e.target.checked ? map.addLayer(jalanLayer) : map.removeLayer(jalanLayer);
|
||||
});
|
||||
document.getElementById('layerParsil').addEventListener('change', function(e) {
|
||||
e.target.checked ? map.addLayer(parsilLayer) : map.removeLayer(parsilLayer);
|
||||
});
|
||||
document.getElementById('layerRumahIbadah').addEventListener('change', function(e) {
|
||||
e.target.checked ? map.addLayer(rumahIbadahLayer) : map.removeLayer(rumahIbadahLayer);
|
||||
});
|
||||
document.getElementById('layerMiskin').addEventListener('change', function(e) {
|
||||
e.target.checked ? map.addLayer(pendudukMiskinLayer) : map.removeLayer(pendudukMiskinLayer);
|
||||
});
|
||||
|
||||
// --- Sub-layer Toggle (expand/collapse) ---
|
||||
window.toggleSubLayer = function(subId, iconEl) {
|
||||
const sub = document.getElementById(subId);
|
||||
if (!sub) return;
|
||||
const isHidden = sub.style.display === 'none';
|
||||
sub.style.display = isHidden ? '' : 'none';
|
||||
iconEl.classList.toggle('collapsed', !isHidden);
|
||||
};
|
||||
|
||||
// --- Sub-layer Filter ---
|
||||
window.applySubFilter = function(type) {
|
||||
if (type === 'spbu') {
|
||||
const checked = [...document.querySelectorAll('.sub-spbu:checked')].map(el => el.value);
|
||||
spbuLayer.eachLayer(layer => {
|
||||
if (!layer.spbuData) return;
|
||||
const val = layer.spbuData.is_24_jam ? '1' : '0';
|
||||
if (checked.includes(val)) {
|
||||
if (!spbuLayer.hasLayer(layer)) spbuLayer.addLayer(layer);
|
||||
layer.getElement && layer.getElement() && (layer.getElement().style.display = '');
|
||||
} else {
|
||||
layer.getElement && layer.getElement() && (layer.getElement().style.display = 'none');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (type === 'jalan') {
|
||||
const checked = [...document.querySelectorAll('.sub-jalan:checked')].map(el => el.value);
|
||||
jalanLayer.eachLayer(layer => {
|
||||
if (!layer.jalanData) return;
|
||||
const visible = checked.includes(layer.jalanData.status);
|
||||
const display = visible ? '' : 'none';
|
||||
// Sembunyikan garis polyline
|
||||
if (layer._path) layer._path.style.display = display;
|
||||
// Sembunyikan label teks (leaflet-textpath simpan di _textNode)
|
||||
if (layer._textNode) layer._textNode.style.display = display;
|
||||
});
|
||||
}
|
||||
|
||||
if (type === 'parsil') {
|
||||
const checked = [...document.querySelectorAll('.sub-parsil:checked')].map(el => el.value);
|
||||
parsilLayer.eachLayer(layer => {
|
||||
if (!layer.parsilData) return;
|
||||
if (checked.includes(layer.parsilData.status)) {
|
||||
layer._path && (layer._path.style.display = '');
|
||||
} else {
|
||||
layer._path && (layer._path.style.display = 'none');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (type === 'miskin') {
|
||||
const checked = [...document.querySelectorAll('.sub-miskin:checked')].map(el => el.value);
|
||||
pendudukMiskinLayer.eachLayer(layer => {
|
||||
if (!layer.miskinData) return;
|
||||
if (checked.includes(layer.miskinData.kategori_bantuan)) {
|
||||
layer.getElement && layer.getElement() && (layer.getElement().style.display = '');
|
||||
} else {
|
||||
layer.getElement && layer.getElement() && (layer.getElement().style.display = 'none');
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// --- Modal Logic ---
|
||||
const unifiedModal = document.getElementById('unifiedModal');
|
||||
const modalTitle = document.getElementById('modalTitle');
|
||||
const modalBody = document.getElementById('modalBody');
|
||||
|
||||
window.openModal = function(title, bodyHTML, saveCallback) {
|
||||
modalTitle.textContent = title;
|
||||
modalBody.innerHTML = bodyHTML;
|
||||
unifiedModal.classList.add('show');
|
||||
|
||||
// Ambil elemen tombol save terbaru dari DOM
|
||||
const currentSaveBtn = document.getElementById('modalSaveBtn');
|
||||
|
||||
// Clone untuk menghapus semua event listener lama
|
||||
const newSaveBtn = currentSaveBtn.cloneNode(true);
|
||||
currentSaveBtn.parentNode.replaceChild(newSaveBtn, currentSaveBtn);
|
||||
|
||||
newSaveBtn.addEventListener('click', saveCallback);
|
||||
};
|
||||
|
||||
window.closeModal = function() {
|
||||
unifiedModal.classList.remove('show');
|
||||
};
|
||||
|
||||
const confirmModal = document.getElementById('confirmModal');
|
||||
const confirmMessage = document.getElementById('confirmMessage');
|
||||
|
||||
window.openConfirmModal = function(msg, confirmCallback) {
|
||||
confirmMessage.textContent = msg;
|
||||
confirmModal.classList.add('show');
|
||||
|
||||
const currentYesBtn = document.getElementById('confirmYesBtn');
|
||||
const newYesBtn = currentYesBtn.cloneNode(true);
|
||||
currentYesBtn.parentNode.replaceChild(newYesBtn, currentYesBtn);
|
||||
|
||||
newYesBtn.addEventListener('click', function() {
|
||||
confirmModal.classList.remove('show');
|
||||
confirmCallback();
|
||||
});
|
||||
};
|
||||
|
||||
window.closeConfirmModal = function() {
|
||||
confirmModal.classList.remove('show');
|
||||
};
|
||||
|
||||
// --- Action Menu Logic ---
|
||||
const actionMenuBtn = document.getElementById('actionMenuBtn');
|
||||
const actionMenu = document.getElementById('actionMenu');
|
||||
|
||||
actionMenuBtn.addEventListener('click', function() {
|
||||
if (actionMenu.style.display === 'flex') {
|
||||
actionMenu.style.display = 'none';
|
||||
window.deactivateAddMode();
|
||||
} else {
|
||||
actionMenu.style.display = 'flex';
|
||||
}
|
||||
});
|
||||
|
||||
window.currentAddMode = null; // 'spbu' atau 'rumah_ibadah'
|
||||
window.currentDrawMode = null; // 'polyline' atau 'polygon'
|
||||
|
||||
window.activateAddMode = function(mode) {
|
||||
// Toggle: jika mode yang sama diklik lagi, batalkan
|
||||
if (window.currentAddMode === mode) {
|
||||
window.deactivateAddMode();
|
||||
return;
|
||||
}
|
||||
|
||||
// Reset draw mode if active
|
||||
if (window.activeDrawHandler) {
|
||||
window.activeDrawHandler.disable();
|
||||
window.activeDrawHandler = null;
|
||||
}
|
||||
|
||||
window.currentAddMode = mode;
|
||||
window.currentDrawMode = null;
|
||||
|
||||
// Update button UI
|
||||
document.querySelectorAll('.action-menu button').forEach(btn => btn.classList.remove('active'));
|
||||
|
||||
if (mode === 'spbu') {
|
||||
document.getElementById('btnMenuSpbu').classList.add('active');
|
||||
if (window.cursorTooltip) window.cursorTooltip.textContent = 'Klik untuk Tambah SPBU';
|
||||
}
|
||||
if (mode === 'rumah_ibadah') {
|
||||
document.getElementById('btnMenuIbadah').classList.add('active');
|
||||
if (window.cursorTooltip) window.cursorTooltip.textContent = 'Klik untuk Tambah Rumah Ibadah';
|
||||
}
|
||||
|
||||
// Ubah kursor map menjadi crosshair
|
||||
document.getElementById('map').style.cursor = 'crosshair';
|
||||
};
|
||||
|
||||
window.deactivateAddMode = function() {
|
||||
window.currentAddMode = null;
|
||||
window.currentDrawMode = null;
|
||||
if (window.activeDrawHandler) {
|
||||
window.activeDrawHandler.disable();
|
||||
window.activeDrawHandler = null;
|
||||
}
|
||||
document.querySelectorAll('.action-menu button').forEach(btn => btn.classList.remove('active'));
|
||||
document.getElementById('map').style.cursor = '';
|
||||
if (window.cursorTooltip) window.cursorTooltip.style.display = 'none';
|
||||
};
|
||||
|
||||
// --- Custom Tooltip Cursor ---
|
||||
window.cursorTooltip = document.createElement('div');
|
||||
window.cursorTooltip.className = 'custom-cursor-tooltip';
|
||||
document.body.appendChild(window.cursorTooltip);
|
||||
|
||||
// Gunakan document-level mousemove agar selalu terpicu
|
||||
// bahkan saat Leaflet Draw overlay aktif menangkap event map
|
||||
document.addEventListener('mousemove', function(e) {
|
||||
if (window.currentAddMode || window.currentDrawMode) {
|
||||
window.cursorTooltip.style.display = 'block';
|
||||
window.cursorTooltip.style.left = e.pageX + 15 + 'px';
|
||||
window.cursorTooltip.style.top = e.pageY + 15 + 'px';
|
||||
} else {
|
||||
window.cursorTooltip.style.display = 'none';
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user