37 lines
3.3 KiB
HTML
37 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tugas 1 - WebGIS SPBU</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<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 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);
|
|
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>
|