Upload files to "/"
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user