321 lines
7.8 KiB
PHP
321 lines
7.8 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>WebGIS Jalan & Tanah</title>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css"/>
|
|
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
<script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
<style>
|
|
#map { height: 100vh; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<input type="text" id="search" placeholder="Cari data..."
|
|
style="position:absolute; top:10px; left:50px; z-index:1000; padding:8px;">
|
|
<div id="map"></div>
|
|
|
|
<script>
|
|
|
|
// ================= MAP =================
|
|
var map = L.map('map').setView([-0.0553538229, 109.3495577035], 13);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
|
|
|
|
// ================= DRAW =================
|
|
var drawnItems = new L.FeatureGroup();
|
|
map.addLayer(drawnItems);
|
|
|
|
var drawControl = new L.Control.Draw({
|
|
draw: {
|
|
polyline: true,
|
|
polygon: true,
|
|
marker: true,
|
|
circle: false,
|
|
rectangle: false
|
|
},
|
|
edit: {
|
|
featureGroup: drawnItems
|
|
}
|
|
});
|
|
map.addControl(drawControl);
|
|
|
|
// ================= EVENT DRAW =================
|
|
map.on(L.Draw.Event.CREATED, function (e) {
|
|
|
|
var layer = e.layer;
|
|
drawnItems.addLayer(layer);
|
|
|
|
var geojson = layer.toGeoJSON();
|
|
|
|
// ===== JALAN =====
|
|
if (e.layerType === 'polyline') {
|
|
|
|
var latlngs = layer.getLatLngs();
|
|
var panjang = 0;
|
|
|
|
for (var i=0; i<latlngs.length-1; i++) {
|
|
panjang += latlngs[i].distanceTo(latlngs[i+1]);
|
|
}
|
|
|
|
var form = `
|
|
<form id="formJalan">
|
|
Nama Jalan:<br>
|
|
<input type="text" name="nama_jalan" required><br><br>
|
|
|
|
Status:<br>
|
|
<select name="status">
|
|
<option value="nasional">Nasional</option>
|
|
<option value="provinsi">Provinsi</option>
|
|
<option value="kabupaten">Kabupaten</option>
|
|
</select><br><br>
|
|
|
|
<b>Panjang: ${panjang.toFixed(2)} meter</b><br><br>
|
|
|
|
<input type="hidden" name="panjang" value="${panjang}">
|
|
<input type="hidden" name="geom" value='${JSON.stringify(geojson)}'>
|
|
|
|
<button type="submit">Simpan Jalan</button>
|
|
</form>
|
|
`;
|
|
|
|
layer.bindPopup(form).openPopup();
|
|
}
|
|
|
|
// ===== TANAH =====
|
|
if (e.layerType === 'polygon') {
|
|
|
|
var luas = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
|
|
|
|
var form = `
|
|
<form id="formTanah">
|
|
Nama Pemilik:<br>
|
|
<input type="text" name="nama_pemilik" required><br><br>
|
|
|
|
Status:<br>
|
|
<select name="status">
|
|
<option value="SHM">SHM</option>
|
|
<option value="HGB">HGB</option>
|
|
<option value="HGU">HGU</option>
|
|
<option value="HP">HP</option>
|
|
</select><br><br>
|
|
|
|
<b>Luas: ${luas.toFixed(2)} m²</b><br><br>
|
|
|
|
<input type="hidden" name="luas" value="${luas}">
|
|
<input type="hidden" name="geom" value='${JSON.stringify(geojson)}'>
|
|
|
|
<button type="submit">Simpan Tanah</button>
|
|
</form>
|
|
`;
|
|
|
|
layer.bindPopup(form).openPopup();
|
|
}
|
|
|
|
// ===== TITIK RUSAK =====
|
|
if (e.layerType === 'marker') {
|
|
|
|
var latlng = layer.getLatLng();
|
|
|
|
var form = `
|
|
<form id="formRusak">
|
|
Nama Jalan:<br>
|
|
<input type="text" name="nama" required><br><br>
|
|
|
|
Keterangan:<br>
|
|
<textarea name="keterangan"></textarea><br><br>
|
|
|
|
<input type="hidden" name="lat" value="${latlng.lat}">
|
|
<input type="hidden" name="lng" value="${latlng.lng}">
|
|
|
|
<button type="submit">Simpan Titik Rusak</button>
|
|
</form>
|
|
`;
|
|
|
|
layer.bindPopup(form).openPopup();
|
|
}
|
|
|
|
});
|
|
|
|
// ================= SIMPAN =================
|
|
|
|
// jalan
|
|
$(document).on('submit','#formJalan', function(e){
|
|
e.preventDefault();
|
|
var formData = new FormData(this);
|
|
formData.append("tipe","jalan");
|
|
|
|
$.ajax({
|
|
url: "simpan.php",
|
|
type: "POST",
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function(res){
|
|
if(res.trim()=="success"){
|
|
alert("Jalan disimpan");
|
|
location.reload();
|
|
}else{
|
|
alert(res);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// tanah
|
|
$(document).on('submit','#formTanah', function(e){
|
|
e.preventDefault();
|
|
var formData = new FormData(this);
|
|
formData.append("tipe","tanah");
|
|
|
|
$.ajax({
|
|
url: "simpan.php",
|
|
type: "POST",
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function(res){
|
|
if(res.trim()=="success"){
|
|
alert("Tanah disimpan");
|
|
location.reload();
|
|
}else{
|
|
alert(res);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// rusak
|
|
$(document).on('submit','#formRusak', function(e){
|
|
e.preventDefault();
|
|
var formData = new FormData(this);
|
|
formData.append("tipe","rusak");
|
|
|
|
$.ajax({
|
|
url: "simpan.php",
|
|
type: "POST",
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function(res){
|
|
if(res.trim()=="success"){
|
|
alert("Titik disimpan");
|
|
location.reload();
|
|
}else{
|
|
alert(res);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// ================= LOAD DATA =================
|
|
$.getJSON("ambil.php", function(data){
|
|
|
|
data.forEach(function(d){
|
|
|
|
// ===== RUSAK =====
|
|
if(d.tipe=="rusak"){
|
|
var marker = L.marker([d.lat, d.lng]).addTo(map);
|
|
marker.bindPopup(d.nama);
|
|
}
|
|
|
|
// ===== LINE & POLYGON =====
|
|
if(d.geom){
|
|
var geo = JSON.parse(d.geom);
|
|
|
|
var color = "black";
|
|
|
|
if(d.tipe=="jalan"){
|
|
color = d.status=="nasional"?"red":
|
|
d.status=="provinsi"?"blue":"green";
|
|
}
|
|
|
|
if(d.tipe=="tanah"){
|
|
color = d.status=="SHM"?"green":
|
|
d.status=="HGB"?"blue":
|
|
d.status=="HGU"?"orange":"purple";
|
|
}
|
|
|
|
L.geoJSON(geo,{style:{color:color}}).addTo(map);
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
var semuaData = [];
|
|
|
|
// ambil data sekali
|
|
$.getJSON("ambil.php", function(data){
|
|
semuaData = data;
|
|
tampilkanData(data);
|
|
});
|
|
|
|
// function tampilkan data
|
|
function tampilkanData(data){
|
|
|
|
var group = L.featureGroup();
|
|
|
|
map.eachLayer(function(layer){
|
|
if(layer instanceof L.GeoJSON || layer instanceof L.Marker){
|
|
map.removeLayer(layer);
|
|
}
|
|
});
|
|
|
|
data.forEach(function(d){
|
|
|
|
// ===== POINT =====
|
|
if(d.tipe=="rusak"){
|
|
var marker = L.marker([d.lat, d.lng]).addTo(map);
|
|
marker.bindPopup(d.nama);
|
|
group.addLayer(marker);
|
|
}
|
|
|
|
// ===== LINE & POLYGON =====
|
|
if(d.geom){
|
|
var geo = JSON.parse(d.geom);
|
|
|
|
var layer = L.geoJSON(geo).addTo(map);
|
|
group.addLayer(layer);
|
|
}
|
|
|
|
});
|
|
|
|
// 🔥 AUTO ZOOM KE HASIL
|
|
if(group.getLayers().length > 0){
|
|
map.fitBounds(group.getBounds());
|
|
}
|
|
|
|
}
|
|
|
|
// SEARCH REALTIME
|
|
$('#search').on('keyup', function(){
|
|
|
|
var key = $(this).val().toLowerCase();
|
|
|
|
var hasil = semuaData.filter(function(d){
|
|
|
|
if(d.tipe=="jalan"){
|
|
return d.nama_jalan.toLowerCase().includes(key);
|
|
}
|
|
|
|
if(d.tipe=="tanah"){
|
|
return d.nama_pemilik.toLowerCase().includes(key);
|
|
}
|
|
|
|
if(d.tipe=="rusak"){
|
|
return d.nama.toLowerCase().includes(key);
|
|
}
|
|
|
|
});
|
|
|
|
tampilkanData(hasil);
|
|
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |