Joscelind/WebGis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First Commit

Browse Source
This commit is contained in:
Joscelind
2026-06-09 13:50:00 +07:00
commit bb501dcd8b
12 changed files with 2557 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
02/index.html
+146
View File
@@ -0,0 +1,146 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web GIS Pontianak - SPBU, Jalan & Parsil</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
<style>
html, body { height: 100%; margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
.form-popup { min-width: 200px; padding: 5px; }
.form-popup input, .form-popup select { width: 100%; margin-bottom: 10px; display: block; box-sizing: border-box; }
.form-popup button { width: 100%; cursor: pointer; background: #28a745; color: white; border: none; padding: 8px; border-radius: 4px; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
<script>
const map = L.map('map').setView([-0.055319, 109.349502], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// 1. Setup Ikon
const iconHijau = new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] });
const iconMerah = new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] });
// 2. Setup Leaflet Draw
const drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
const drawControl = new L.Control.Draw({
draw: { polyline: true, polygon: true, marker: true, circle: false, rectangle: false, circlemarker: false },
edit: { featureGroup: drawnItems }
});
map.addControl(drawControl);
// 3. Event Saat Selesai Menggambar
map.on(L.Draw.Event.CREATED, function (e) {
const layer = e.layer;
const type = e.layerType;
const geojson = JSON.stringify(layer.toGeoJSON());
drawnItems.addLayer(layer);
if (type === 'marker') {
const lat = layer.getLatLng().lat;
const lng = layer.getLatLng().lng;
layer.bindPopup(`
<h4>Tambah SPBU</h4>
Nama: <input type="text" id="in_nama"><br>
WA: <input type="text" id="in_wa"><br>
24 Jam: <select id="in_status"><option value="Ya">Ya</option><option value="Tidak">Tidak</option></select><br>
<button onclick="simpanSPBU(${lat}, ${lng})">Simpan</button>
`).openPopup();
}
else if (type === 'polyline') {
const pj = turf.length(layer.toGeoJSON(), {units: 'meters'}).toFixed(2);
layer.bindPopup(`
<h4>Tambah Jalan</h4>
<p>Panjang: ${pj} m</p>
Nama Jalan: <input type="text" id="in_jalan"><br>
Status: <select id="in_s_jalan"><option value="Nasional">Nasional</option><option value="Provinsi">Provinsi</option><option value="Kabupaten">Kabupaten</option></select><br>
<button onclick="simpanJalan('${geojson}', ${pj})">Simpan Jalan</button>
`).openPopup();
}
});
// 4. Fungsi Simpan (HARUS SAMA DENGAN $_POST di ambil.php)
function simpanSPBU(lat, lng) {
const fd = new FormData();
fd.append('nama_spbu', document.getElementById('in_nama').value); // Sesuai PHP
fd.append('no_telp', document.getElementById('in_wa').value); // Sesuai PHP
fd.append('status_24jam', document.getElementById('in_status').value); // Sesuai PHP
fd.append('latitude', lat);
fd.append('longitude', lng);
kirimKeServer(fd);
}
function simpanJalan(gj, pj) {
const fd = new FormData();
fd.append('type', 'jalan');
fd.append('nama_jalan', document.getElementById('in_jalan').value);
fd.append('status_jalan', document.getElementById('in_s_jalan').value);
// PENTING: Di database kamu nama kolomnya 'panjang_m'
// Jadi di PHP nanti kita tangkap sebagai $_POST['panjang_m']
fd.append('panjang_m', pj);
fd.append('geojson', gj);
prosesKirim(fd);
}
function simpanParsil(gj, ls) {
const fd = new FormData();
fd.append('type', 'parsil');
fd.append('pemilik', document.getElementById('n_parsil').value);
fd.append('status_milik', document.getElementById('s_parsil').value);
// PENTING: Di database kamu nama kolomnya 'luas_m2'
fd.append('luas_m2', ls);
fd.append('geojson', gj);
prosesKirim(fd);
}
function kirimKeServer(fd) {
fetch('ambil.php', { method: 'POST', body: fd })
.then(res => res.text())
.then(res => {
alert("Respon: " + res);
location.reload();
});
}
function prosesKirim(fd) {
kirimKeServer(fd);
}
// 5. Muat Data (Bagian B di ambil.php)
function muatData() {
fetch('ambil.php')
.then(res => res.json())
.then(data => {
// Tampilkan SPBU
data.spbu.forEach(s => {
L.marker([s.latitude, s.longitude], {icon: s.status_24jam === 'Ya' ? iconHijau : iconMerah})
.addTo(map).bindPopup(s.nama_spbu);
});
// Tampilkan Jalan
data.jalan.forEach(j => {
L.geoJSON(JSON.parse(j.geojson), {style: {color: 'blue'}}).addTo(map).bindPopup(j.nama_jalan);
});
})
.catch(err => console.error("Error muat data:", err));
}
muatData();
</script>
</body>
</html>