484 lines
13 KiB
PHP
484 lines
13 KiB
PHP
<!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> |