TaniaYuniar/Pertemuan-1-2-3-4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload files to "Tugas1"

Browse Source
This commit is contained in:
TaniaYuniar
2026-06-11 12:28:29 +00:00
parent 17800461cd
commit e1900090c8
1 changed files with 19 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Tugas1/index.html
+19
View File
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tugas 2 - Jalan dan Tanah</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" />
<style>html,body,#map{height:100%;margin:0;font-family:Arial}.panel{position:absolute;z-index:999;top:14px;left:14px;background:#fff;padding:14px;border-radius:12px;box-shadow:0 4px 18px #0002;width:300px}.back{display:block;color:#0f766e;text-decoration:none;font-weight:bold;margin-bottom:8px}.panel p{font-size:13px;color:#555}.legend{position:absolute;z-index:999;bottom:14px;left:14px;background:white;padding:10px;border-radius:10px;box-shadow:0 4px 18px #0002}</style>
</head>
<body><div id="map"></div><div class="panel"><a class="back" href="../">← Kembali ke Landing Page</a><h3>Tugas 2 - Jalan & Tanah</h3><p>Gunakan toolbar gambar di kiri peta. Polyline disimpan sebagai jalan, polygon disimpan sebagai tanah.</p></div><div class="legend"><span style="color:#e11d48">━━</span> Jalan<br><span style="color:#f59e0b">■</span> Bidang Tanah</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script><script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
<script>
const map=L.map('map').setView([-0.0263,109.3425],12);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19,attribution:'© OpenStreetMap'}).addTo(map);
const jalanLayer=L.layerGroup().addTo(map), tanahLayer=L.layerGroup().addTo(map), drawn=new L.FeatureGroup().addTo(map);
map.addControl(new L.Control.Draw({edit:{featureGroup:drawn},draw:{marker:false,circle:false,circlemarker:false,rectangle:false,polyline:{shapeOptions:{color:'#e11d48',weight:5}},polygon:{allowIntersection:false,shapeOptions:{color:'#f59e0b',fillOpacity:.35}}}}));
map.on(L.Draw.Event.CREATED,e=>{const layer=e.layer; drawn.addLayer(layer); if(e.layerType==='polyline'){const koordinat=JSON.stringify(layer.getLatLngs().map(p=>[p.lat,p.lng])); const panjang=Math.round(layer.getLatLngs().length*100); fetch('../api.php',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'add_jalan',status:'Jalan Kota',panjang,koordinat})}).then(()=>loadData());} if(e.layerType==='polygon'){const latlngs=layer.getLatLngs()[0].map(p=>[p.lat,p.lng]); fetch('../api.php',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'add_tanah',status:'Bidang Tanah',luas:0,koordinat:JSON.stringify(latlngs)})}).then(()=>loadData());}});
function loadData(){jalanLayer.clearLayers();tanahLayer.clearLayers();fetch('../api.php?action=get_jalan').then(r=>r.json()).then(data=>data.forEach(d=>{let k=JSON.parse(d.koordinat);L.polyline(k,{color:'#e11d48',weight:5}).addTo(jalanLayer).bindPopup(`<b>${d.status}</b><br>Panjang: ${d.panjang}<br><button onclick="hapus('jalan',${d.id})">Hapus</button>`)}));fetch('../api.php?action=get_tanah').then(r=>r.json()).then(data=>data.forEach(d=>{let k=JSON.parse(d.koordinat);L.polygon(k,{color:'#f59e0b',fillOpacity:.35}).addTo(tanahLayer).bindPopup(`<b>${d.status}</b><br>Luas: ${d.luas}<br><button onclick="hapus('tanah',${d.id})">Hapus</button>`)}));}
function hapus(type,id){if(!confirm('Hapus data?'))return;fetch('../api.php',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'delete_'+type,id})}).then(()=>loadData())} loadData();
</script></body></html>