117 lines
7.7 KiB
HTML
117 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Tugas 2 - Jalan dan Kavling</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geometryutil/0.10.2/leaflet.geometryutil.min.js"></script>
|
|
<style>
|
|
html, body {height:100%; margin:0; font-family: Arial, Helvetica, sans-serif;}
|
|
#map {height:100%;}
|
|
input, select {width:100%; margin-bottom:5px; padding:4px;}
|
|
button {margin-top:5px; cursor:pointer;}
|
|
.back-link {
|
|
position: fixed; z-index: 9999; left: 12px; top: 12px;
|
|
background: white; color: #111827; padding: 9px 12px;
|
|
border-radius: 10px; text-decoration: none; font-weight: 700;
|
|
box-shadow: 0 3px 14px rgba(0,0,0,.18); font-size: 13px;
|
|
}
|
|
.legend { background:white; padding:10px; line-height:18px; color:#333; border-radius:5px; box-shadow:0 0 5px rgba(0,0,0,.3); }
|
|
.legend i { width:18px; height:18px; float:left; margin-right:8px; opacity:.8; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a class="back-link" href="../">← Landing Page</a>
|
|
<div id="map"></div>
|
|
<script>
|
|
const map = L.map('map').setView([-0.02, 109.34], 13);
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
|
|
|
|
const drawnItems=new L.FeatureGroup();
|
|
map.addLayer(drawnItems);
|
|
const drawControl=new L.Control.Draw({ edit:{featureGroup:drawnItems}, draw:{marker:false,polyline:true,polygon:true,circle:false,circlemarker:false,rectangle:false} });
|
|
map.addControl(drawControl);
|
|
|
|
function formJalan(latlngs){
|
|
return `<b>Input Jalan</b><br>Nama:<input id="nama_jalan"><br>Status:<select id="status_jalan"><option>Nasional</option><option>Provinsi</option><option>Kabupaten</option></select><br><button onclick='simpanJalan(${JSON.stringify(latlngs)})'>Simpan</button>`;
|
|
}
|
|
function formKavling(latlngs){
|
|
return `<b>Input Kavling</b><br>Pemilik:<input id="pemilik"><br>Status:<select id="status_kavling"><option>SHM</option><option>HGB</option><option>HGU</option><option>HP</option></select><br><button onclick='simpanKavling(${JSON.stringify(latlngs)})'>Simpan</button>`;
|
|
}
|
|
|
|
map.on(L.Draw.Event.CREATED,function(e){
|
|
const layer=e.layer; drawnItems.addLayer(layer);
|
|
if(e.layerType==='polyline'){
|
|
const latlngs=layer.getLatLngs();
|
|
L.popup().setLatLng(layer.getBounds().getCenter()).setContent(formJalan(latlngs)).openOn(map);
|
|
}
|
|
if(e.layerType==='polygon'){
|
|
const latlngs=layer.getLatLngs()[0];
|
|
L.popup().setLatLng(layer.getBounds().getCenter()).setContent(formKavling(latlngs)).openOn(map);
|
|
}
|
|
});
|
|
|
|
function simpanJalan(latlngs){
|
|
const nama=document.getElementById('nama_jalan').value;
|
|
const status=document.getElementById('status_jalan').value;
|
|
let panjang=0;
|
|
for(let i=0;i<latlngs.length-1;i++) panjang+=map.distance(latlngs[i],latlngs[i+1]);
|
|
fetch('../simpan_jalan.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:`nama=${encodeURIComponent(nama)}&status=${encodeURIComponent(status)}&panjang=${panjang}&geom=${encodeURIComponent(JSON.stringify(latlngs))}`}).then(()=>location.reload());
|
|
}
|
|
|
|
function simpanKavling(latlngs){
|
|
const pemilik=document.getElementById('pemilik').value;
|
|
const status=document.getElementById('status_kavling').value;
|
|
let luas=L.GeometryUtil.geodesicArea(latlngs);
|
|
fetch('../simpan_kavling.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:`pemilik=${encodeURIComponent(pemilik)}&status=${encodeURIComponent(status)}&luas=${luas}&geom=${encodeURIComponent(JSON.stringify(latlngs))}`}).then(()=>location.reload());
|
|
}
|
|
|
|
fetch('../ambil_jalan.php').then(res=>res.json()).then(data=>{
|
|
data.forEach(d=>{
|
|
const coords=JSON.parse(d.geom);
|
|
let warna='blue'; if(d.status=='Nasional') warna='red'; if(d.status=='Provinsi') warna='green'; if(d.status=='Kabupaten') warna='orange';
|
|
L.polyline(coords,{color:warna}).addTo(map).bindPopup(`<b>${d.nama}</b><br>Status: Jalan ${d.status}<br>Panjang: ${parseFloat(d.panjang).toFixed(2)} meter<br><br><button onclick="editJalan(${d.id},'${String(d.nama).replace(/'/g,'')}','${d.status}',${coords[0].lat},${coords[0].lng})">Edit</button><button onclick="hapusJalan(${d.id})">Hapus</button>`);
|
|
});
|
|
});
|
|
|
|
fetch('../ambil_kavling.php').then(res=>res.json()).then(data=>{
|
|
data.forEach(d=>{
|
|
const coords=JSON.parse(d.geom);
|
|
let warna='purple'; if(d.status=='SHM') warna='green'; if(d.status=='HGB') warna='blue'; if(d.status=='HGU') warna='orange'; if(d.status=='HP') warna='red';
|
|
L.polygon(coords,{color:warna}).addTo(map).bindPopup(`<b>${d.pemilik}</b><br>Status: ${d.status}<br>Luas: ${parseFloat(d.luas).toFixed(2)} m²<br><br><button onclick="editKavling(${d.id},'${String(d.pemilik).replace(/'/g,'')}','${d.status}',${coords[0].lat},${coords[0].lng})">Edit</button><button onclick="hapusKavling(${d.id})">Hapus</button>`);
|
|
});
|
|
});
|
|
|
|
function editJalan(id,nama,status,lat,lng){
|
|
const form=`<b>Edit Jalan</b><br>Nama:<input id="nama_jalan" value="${nama}"><br><select id="status_jalan"><option ${status=='Nasional'?'selected':''}>Nasional</option><option ${status=='Provinsi'?'selected':''}>Provinsi</option><option ${status=='Kabupaten'?'selected':''}>Kabupaten</option></select><br><button onclick="updateJalan(${id})">Update</button>`;
|
|
L.popup().setLatLng([lat,lng]).setContent(form).openOn(map);
|
|
}
|
|
function updateJalan(id){
|
|
const nama=document.getElementById('nama_jalan').value;
|
|
const status=document.getElementById('status_jalan').value;
|
|
fetch('../update_jalan.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:`id=${id}&nama=${encodeURIComponent(nama)}&status=${encodeURIComponent(status)}`}).then(()=>location.reload());
|
|
}
|
|
function hapusJalan(id){ if(confirm('Hapus jalan?')) fetch('../hapus_jalan.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:`id=${id}`}).then(()=>location.reload()); }
|
|
|
|
function editKavling(id,pemilik,status,lat,lng){
|
|
const form=`<b>Edit Kavling</b><br>Pemilik:<input id="pemilik" value="${pemilik}"><br><select id="status_kavling"><option ${status=='SHM'?'selected':''}>SHM</option><option ${status=='HGB'?'selected':''}>HGB</option><option ${status=='HGU'?'selected':''}>HGU</option><option ${status=='HP'?'selected':''}>HP</option></select><br><button onclick="updateKavling(${id})">Update</button>`;
|
|
L.popup().setLatLng([lat,lng]).setContent(form).openOn(map);
|
|
}
|
|
function updateKavling(id){
|
|
const pemilik=document.getElementById('pemilik').value;
|
|
const status=document.getElementById('status_kavling').value;
|
|
fetch('../update_kavling.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:`id=${id}&pemilik=${encodeURIComponent(pemilik)}&status=${encodeURIComponent(status)}`}).then(()=>location.reload());
|
|
}
|
|
function hapusKavling(id){ if(confirm('Hapus kavling?')) fetch('../hapus_kavling.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:`id=${id}`}).then(()=>location.reload()); }
|
|
|
|
const legend = L.control({position:'bottomright'});
|
|
legend.onAdd=function(){ const div=L.DomUtil.create('div','legend'); div.innerHTML='<b>Legenda</b><br><b>Jalan</b><br><i style="background:red"></i> Nasional<br><i style="background:green"></i> Provinsi<br><i style="background:orange"></i> Kabupaten<br><br><b>Kavling</b><br><i style="background:green"></i> SHM<br><i style="background:blue"></i> HGB<br><i style="background:orange"></i> HGU<br><i style="background:red"></i> HP'; return div; };
|
|
legend.addTo(map);
|
|
</script>
|
|
</body>
|
|
</html>
|