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:30:21 +00:00
parent e1900090c8
commit b4de6bf393
1 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Tugas1/index.html
+29 -12
View File
@@ -2,18 +2,35 @@
<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>
<title>Tugas 1 - WebGIS SPBU</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>
<style>
html,body,#map{height:100%;margin:0;font-family:Arial,sans-serif}.panel{position:absolute;z-index:999;top:14px;left:14px;background:white;padding:14px;border-radius:12px;box-shadow:0 4px 18px #0002;width:280px}.panel h3{margin:0 0 8px}.panel input,.panel select,.panel button{width:100%;padding:8px;margin:6px 0;border:1px solid #ddd;border-radius:8px}.panel button{background:#0f766e;color:white;border:0;font-weight:bold;cursor:pointer}.back{display:block;text-decoration:none;color:#0f766e;margin-bottom:10px;font-weight:bold}.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>
<body>
<div id="map"></div>
<div class="panel">
<a class="back" href="../">← Kembali ke Landing Page</a>
<h3>Tugas 1 - Pemetaan SPBU</h3>
<p style="font-size:13px;color:#555">Klik peta untuk menambah marker SPBU.</p>
<input id="nama" placeholder="Nama SPBU">
<input id="hp" placeholder="No HP/Keterangan">
<select id="buka"><option value="1">Buka 24 Jam</option><option value="0">Tidak 24 Jam</option></select>
<button onclick="simpanDariForm()">Simpan di Titik Terakhir</button>
</div>
<div class="legend">⛽ Hijau: 24 jam<br>⛽ Merah: tidak 24 jam</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.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>
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);
let titikTerakhir=null, layer=L.layerGroup().addTo(map);
function icon(buka){return L.divIcon({html:`<div style="background:${buka==1?'#16a34a':'#dc2626'};color:white;border-radius:20px;padding:7px;border:2px solid white;box-shadow:0 2px 8px #0005">⛽</div>`,className:'',iconSize:[34,34],iconAnchor:[17,17]});}
map.on('click',e=>{titikTerakhir=e.latlng;L.popup().setLatLng(e.latlng).setContent('Titik dipilih. Isi form lalu simpan.').openOn(map)});
function simpanDariForm(){if(!titikTerakhir)return alert('Klik titik lokasi SPBU di peta dulu.'); const nama=document.getElementById('nama').value.trim(); if(!nama)return alert('Nama SPBU wajib diisi.'); fetch('../api.php',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'add_spbu',nama,hp:document.getElementById('hp').value,buka:parseInt(document.getElementById('buka').value),lat:titikTerakhir.lat,lng:titikTerakhir.lng})}).then(r=>r.json()).then(()=>{loadData();alert('SPBU tersimpan');});}
function loadData(){layer.clearLayers();fetch('../api.php?action=get_spbu').then(r=>r.json()).then(data=>{data.forEach(d=>{L.marker([d.lat,d.lng],{icon:icon(d.buka)}).addTo(layer).bindPopup(`<b>${d.nama}</b><br>${d.hp||''}<br>Status: ${d.buka==1?'Buka 24 Jam':'Tidak 24 Jam'}<br><button onclick="hapus(${d.id})">Hapus</button>`);});});}
function hapus(id){if(!confirm('Hapus data ini?'))return;fetch('../api.php',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'delete_spbu',id})}).then(()=>loadData());}
loadData();
</script>
</body>
</html>