ocabacaa
768 lines
18 KiB
PHP
768 lines
18 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>WebGIS Jalan & Parsil Tanah</title>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css">
|
|
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
#map {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
#sidebar {
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
right: -320px;
|
|
|
|
width: 300px;
|
|
height: 100%;
|
|
|
|
background: #fff;
|
|
|
|
border-left: 1px solid #ddd;
|
|
|
|
z-index: 9999;
|
|
|
|
padding: 20px;
|
|
|
|
transition: .3s;
|
|
|
|
overflow-y: auto;
|
|
|
|
box-shadow: -3px 0 10px rgba(0, 0, 0, .2);
|
|
|
|
}
|
|
|
|
#sidebar label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#sidebar input,
|
|
#sidebar select {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#sidebar button {
|
|
width: 100%;
|
|
}
|
|
|
|
#sidebar h3 {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#sidebar button {
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#sidebar.active {
|
|
right: 0;
|
|
}
|
|
|
|
#sidebar input,
|
|
#sidebar select {
|
|
|
|
width: 100%;
|
|
padding: 8px;
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="map"></div>
|
|
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
|
<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
|
|
|
|
<div id="sidebar">
|
|
<button onclick="tutupSidebar()">
|
|
✖ Tutup
|
|
</button>
|
|
<h3>Edit Data</h3>
|
|
|
|
<input type="hidden" id="edit_id">
|
|
<input type="hidden" id="edit_tipe">
|
|
|
|
<label>Nama / Nomor</label>
|
|
<input type="text" id="edit_nama">
|
|
|
|
<label>Status</label>
|
|
|
|
<select id="edit_status">
|
|
</select>
|
|
|
|
<br><br>
|
|
|
|
<button onclick="simpanEdit()" style="
|
|
background:#2563eb;
|
|
color:white;
|
|
border:none;
|
|
border-radius:5px;
|
|
">
|
|
Simpan Perubahan
|
|
</button>
|
|
|
|
<button onclick="hapusData()" style="
|
|
background:red;
|
|
color:white;
|
|
border:none;
|
|
border-radius:5px;
|
|
margin-top:10px;
|
|
">
|
|
Hapus Data
|
|
</button>
|
|
</div>
|
|
|
|
<script>
|
|
var map = L.map('map').setView([-0.0263, 109.3425], 13);
|
|
|
|
L.tileLayer(
|
|
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap'
|
|
}).addTo(map);
|
|
|
|
var drawnItems = new L.FeatureGroup();
|
|
map.addLayer(drawnItems);
|
|
|
|
var drawControl = new L.Control.Draw({
|
|
edit: {
|
|
featureGroup: drawnItems
|
|
},
|
|
draw: {
|
|
marker: false,
|
|
circle: false,
|
|
rectangle: false,
|
|
circlemarker: false,
|
|
polyline: true,
|
|
polygon: true
|
|
}
|
|
});
|
|
|
|
map.addControl(drawControl);
|
|
|
|
var pontianak = [-0.0263, 109.3425];
|
|
|
|
var homeControl = L.control({
|
|
position: 'topleft'
|
|
});
|
|
|
|
homeControl.onAdd = function() {
|
|
|
|
var div = L.DomUtil.create('div');
|
|
|
|
div.innerHTML =
|
|
'<button style="padding:8px;">🏠 Home</button>';
|
|
|
|
div.onclick = function() {
|
|
map.setView(pontianak, 13);
|
|
};
|
|
|
|
return div;
|
|
};
|
|
|
|
homeControl.addTo(map);
|
|
|
|
|
|
function warnaJalan(status) {
|
|
|
|
if (status == "Jalan Nasional") return "red";
|
|
if (status == "Jalan Provinsi") return "blue";
|
|
if (status == "Jalan Kabupaten") return "green";
|
|
|
|
return "black";
|
|
}
|
|
|
|
function warnaParsil(status) {
|
|
|
|
if (status == "SHM") return "green";
|
|
if (status == "HGB") return "orange";
|
|
if (status == "HGU") return "blue";
|
|
if (status == "HP") return "purple";
|
|
|
|
return "gray";
|
|
}
|
|
|
|
//
|
|
// TAMPILKAN JALAN
|
|
fetch('jalan/tampil.php')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
|
|
data.forEach(item => {
|
|
|
|
var geojson = {
|
|
type: "Feature",
|
|
geometry: JSON.parse(item.geom),
|
|
properties: item
|
|
};
|
|
|
|
var layer = L.geoJSON(geojson, {
|
|
style: {
|
|
color: warnaJalan(item.status_jalan),
|
|
weight: 4
|
|
}
|
|
});
|
|
|
|
layer.eachLayer(function(l) {
|
|
|
|
l.id_data = item.id;
|
|
l.tipe_data = 'jalan';
|
|
|
|
l.bindPopup(
|
|
"<b>Nama Jalan :</b> " + item.nama_jalan +
|
|
"<br><b>Status :</b> " + item.status_jalan +
|
|
"<br><b>Panjang :</b> " +
|
|
parseFloat(item.panjang).toFixed(2) +
|
|
" Meter"
|
|
);
|
|
|
|
drawnItems.addLayer(l);
|
|
l.on('click', function() {
|
|
|
|
document
|
|
.getElementById('sidebar')
|
|
.classList.add('active');
|
|
|
|
document
|
|
.getElementById('edit_id')
|
|
.value = item.id;
|
|
|
|
document
|
|
.getElementById('edit_tipe')
|
|
.value = 'jalan';
|
|
|
|
document
|
|
.getElementById('edit_nama')
|
|
.value = item.nama_jalan;
|
|
|
|
document
|
|
.getElementById('edit_status')
|
|
.innerHTML =
|
|
|
|
'<option>Jalan Nasional</option>' +
|
|
|
|
'<option>Jalan Provinsi</option>' +
|
|
|
|
'<option>Jalan Kabupaten</option>';
|
|
|
|
document
|
|
.getElementById('edit_status')
|
|
.value = item.status_jalan;
|
|
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
// TAMPILKAN PARSIL
|
|
fetch('parsil/tampil.php')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
|
|
data.forEach(item => {
|
|
|
|
var geojson = {
|
|
type: "Feature",
|
|
geometry: JSON.parse(item.geom),
|
|
properties: item
|
|
};
|
|
|
|
var layer = L.geoJSON(geojson, {
|
|
style: {
|
|
color: warnaParsil(item.status_kepemilikan),
|
|
fillOpacity: 0.5
|
|
}
|
|
});
|
|
|
|
layer.eachLayer(function(l) {
|
|
|
|
l.id_data = item.id;
|
|
l.tipe_data = 'parsil';
|
|
|
|
l.bindPopup(
|
|
"<b>Nomor Parsil :</b> " +
|
|
item.nomor_parsil +
|
|
|
|
"<br><b>Status :</b> " +
|
|
item.status_kepemilikan +
|
|
|
|
"<br><b>Luas :</b> " +
|
|
parseFloat(item.luas).toFixed(2) +
|
|
" m²"
|
|
);
|
|
|
|
drawnItems.addLayer(l);
|
|
l.on('click', function() {
|
|
|
|
document
|
|
.getElementById('sidebar')
|
|
.classList.add('active');
|
|
|
|
document
|
|
.getElementById('edit_id')
|
|
.value = item.id;
|
|
|
|
document
|
|
.getElementById('edit_tipe')
|
|
.value = 'parsil';
|
|
|
|
document
|
|
.getElementById('edit_nama')
|
|
.value = item.nomor_parsil;
|
|
|
|
document
|
|
.getElementById('edit_status')
|
|
.innerHTML =
|
|
|
|
'<option>SHM</option>' +
|
|
|
|
'<option>HGB</option>' +
|
|
|
|
'<option>HGU</option>' +
|
|
|
|
'<option>HP</option>';
|
|
|
|
document
|
|
.getElementById('edit_status')
|
|
.value = item.status_kepemilikan;
|
|
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
var layerKecamatan;
|
|
|
|
fetch('assets/geojson/pontianak.geojson')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
|
|
layerKecamatan = L.geoJSON(data, {
|
|
style: {
|
|
color: '#2563eb',
|
|
weight: 2,
|
|
fillColor: '#60a5fa',
|
|
fillOpacity: 0.3
|
|
},
|
|
interactive: false
|
|
});
|
|
|
|
layerKecamatan.addTo(map);
|
|
layerKecamatan.bringToBack();
|
|
});
|
|
|
|
// CREATE //
|
|
map.on(L.Draw.Event.CREATED, function(e) {
|
|
|
|
var layer = e.layer;
|
|
|
|
drawnItems.addLayer(layer);
|
|
|
|
var geojson = layer.toGeoJSON();
|
|
|
|
// JALAN
|
|
if (geojson.geometry.type === "LineString") {
|
|
|
|
var panjang =
|
|
turf.length(
|
|
geojson, {
|
|
units: 'kilometers'
|
|
}
|
|
) * 1000;
|
|
|
|
var namaJalan =
|
|
prompt("Masukkan Nama Jalan");
|
|
|
|
var statusJalan =
|
|
prompt(
|
|
"Masukkan Status Jalan:\n\nJalan Nasional\nJalan Provinsi\nJalan Kabupaten"
|
|
);
|
|
|
|
fetch('jalan/simpan.php', {
|
|
|
|
method: 'POST',
|
|
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
|
|
body: 'nama_jalan=' + encodeURIComponent(namaJalan) +
|
|
'&status_jalan=' + encodeURIComponent(statusJalan) +
|
|
'&panjang=' + encodeURIComponent(panjang) +
|
|
'&geom=' + encodeURIComponent(
|
|
JSON.stringify(
|
|
geojson.geometry
|
|
)
|
|
)
|
|
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
|
|
if (data.success) {
|
|
alert("Data Jalan Berhasil Disimpan");
|
|
location.reload();
|
|
} else {
|
|
alert(data.error);
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
// PARSIL
|
|
if (geojson.geometry.type === "Polygon") {
|
|
|
|
var luas =
|
|
turf.area(geojson);
|
|
|
|
var nomorParsil =
|
|
prompt("Masukkan Nomor Parsil");
|
|
|
|
var statusParsil =
|
|
prompt(
|
|
"Masukkan Status:\n\nSHM\nHGB\nHGU\nHP"
|
|
);
|
|
|
|
fetch('parsil/simpan.php', {
|
|
|
|
method: 'POST',
|
|
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
|
|
body: 'nomor_parsil=' + encodeURIComponent(nomorParsil) +
|
|
'&status=' + encodeURIComponent(statusParsil) +
|
|
'&luas=' + encodeURIComponent(luas) +
|
|
'&geom=' + encodeURIComponent(
|
|
JSON.stringify(
|
|
geojson.geometry
|
|
)
|
|
)
|
|
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
|
|
if (data.success) {
|
|
alert("Data Parsil Berhasil Disimpan");
|
|
location.reload();
|
|
} else {
|
|
alert(data.error);
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
map.on('draw:edited', function(e) {
|
|
|
|
var layers = e.layers;
|
|
|
|
layers.eachLayer(function(layer) {
|
|
|
|
var geojson = layer.toGeoJSON();
|
|
|
|
if (layer.tipe_data == 'jalan') {
|
|
|
|
var panjang =
|
|
turf.length(
|
|
geojson, {
|
|
units: 'kilometers'
|
|
}
|
|
) * 1000;
|
|
|
|
fetch(
|
|
'jalan/update_geom.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
body: 'id=' + layer.id_data +
|
|
'&panjang=' + panjang +
|
|
'&geom=' +
|
|
encodeURIComponent(
|
|
JSON.stringify(
|
|
geojson.geometry
|
|
)
|
|
)
|
|
}
|
|
);
|
|
|
|
}
|
|
|
|
if (layer.tipe_data == 'parsil') {
|
|
|
|
var luas =
|
|
turf.area(
|
|
geojson
|
|
);
|
|
|
|
fetch(
|
|
'parsil/update_geom.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
body: 'id=' + layer.id_data +
|
|
'&luas=' + luas +
|
|
'&geom=' +
|
|
encodeURIComponent(
|
|
JSON.stringify(
|
|
geojson.geometry
|
|
)
|
|
)
|
|
}
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
alert(
|
|
'Geometry berhasil diperbarui'
|
|
);
|
|
|
|
});
|
|
|
|
var legend = L.control({
|
|
position: 'bottomright'
|
|
});
|
|
|
|
function hapusJalan(id) {
|
|
|
|
if (!confirm('Hapus data jalan?')) {
|
|
return;
|
|
}
|
|
|
|
fetch(
|
|
'jalan/hapus.php?id=' + id
|
|
)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
|
|
if (data.success) {
|
|
|
|
alert('Berhasil dihapus');
|
|
|
|
location.reload();
|
|
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
function hapusParsil(id) {
|
|
|
|
if (!confirm('Hapus data parsil?')) {
|
|
return;
|
|
}
|
|
|
|
fetch(
|
|
'parsil/hapus.php?id=' + id
|
|
)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
|
|
if (data.success) {
|
|
|
|
alert('Berhasil dihapus');
|
|
|
|
location.reload();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
function simpanEdit() {
|
|
|
|
var id =
|
|
document.getElementById('edit_id').value;
|
|
|
|
var tipe =
|
|
document.getElementById('edit_tipe').value;
|
|
|
|
var nama =
|
|
document.getElementById('edit_nama').value;
|
|
|
|
var status =
|
|
document.getElementById('edit_status').value;
|
|
|
|
if (tipe == 'jalan') {
|
|
|
|
fetch('jalan/update.php', {
|
|
|
|
method: 'POST',
|
|
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
|
|
body: 'id=' + id +
|
|
'&nama_jalan=' + encodeURIComponent(nama) +
|
|
'&status_jalan=' + encodeURIComponent(status)
|
|
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
|
|
alert('Berhasil');
|
|
|
|
location.reload();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (tipe == 'parsil') {
|
|
|
|
fetch('parsil/update.php', {
|
|
|
|
method: 'POST',
|
|
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
|
|
body: 'id=' + id +
|
|
'&nomor_parsil=' + encodeURIComponent(nama) +
|
|
'&status=' + encodeURIComponent(status)
|
|
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
|
|
alert('Berhasil');
|
|
|
|
location.reload();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function tutupSidebar() {
|
|
|
|
document
|
|
.getElementById('sidebar')
|
|
.classList.remove('active');
|
|
|
|
}
|
|
|
|
function hapusData() {
|
|
|
|
var id =
|
|
document.getElementById('edit_id').value;
|
|
|
|
var tipe =
|
|
document.getElementById('edit_tipe').value;
|
|
|
|
if (!confirm('Yakin hapus data?')) {
|
|
return;
|
|
}
|
|
|
|
if (tipe == 'jalan') {
|
|
|
|
fetch(
|
|
'jalan/hapus.php?id=' + id
|
|
)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
|
|
if (data.success) {
|
|
|
|
alert('Data berhasil dihapus');
|
|
|
|
location.reload();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (tipe == 'parsil') {
|
|
|
|
fetch(
|
|
'parsil/hapus.php?id=' + id
|
|
)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
|
|
if (data.success) {
|
|
|
|
alert('Data berhasil dihapus');
|
|
|
|
location.reload();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
legend.onAdd = function() {
|
|
|
|
var div = L.DomUtil.create('div');
|
|
|
|
div.style.background = 'white';
|
|
div.style.padding = '10px';
|
|
|
|
div.innerHTML =
|
|
|
|
'<b>Jalan</b><br>' +
|
|
|
|
'<span style="color:red">■</span> Nasional<br>' +
|
|
|
|
'<span style="color:blue">■</span> Provinsi<br>' +
|
|
|
|
'<span style="color:green">■</span> Kabupaten<br><br>' +
|
|
|
|
'<b>Parsil</b><br>' +
|
|
|
|
'<span style="color:green">■</span> SHM<br>' +
|
|
|
|
'<span style="color:orange">■</span> HGB<br>' +
|
|
|
|
'<span style="color:blue">■</span> HGU<br>' +
|
|
|
|
'<span style="color:purple">■</span> HP';
|
|
|
|
return div;
|
|
};
|
|
|
|
legend.addTo(map);
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |