146 lines
6.1 KiB
HTML
146 lines
6.1 KiB
HTML
<!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> |