first commit UasSIGWebgis

2026-06-09 18:19:10 +07:00
commit 6d0b24d2fe
25 changed files with 4616 additions and 0 deletions
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+<meta charset="UTF-8">
+<title>WebGIS Kemiskinan</title>
+
+<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
+
+<style>
+body { margin:0; font-family:sans-serif; }
+#map { height:100vh; }
+
+#formBox {
+    position:absolute;
+    top:80px;
+    right:20px;
+    width:300px;
+    background:#1e1e1e;
+    color:white;
+    padding:15px;
+    border-radius:12px;
+    display:none;
+}
+</style>
+</head>
+
+<body>
+
+<div id="map"></div>
+
+<div id="formBox">
+<h3>Input Warga</h3>
+<input type="text" id="nama" placeholder="Nama">
+<textarea id="alamat"></textarea>
+<input type="number" id="penghasilan">
+
+<input type="hidden" id="lat">
+<input type="hidden" id="lng">
+
+<button onclick="simpanData()">Simpan</button>
+</div>
+
+<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+
+<script>
+var map = L.map('map').setView([-0.0263,109.3425],13);
+
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+
+// LOAD DATA
+fetch('api.php?action=get_data')
+.then(r=>r.json())
+.then(res=>{
+    res.warga.forEach(d=>{
+        L.marker([d.latitude,d.longitude]).addTo(map)
+        .bindPopup(d.nama);
+    });
+
+    res.ibadah.forEach(r=>{
+        L.marker([r.latitude,r.longitude]).addTo(map)
+        .bindPopup(r.nama);
+    });
+});
+
+// TAMBAH DATA
+map.on('contextmenu',function(e){
+    formBox.style.display="block";
+    lat.value = e.latlng.lat;
+    lng.value = e.latlng.lng;
+});
+
+// SIMPAN
+function simpanData(){
+    var fd = new FormData();
+    fd.append("action","simpan");
+    fd.append("nama",nama.value);
+    fd.append("alamat",alamat.value);
+    fd.append("penghasilan",penghasilan.value);
+    fd.append("lat",lat.value);
+    fd.append("lng",lng.value);
+
+    fetch('api.php',{method:'POST',body:fd})
+    .then(r=>r.json())
+    .then(res=>{
+        if(res.status=="success"){
+            alert("Berhasil!");
+            location.reload();
+        }
+    });
+}
+</script>
+
+</body>
+</html>