cclwnrty/D1041231092-webgis-spbu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload files to "/"

Browse Source
This commit is contained in:
cclwnrty
2026-06-10 21:03:41 +00:00
parent fc05509c20
commit 036135d48d
5 changed files with 2180 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
batas_kecamatan.geojson
+19
View File
File diff suppressed because one or more lines are too long
hapus.php
+13
View File
@@ -0,0 +1,13 @@
<?php
include 'koneksi.php';
$id = $_POST['id'];
$query = "DELETE FROM spbu WHERE id='$id'";
if(mysqli_query($conn, $query)){
echo "success";
}else{
echo "error";
}
?>
index.php
+484
View File
@@ -0,0 +1,484 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WebGIS SPBU</title>
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<!-- Leaflet Draw -->
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css"/>
<script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
<!-- Geometry -->
<script src="https://unpkg.com/leaflet-geometryutil"></script>
<style>
html, body { height: 100%; margin: 0; }
#map { width: 100%; height: 100%; }
.leaflet-popup-content input,
.leaflet-popup-content select { width: 100%; margin-bottom: 5px; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// ==========================
// INIT MAP
// ==========================
const map = L.map('map').setView([-0.0263, 109.3425], 15);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19
}).addTo(map);
var layerSPBU24 = L.layerGroup();
var layerSPBUTidak24 = L.layerGroup();
// ==========================
// ICON SPBU
// ==========================
var iconHijau = new L.Icon({
iconUrl: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png',
iconSize: [32,32]
});
var iconMerah = new L.Icon({
iconUrl: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png',
iconSize: [32,32]
});
// ==========================
// DRAW GROUP
// ==========================
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
// ==========================
// DRAW CONTROL
// ==========================
var drawControl = new L.Control.Draw({
position: 'bottomleft',
draw: {
marker: true,
polyline: true,
polygon: true,
rectangle: false,
circle: false,
circlemarker: false
},
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
// ==========================
// WARNA
// ==========================
var warnaJalan = {
"Nasional": "red",
"Provinsi": "blue",
"Kabupaten": "green"
};
var warnaTanah = {
"SHM": "green",
"HGB": "blue",
"HGU": "orange",
"HP": "purple"
};
// ==========================
// HITUNG PANJANG
// ==========================
function hitungPanjang(latlngs){
let total = 0;
for(let i=0; i < latlngs.length - 1; i++){
total += map.distance(latlngs[i], latlngs[i+1]);
}
return total;
}
// ==========================
// HITUNG LUAS
// ==========================
function hitungLuas(latlngs){
return L.GeometryUtil.geodesicArea(latlngs[0]);
}
// ==========================
// FORM SPBU
// ==========================
function formTambah(lat, lng){
return `
<form id="formTambah">
<b>Tambah SPBU</b><br>
Nama:
<input type="text" name="nama_spbu" required>
No WA:
<input type="text" name="no_wa" required>
24 Jam:
<select name="buka_24jam">
<option value="Ya">Ya</option>
<option value="Tidak">Tidak</option>
</select>
<input type="hidden" name="latitude" value="${lat}">
<input type="hidden" name="longitude" value="${lng}">
<button type="submit">Simpan</button>
</form>`;
}
// ==========================
// EVENT DRAW
// ==========================
map.on(L.Draw.Event.CREATED, function (e) {
var layer = e.layer;
drawnItems.addLayer(layer);
var type = e.layerType;
// ======================
// MARKER (SPBU)
// ======================
if (type === 'marker') {
var latlng = layer.getLatLng();
L.popup()
.setLatLng(latlng)
.setContent(formTambah(latlng.lat, latlng.lng))
.openOn(map);
setTimeout(() => {
document.getElementById("formTambah").addEventListener("submit", function(ev){
ev.preventDefault();
fetch("simpan.php", {
method: "POST",
body: new FormData(this)
})
.then(() => {
alert("SPBU tersimpan!");
location.reload();
});
});
}, 100);
}
// ======================
// JALAN
// ======================
if(type === 'polyline'){
var latlngs = layer.getLatLngs();
var panjang = hitungPanjang(latlngs);
var form = `
<form id="formJalan">
Nama Jalan:
<input type="text" name="nama_jalan" required>
Status:
<select name="status_jalan">
<option>Nasional</option>
<option>Provinsi</option>
<option>Kabupaten</option>
</select>
Panjang: ${panjang.toFixed(2)} meter
<input type="hidden" name="panjang" value="${panjang}">
<input type="hidden" name="geometry" value='${JSON.stringify(latlngs)}'>
<button type="submit">Simpan</button>
</form>`;
L.popup().setLatLng(latlngs[0]).setContent(form).openOn(map);
setTimeout(() => {
document.getElementById("formJalan").addEventListener("submit", function(e){
e.preventDefault();
var status = this.status_jalan.value;
layer.setStyle({ color: warnaJalan[status] });
layer.bindPopup(`
<div style="font-size:14px">
<b>${this.nama_jalan.value}</b><br>
<hr>
Status: ${status}<br>
Panjang: ${parseFloat(this.panjang.value).toFixed(2)} meter
</div>
`);
fetch("simpan_jalan.php", {
method: "POST",
body: new FormData(this)
})
.then(() => {
alert("Jalan tersimpan!");
location.reload();
});
});
}, 100);
}
// ======================
// PARSIL
// ======================
if(type === 'polygon'){
var latlngs = layer.getLatLngs();
var luas = hitungLuas(latlngs);
var form = `
<form id="formParsil">
Status Tanah:
<select name="status_tanah">
<option>SHM</option>
<option>HGB</option>
<option>HGU</option>
<option>HP</option>
</select>
Luas: ${luas.toFixed(2)} m²
<input type="hidden" name="luas" value="${luas}">
<input type="hidden" name="geometry" value='${JSON.stringify(latlngs)}'>
<button type="submit">Simpan</button>
</form>`;
L.popup().setLatLng(latlngs[0][0]).setContent(form).openOn(map);
setTimeout(() => {
document.getElementById("formParsil").addEventListener("submit", function(e){
e.preventDefault();
var status = this.status_tanah.value;
layer.setStyle({ color: warnaTanah[status] });
layer.bindPopup(`
Status: ${status}<br>
Luas: ${parseFloat(this.luas.value).toFixed(2)} m²
`);
fetch("simpan_parsil.php", {
method: "POST",
body: new FormData(this)
})
.then(() => {
alert("Parsil tersimpan!");
location.reload();
});
});
}, 100);
}
});
// ==========================
// KLIK MAP SPBU
// ==========================
map.on('click', function(e){
if (map._toolbars.draw && map._toolbars.draw._activeMode) return;
L.popup()
.setLatLng(e.latlng)
.setContent(formTambah(e.latlng.lat, e.latlng.lng))
.openOn(map);
setTimeout(() => {
document.getElementById("formTambah").addEventListener("submit", function(ev){
ev.preventDefault();
fetch("simpan.php", {
method: "POST",
body: new FormData(this)
})
.then(() => {
alert("SPBU tersimpan!");
location.reload();
});
});
}, 100);
});
// ==========================
// LOAD SPBU
// ==========================
fetch("ambil_data.php")
.then(res => res.json())
.then(data => {
data.forEach(function(d){
var icon = (d.buka_24jam === "Ya") ? iconHijau : iconMerah;
var marker = L.marker([d.latitude, d.longitude], {
icon: icon,
draggable: true
})
.bindPopup(`<b>${d.nama_spbu}</b><br>${d.no_wa}`);
marker.on('dragend', function(e){
var pos = e.target.getLatLng();
fetch("update_lokasi.php", {
method: "POST",
body: new URLSearchParams({
id: d.id,
latitude: pos.lat,
longitude: pos.lng
})
})
.then(res => res.text())
.then(result => {
if(result === "success"){
alert("Lokasi SPBU berhasil diperbarui!");
} else {
alert("Gagal memperbarui lokasi.");
}
});
});
if(d.buka_24jam === "Ya"){
layerSPBU24.addLayer(marker);
} else {
layerSPBUTidak24.addLayer(marker);
}
});
// ← PINDAH KE SINI (dalam .then)
layerSPBU24.addTo(map);
layerSPBUTidak24.addTo(map);
var overlayMaps = {
"SPBU 24 Jam": layerSPBU24,
"SPBU Tidak 24 Jam": layerSPBUTidak24
};
L.control.layers(null, overlayMaps).addTo(map);
});
// ==========================
// LOAD JALAN
// ==========================
fetch("ambil_jalan.php")
.then(res => res.json())
.then(data => {
data.forEach(function(d){
var geo = JSON.parse(d.geometry);
var line = L.polyline(geo, {
color: warnaJalan[d.status_jalan]
}).bindPopup(`
<b>${d.nama_jalan}</b><br>
Status: ${d.status_jalan}<br>
Panjang: ${parseFloat(d.panjang).toFixed(2)} meter
`);
drawnItems.addLayer(line);
});
});
// ==========================
// LOAD PARSIL
// ==========================
fetch("ambil_parsil.php")
.then(res => res.json())
.then(data => {
data.forEach(function(d){
var geo = JSON.parse(d.geometry);
var poly = L.polygon(geo, {
color: warnaTanah[d.status_tanah]
}).bindPopup(`
Status: ${d.status_tanah}<br>
Luas: ${parseFloat(d.luas).toFixed(2)} m²
`);
drawnItems.addLayer(poly);
});
});
fetch("admin_kecamatan_fix.geojson")
.then(res => res.json())
.then(data => {
var layerKecamatan = L.geoJSON(data, {
style: function(feature){
var kec = feature.properties.Ket;
if(kec === "Pontianak Barat") return {color: "#333", fillColor: "red", fillOpacity: 0.4};
if(kec === "Pontianak Timur") return {color: "#333", fillColor: "blue", fillOpacity: 0.4};
if(kec === "Pontianak Selatan") return {color: "#333", fillColor: "green", fillOpacity: 0.4};
if(kec === "Pontianak Utara") return {color: "#333", fillColor: "orange", fillOpacity: 0.4};
if(kec === "Pontianak Kota") return {color: "#333", fillColor: "purple", fillOpacity: 0.4};
if(kec === "Pontianak Tenggara") return {color: "#333", fillColor: "pink", fillOpacity: 0.4};
},
onEachFeature: function(feature, layer){
layer.bindPopup("admin_kecamatan_fix: " + feature.properties.Ket);
}
}).addTo(map);
});
fetch("batas_kecamatan.geojson")
.then(res => res.json())
.then(data => {
L.geoJSON(data, {
style: {
color: "red",
fillOpacity: 0.1
}
}).addTo(map);
});
fetch("jaringan_jalan.geojson")
.then(res => res.json())
.then(data => {
L.geoJSON(data, {
style: {
color: "black",
fillOpacity: 0.1
}
}).addTo(map);
});
fetch("sungai_besar.geojson")
.then(res => res.json())
.then(data => {
L.geoJSON(data, {
style: {
color: "darkblue",
fillOpacity: 0.1
}
}).addTo(map);
});
fetch("sungai.geojson")
.then(res => res.json())
.then(data => {
L.geoJSON(data, {
style: {
color: "blue",
fillOpacity: 0.1
}
}).addTo(map);
});
</script>
</body>
</html>
jaringan_jalan.geojson
+1657
View File
File diff suppressed because one or more lines are too long
koneksi.php
+7
View File
@@ -0,0 +1,7 @@
<?php
$conn = mysqli_connect("localhost", "root", "", "webgis");
if (!$conn) {
die("Koneksi gagal: " . mysqli_connect_error());
}
?>