add file
This commit is contained in:
+321
@@ -0,0 +1,321 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user