raditarahman5-cloud
94 lines
1.9 KiB
HTML
94 lines
1.9 KiB
HTML
<!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> |