Wilhelmus Ikchan Dwi Putra
100 lines
3.7 KiB
JavaScript
100 lines
3.7 KiB
JavaScript
// 1. Inisialisasi Peta (Koordinat Indonesia sebagai pusat)
|
|
const map = L.map('map').setView([-2.5489, 118.0149], 5);
|
|
|
|
// Tambahkan Basemap OpenStreetMap
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors'
|
|
}).addTo(map);
|
|
|
|
// 2. Variabel Global untuk Menggambar Jalan Baru
|
|
let koordinatJalan = [];
|
|
let layerJalanBaru = L.polyline([], { color: 'black', weight: 4, dashArray: '5, 5' }).addTo(map);
|
|
|
|
// Fungsi Pemberian Warna Berdasarkan Status Jalan
|
|
function dapatkanStyleJalan(status) {
|
|
switch(status) {
|
|
case 'Nasional': return { color: '#FF0000', weight: 5 }; // Merah
|
|
case 'Provinsi': return { color: '#00FF00', weight: 4 }; // Hijau
|
|
case 'Kabupaten': return { color: '#0000FF', weight: 3 }; // Biru
|
|
default: return { color: '#000000', weight: 2 };
|
|
}
|
|
}
|
|
|
|
// 3. Aksi Klik di Atas Peta untuk Menggambar Garis & Hitung Panjang Otomatis
|
|
map.on('click', function(e) {
|
|
let titikBaru = e.latlng;
|
|
koordinatJalan.push(titikBaru);
|
|
layerJalanBaru.setLatLngs(koordinatJalan);
|
|
|
|
// Hitung panjang otomatis dengan fungsi bawaan Leaflet: distanceTo()
|
|
let totalPanjang = 0;
|
|
for (let i = 0; i < koordinatJalan.length - 1; i++) {
|
|
totalPanjang += koordinatJalan[i].distanceTo(koordinatJalan[i+1]);
|
|
}
|
|
|
|
// Tampilkan hasil perhitungan (meter) ke input form
|
|
document.getElementById('panjang_jalan').value = totalPanjang.toFixed(2);
|
|
});
|
|
|
|
// 4. Fungsi Mengirim Data ke Backend (Create)
|
|
function simpanJalan() {
|
|
let nama = document.getElementById('nama_jalan').value;
|
|
let status = document.getElementById('status_jalan').value;
|
|
let panjang = document.getElementById('panjang_jalan').value;
|
|
|
|
if (!nama || koordinatJalan.length < 2) {
|
|
alert("Harap isi nama jalan dan gambar minimal 2 titik di peta!");
|
|
return;
|
|
}
|
|
|
|
// Ubah data polyline Leaflet menjadi format GeoJSON sesuai perintah dosen
|
|
let geojsonData = JSON.stringify(layerJalanBaru.toGeoJSON().geometry);
|
|
|
|
// Kirim menggunakan Fetch API (AJAX)
|
|
fetch('simpan_jalan.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `nama=${encodeURIComponent(nama)}&status=${status}&panjang=${panjang}&geom=${encodeURIComponent(geojsonData)}`
|
|
})
|
|
.then(res => res.text())
|
|
.then(data => {
|
|
if (data.trim() === "Sukses") {
|
|
alert("Data jalan berhasil disimpan!");
|
|
location.reload(); // Refresh halaman untuk melihat hasilnya
|
|
} else {
|
|
alert("Gagal menyimpan: " + data);
|
|
}
|
|
});
|
|
}
|
|
|
|
// 5. Mengambil Data dari Database dan Menampilkan ke Peta (Read)
|
|
fetch('ambil_jalan.php')
|
|
.then(res => res.json())
|
|
.then(dataJalan => {
|
|
dataJalan.forEach(function(jalan) {
|
|
// Ubah string teks geom dari DB kembali menjadi objek JSON
|
|
let geometri = JSON.parse(jalan.geom);
|
|
|
|
// Bungkus ke dalam format Feature GeoJSON standar
|
|
let geojsonFeature = {
|
|
"type": "Feature",
|
|
"geometry": geometri,
|
|
"properties": {
|
|
"nama": jalan.nama_jalan,
|
|
"status": jalan.status_jalan,
|
|
"panjang": jalan.panjang_jalan
|
|
}
|
|
};
|
|
|
|
// Render ke peta dengan warna dinamis sesuai status
|
|
L.geoJSON(geojsonFeature, {
|
|
style: function(feature) {
|
|
return dapatkanStyleJalan(feature.properties.status);
|
|
}
|
|
}).bindPopup(`
|
|
<b>Nama Jalan:</b> ${jalan.nama_jalan}<br>
|
|
<b>Status:</b> Jalan ${jalan.status_jalan}<br>
|
|
<b>Panjang:</b> ${jalan.panjang_jalan} Meter
|
|
`).addTo(map);
|
|
});
|
|
}); |