envicy
1468 lines
50 KiB
PHP
1468 lines
50 KiB
PHP
<?php
|
|
$conn = new mysqli("localhost", "root", "", "jalan");
|
|
if ($conn->connect_error) die(json_encode(['error' => $conn->connect_error]));
|
|
|
|
// ════════════════════════════════
|
|
// JALAN (POLYLINE) — CRUD
|
|
// ════════════════════════════════
|
|
|
|
// INSERT jalan
|
|
if (isset($_POST['action']) && $_POST['action'] === 'insert_jalan') {
|
|
$nama = $conn->real_escape_string($_POST['nama']);
|
|
$status = $conn->real_escape_string($_POST['status']);
|
|
$panjang = floatval($_POST['panjang']);
|
|
$geojson = $conn->real_escape_string($_POST['geojson']);
|
|
$conn->query("INSERT INTO jalan (nama_jalan, status_jalan, panjang_meter, geojson)
|
|
VALUES ('$nama','$status','$panjang','$geojson')");
|
|
echo json_encode(['id' => $conn->insert_id]);
|
|
exit;
|
|
}
|
|
|
|
// UPDATE jalan
|
|
if (isset($_POST['action']) && $_POST['action'] === 'update_jalan') {
|
|
$id = intval($_POST['id']);
|
|
$nama = $conn->real_escape_string($_POST['nama']);
|
|
$status = $conn->real_escape_string($_POST['status']);
|
|
$panjang = floatval($_POST['panjang']);
|
|
$geojson = $conn->real_escape_string($_POST['geojson']);
|
|
$conn->query("UPDATE jalan SET nama_jalan='$nama', status_jalan='$status',
|
|
panjang_meter='$panjang', geojson='$geojson' WHERE id=$id");
|
|
echo json_encode(['ok' => true]);
|
|
exit;
|
|
}
|
|
|
|
// DELETE jalan
|
|
if (isset($_POST['action']) && $_POST['action'] === 'delete_jalan') {
|
|
$id = intval($_POST['id']);
|
|
$conn->query("DELETE FROM jalan WHERE id=$id");
|
|
echo json_encode(['ok' => true]);
|
|
exit;
|
|
}
|
|
|
|
// GET jalan
|
|
if (isset($_GET['get']) && $_GET['get'] === 'jalan') {
|
|
$result = $conn->query("SELECT * FROM jalan ORDER BY id DESC");
|
|
$data = [];
|
|
while ($row = $result->fetch_assoc()) $data[] = $row;
|
|
echo json_encode($data);
|
|
exit;
|
|
}
|
|
|
|
// ════════════════════════════════
|
|
// PARSIL TANAH (POLYGON) — CRUD
|
|
// ════════════════════════════════
|
|
|
|
// INSERT parsil
|
|
if (isset($_POST['action']) && $_POST['action'] === 'insert_parsil') {
|
|
$nama = $conn->real_escape_string($_POST['nama']);
|
|
$status = $conn->real_escape_string($_POST['status']);
|
|
$luas = floatval($_POST['luas']);
|
|
$geojson = $conn->real_escape_string($_POST['geojson']);
|
|
$conn->query("INSERT INTO parsil_tanah (nama_parsil, status_kepemilikan, luas_m2, geojson)
|
|
VALUES ('$nama','$status','$luas','$geojson')");
|
|
echo json_encode(['id' => $conn->insert_id]);
|
|
exit;
|
|
}
|
|
|
|
// UPDATE parsil
|
|
if (isset($_POST['action']) && $_POST['action'] === 'update_parsil') {
|
|
$id = intval($_POST['id']);
|
|
$nama = $conn->real_escape_string($_POST['nama']);
|
|
$status = $conn->real_escape_string($_POST['status']);
|
|
$luas = floatval($_POST['luas']);
|
|
$geojson = $conn->real_escape_string($_POST['geojson']);
|
|
$conn->query("UPDATE parsil_tanah SET nama_parsil='$nama', status_kepemilikan='$status',
|
|
luas_m2='$luas', geojson='$geojson' WHERE id=$id");
|
|
echo json_encode(['ok' => true]);
|
|
exit;
|
|
}
|
|
|
|
// DELETE parsil
|
|
if (isset($_POST['action']) && $_POST['action'] === 'delete_parsil') {
|
|
$id = intval($_POST['id']);
|
|
$conn->query("DELETE FROM parsil_tanah WHERE id=$id");
|
|
echo json_encode(['ok' => true]);
|
|
exit;
|
|
}
|
|
|
|
// GET parsil
|
|
if (isset($_GET['get']) && $_GET['get'] === 'parsil') {
|
|
$result = $conn->query("SELECT * FROM parsil_tanah ORDER BY id DESC");
|
|
$data = [];
|
|
while ($row = $result->fetch_assoc()) $data[] = $row;
|
|
echo json_encode($data);
|
|
exit;
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebGIS - Jalan dan Tanah</title>
|
|
|
|
<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>
|
|
<script src="https://unpkg.com/leaflet-editable@1.2.0/src/Leaflet.Editable.js"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
/* ══ RESET & VARS ══ */
|
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
:root {
|
|
--bg: #0e1117;
|
|
--surface: #161b27;
|
|
--surface2: #1e2535;
|
|
--border: rgba(255,255,255,0.08);
|
|
--border2: rgba(255,255,255,0.14);
|
|
--text: #e8eaf0;
|
|
--text-muted: #6b7280;
|
|
--text-sub: #9ca3af;
|
|
--accent: #3b82f6;
|
|
--accent-h: #2563eb;
|
|
--danger: #ef4444;
|
|
--success: #10b981;
|
|
--warning: #f59e0b;
|
|
--radius: 10px;
|
|
--radius-sm: 6px;
|
|
--shadow: 0 8px 32px rgba(0,0,0,0.4);
|
|
--shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
|
|
|
|
/* jalan colors */
|
|
--nasional: #ef4444;
|
|
--provinsi: #f59e0b;
|
|
--kabupaten: #10b981;
|
|
|
|
/* parsil colors */
|
|
--shm: #3b82f6;
|
|
--hgb: #8b5cf6;
|
|
--hgu: #ec4899;
|
|
--hp: #06b6d4;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ══ MAP ══ */
|
|
#map {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* ══ HEADER ══ */
|
|
#header {
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 900;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border2);
|
|
border-radius: 50px;
|
|
padding: 8px 20px 8px 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
box-shadow: var(--shadow);
|
|
backdrop-filter: blur(16px);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.header-icon {
|
|
width: 30px; height: 30px;
|
|
background: var(--accent);
|
|
border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#header h1 { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; }
|
|
#header p { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
|
|
|
|
/* ══ TOOLBAR ══ */
|
|
#toolbar {
|
|
position: absolute;
|
|
top: 72px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 900;
|
|
display: flex;
|
|
gap: 6px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border2);
|
|
border-radius: 50px;
|
|
padding: 6px;
|
|
box-shadow: var(--shadow);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.tool-btn {
|
|
display: flex; align-items: center; gap: 7px;
|
|
padding: 7px 14px;
|
|
border-radius: 50px;
|
|
border: 1px solid transparent;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
|
}
|
|
|
|
.tool-btn:hover {
|
|
background: var(--surface2);
|
|
color: var(--text);
|
|
}
|
|
|
|
.tool-btn.active-road {
|
|
background: rgba(59,130,246,0.15);
|
|
border-color: rgba(59,130,246,0.4);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.tool-btn.active-polygon {
|
|
background: rgba(139,92,246,0.15);
|
|
border-color: rgba(139,92,246,0.4);
|
|
color: #8b5cf6;
|
|
}
|
|
|
|
.tool-sep {
|
|
width: 1px;
|
|
background: var(--border);
|
|
margin: 4px 2px;
|
|
}
|
|
|
|
/* ══ LEGEND ══ */
|
|
#legend {
|
|
position: absolute;
|
|
bottom: 24px;
|
|
left: 16px;
|
|
z-index: 900;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border2);
|
|
border-radius: var(--radius);
|
|
padding: 14px 16px;
|
|
box-shadow: var(--shadow);
|
|
backdrop-filter: blur(16px);
|
|
min-width: 180px;
|
|
}
|
|
|
|
.legend-section { margin-bottom: 14px; }
|
|
.legend-section:last-child { margin-bottom: 0; }
|
|
|
|
.legend-title {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex; align-items: center; gap: 8px;
|
|
font-size: 12px; color: var(--text-sub);
|
|
margin-bottom: 5px;
|
|
}
|
|
.legend-item:last-child { margin-bottom: 0; }
|
|
|
|
.legend-line {
|
|
width: 20px; height: 3px;
|
|
border-radius: 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.legend-box {
|
|
width: 14px; height: 14px;
|
|
border-radius: 3px;
|
|
flex-shrink: 0;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* ══ HINT BAR ══ */
|
|
#hint-bar {
|
|
position: absolute;
|
|
bottom: 24px;
|
|
right: 16px;
|
|
z-index: 900;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border2);
|
|
border-radius: 50px;
|
|
padding: 9px 16px;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
display: flex; align-items: center; gap: 8px;
|
|
box-shadow: var(--shadow);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.hint-dot {
|
|
width: 7px; height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ══ TOAST ══ */
|
|
#toast {
|
|
position: absolute;
|
|
top: 130px;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-8px);
|
|
z-index: 2000;
|
|
background: var(--surface2);
|
|
border: 1px solid var(--border2);
|
|
border-radius: 50px;
|
|
padding: 9px 18px;
|
|
font-size: 12.5px;
|
|
color: var(--text);
|
|
display: flex; align-items: center; gap: 8px;
|
|
box-shadow: var(--shadow);
|
|
backdrop-filter: blur(16px);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s, transform 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
#toast.show {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
.toast-dot { width: 7px; height: 7px; border-radius: 50%; }
|
|
|
|
/* ══ DRAWING INDICATOR ══ */
|
|
#draw-status {
|
|
position: absolute;
|
|
top: 130px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 900;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border2);
|
|
border-radius: 50px;
|
|
padding: 9px 18px;
|
|
font-size: 12px;
|
|
color: var(--text-sub);
|
|
display: none;
|
|
align-items: center;
|
|
gap: 8px;
|
|
box-shadow: var(--shadow-sm);
|
|
backdrop-filter: blur(16px);
|
|
white-space: nowrap;
|
|
}
|
|
#draw-status.visible { display: flex; }
|
|
|
|
.draw-actions {
|
|
display: flex; gap: 6px; margin-left: 4px;
|
|
}
|
|
|
|
.draw-btn {
|
|
display: flex; align-items: center; gap: 5px;
|
|
padding: 5px 11px;
|
|
border-radius: 50px;
|
|
border: 1px solid;
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 11.5px; font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.draw-btn-undo {
|
|
background: rgba(245,158,11,0.1);
|
|
border-color: rgba(245,158,11,0.35);
|
|
color: #f59e0b;
|
|
}
|
|
.draw-btn-undo:hover { background: rgba(245,158,11,0.2); }
|
|
.draw-btn-undo:disabled { opacity: 0.3; cursor: default; }
|
|
|
|
.draw-btn-finish {
|
|
background: rgba(16,185,129,0.15);
|
|
border-color: rgba(16,185,129,0.4);
|
|
color: #10b981;
|
|
}
|
|
.draw-btn-finish:hover { background: rgba(16,185,129,0.25); }
|
|
.draw-btn-finish:disabled { opacity: 0.3; cursor: default; }
|
|
|
|
.pulse-ring {
|
|
width: 8px; height: 8px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
animation: pulse-anim 1.5s ease-in-out infinite;
|
|
}
|
|
@keyframes pulse-anim {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.4; transform: scale(0.7); }
|
|
}
|
|
|
|
/* ══ MODAL ══ */
|
|
.modal-overlay {
|
|
position: fixed; inset: 0;
|
|
background: rgba(0,0,0,0.6);
|
|
z-index: 2000;
|
|
display: flex; align-items: center; justify-content: center;
|
|
opacity: 0; pointer-events: none;
|
|
transition: opacity 0.2s;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
.modal-overlay.open { opacity: 1; pointer-events: all; }
|
|
|
|
.modal {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border2);
|
|
border-radius: 14px;
|
|
width: 340px;
|
|
box-shadow: var(--shadow);
|
|
transform: scale(0.96) translateY(10px);
|
|
transition: transform 0.2s;
|
|
overflow: hidden;
|
|
}
|
|
.modal-overlay.open .modal { transform: scale(1) translateY(0); }
|
|
|
|
.modal-header {
|
|
padding: 18px 20px 14px;
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
}
|
|
.modal-label {
|
|
font-size: 10px; font-weight: 600;
|
|
letter-spacing: 0.1em; text-transform: uppercase;
|
|
color: var(--text-muted); margin-bottom: 3px;
|
|
}
|
|
.modal-title { font-size: 15px; font-weight: 600; }
|
|
|
|
.modal-close {
|
|
width: 28px; height: 28px;
|
|
border-radius: 50%; border: none;
|
|
background: var(--surface2);
|
|
color: var(--text-muted);
|
|
font-size: 16px; cursor: pointer;
|
|
display: flex; align-items: center; justify-content: center;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
.modal-close:hover { background: var(--border2); color: var(--text); }
|
|
|
|
.modal-body { padding: 16px 20px 20px; }
|
|
|
|
.field { margin-bottom: 13px; }
|
|
.field label { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-sub); margin-bottom: 5px; }
|
|
|
|
.field input,
|
|
.field select {
|
|
width: 100%;
|
|
background: var(--surface2);
|
|
border: 1px solid var(--border2);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text);
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 13px;
|
|
padding: 9px 11px;
|
|
transition: border-color 0.15s;
|
|
outline: none;
|
|
}
|
|
.field input:focus,
|
|
.field select:focus { border-color: var(--accent); }
|
|
.field select option { background: #1e2535; }
|
|
|
|
.field-readonly {
|
|
background: rgba(255,255,255,0.04);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 9px 11px;
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.field-row { display: flex; gap: 10px; }
|
|
.field-row .field { flex: 1; }
|
|
|
|
.btn-primary {
|
|
width: 100%;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
padding: 10px;
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 13px; font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.15s, transform 0.1s;
|
|
margin-top: 4px;
|
|
}
|
|
.btn-primary:hover { background: var(--accent-h); }
|
|
.btn-primary:active { transform: scale(0.99); }
|
|
|
|
/* ══ LEAFLET POPUP ══ */
|
|
.leaflet-popup-content-wrapper {
|
|
background: var(--surface) !important;
|
|
color: var(--text) !important;
|
|
border: 1px solid var(--border2) !important;
|
|
border-radius: var(--radius) !important;
|
|
box-shadow: var(--shadow) !important;
|
|
padding: 0 !important;
|
|
overflow: hidden;
|
|
min-width: 220px;
|
|
}
|
|
.leaflet-popup-content { margin: 0 !important; width: auto !important; }
|
|
.leaflet-popup-tip { background: var(--surface) !important; }
|
|
.leaflet-popup-close-button { color: var(--text-muted) !important; font-size: 16px !important; top: 10px !important; right: 10px !important; }
|
|
|
|
.pop-head {
|
|
padding: 12px 14px 10px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.pop-type { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
|
|
.pop-name { font-size: 14px; font-weight: 600; }
|
|
|
|
.pop-body { padding: 10px 14px 12px; }
|
|
.pop-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-sub); margin-bottom: 6px; }
|
|
.pop-row:last-child { margin-bottom: 0; }
|
|
.pop-badge {
|
|
display: inline-block; padding: 2px 8px;
|
|
border-radius: 20px; font-size: 11px; font-weight: 500;
|
|
border: 1px solid;
|
|
}
|
|
|
|
.pop-foot {
|
|
padding: 10px 14px;
|
|
border-top: 1px solid var(--border);
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.btn-pop-edit, .btn-pop-del {
|
|
flex: 1; padding: 6px 10px;
|
|
border: 1px solid; border-radius: var(--radius-sm);
|
|
font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 500;
|
|
cursor: pointer; transition: background 0.15s;
|
|
display: flex; align-items: center; justify-content: center; gap: 5px;
|
|
}
|
|
.btn-pop-edit {
|
|
background: rgba(59,130,246,0.1);
|
|
border-color: rgba(59,130,246,0.3);
|
|
color: var(--accent);
|
|
}
|
|
.btn-pop-edit:hover { background: rgba(59,130,246,0.2); }
|
|
.btn-pop-del {
|
|
background: rgba(239,68,68,0.1);
|
|
border-color: rgba(239,68,68,0.3);
|
|
color: var(--danger);
|
|
}
|
|
.btn-pop-del:hover { background: rgba(239,68,68,0.2); }
|
|
|
|
/* ══ GEOMETRY EDIT BANNER ══ */
|
|
#geom-edit-bar {
|
|
position: absolute;
|
|
top: 130px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 900;
|
|
background: var(--surface);
|
|
border: 1px solid rgba(245,158,11,0.4);
|
|
border-radius: 50px;
|
|
padding: 9px 8px 9px 16px;
|
|
font-size: 12px;
|
|
color: #f59e0b;
|
|
display: none;
|
|
align-items: center;
|
|
gap: 10px;
|
|
box-shadow: var(--shadow-sm);
|
|
backdrop-filter: blur(16px);
|
|
white-space: nowrap;
|
|
}
|
|
#geom-edit-bar.visible { display: flex; }
|
|
|
|
.geom-edit-dot {
|
|
width: 7px; height: 7px;
|
|
border-radius: 50%;
|
|
background: #f59e0b;
|
|
flex-shrink: 0;
|
|
animation: pulse-anim 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.btn-geom-save {
|
|
display: flex; align-items: center; gap: 5px;
|
|
padding: 5px 13px;
|
|
border-radius: 50px;
|
|
border: 1px solid rgba(16,185,129,0.4);
|
|
background: rgba(16,185,129,0.15);
|
|
color: #10b981;
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 11.5px; font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
.btn-geom-save:hover { background: rgba(16,185,129,0.25); }
|
|
|
|
.btn-geom-cancel {
|
|
display: flex; align-items: center; gap: 5px;
|
|
padding: 5px 13px;
|
|
border-radius: 50px;
|
|
border: 1px solid rgba(239,68,68,0.35);
|
|
background: rgba(239,68,68,0.1);
|
|
color: #ef4444;
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 11.5px; font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
.btn-geom-cancel:hover { background: rgba(239,68,68,0.2); }
|
|
|
|
/* ══ LEAFLET ZOOM ══ */
|
|
.leaflet-control-zoom a {
|
|
background: var(--surface) !important;
|
|
color: var(--text) !important;
|
|
border-color: var(--border2) !important;
|
|
}
|
|
.leaflet-control-zoom a:hover { background: var(--surface2) !important; color: var(--accent) !important; }
|
|
.leaflet-control-attribution {
|
|
background: rgba(14,17,23,0.75) !important;
|
|
color: var(--text-muted) !important;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.leaflet-control-attribution a { color: #555 !important; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="map"></div>
|
|
|
|
<!-- HEADER -->
|
|
<div id="header">
|
|
<div class="header-icon">🗺️</div>
|
|
<div>
|
|
<h1>WebGIS - Jalan dan Tanah</h1>
|
|
<p>Manajemen Data Spasial</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TOOLBAR -->
|
|
<div id="toolbar">
|
|
<button class="tool-btn" id="btn-view" onclick="setMode('view')">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
|
Lihat
|
|
</button>
|
|
<div class="tool-sep"></div>
|
|
<button class="tool-btn" id="btn-jalan" onclick="setMode('jalan')">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M3 17h5l2-10 4 10h7"/></svg>
|
|
Tambah Jalan
|
|
</button>
|
|
<button class="tool-btn" id="btn-parsil" onclick="setMode('parsil')">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
|
|
Tambah Parsil
|
|
</button>
|
|
</div>
|
|
|
|
<!-- DRAW STATUS -->
|
|
<div id="draw-status">
|
|
<div class="pulse-ring" id="draw-pulse"></div>
|
|
<span id="draw-status-text">Klik peta untuk mulai menggambar...</span>
|
|
<div class="draw-actions">
|
|
<button class="draw-btn draw-btn-undo" id="btn-undo" onclick="undoLastPoint()" title="Hapus titik terakhir">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 00-9-9 9 9 0 00-6 2.3L3 13"/></svg>
|
|
Undo
|
|
</button>
|
|
<button class="draw-btn draw-btn-finish" id="btn-finish" onclick="finishDrawing()">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Selesai
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- GEOMETRY EDIT BAR -->
|
|
<div id="geom-edit-bar">
|
|
<div class="geom-edit-dot"></div>
|
|
<span id="geom-edit-label">Seret titik untuk mengubah bentuk</span>
|
|
<button class="btn-geom-save" onclick="saveGeomEdit()">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Simpan
|
|
</button>
|
|
<button class="btn-geom-cancel" onclick="cancelGeomEdit()">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|
Batal
|
|
</button>
|
|
</div>
|
|
|
|
<!-- TOAST -->
|
|
<div id="toast">
|
|
<div class="toast-dot" id="toast-dot"></div>
|
|
<span id="toast-msg"></span>
|
|
</div>
|
|
|
|
<!-- LEGEND -->
|
|
<div id="legend">
|
|
<div class="legend-section">
|
|
<div class="legend-title">Status Jalan</div>
|
|
<div class="legend-item"><div class="legend-line" style="background:var(--nasional)"></div>Jalan Nasional</div>
|
|
<div class="legend-item"><div class="legend-line" style="background:var(--provinsi)"></div>Jalan Provinsi</div>
|
|
<div class="legend-item"><div class="legend-line" style="background:var(--kabupaten)"></div>Jalan Kabupaten</div>
|
|
</div>
|
|
<div class="legend-section">
|
|
<div class="legend-title">Kepemilikan Tanah</div>
|
|
<div class="legend-item"><div class="legend-box" style="background:var(--shm)"></div>SHM</div>
|
|
<div class="legend-item"><div class="legend-box" style="background:var(--hgb)"></div>HGB</div>
|
|
<div class="legend-item"><div class="legend-box" style="background:var(--hgu)"></div>HGU</div>
|
|
<div class="legend-item"><div class="legend-box" style="background:var(--hp)"></div>HP</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HINT BAR -->
|
|
<div id="hint-bar">
|
|
<div class="hint-dot"></div>
|
|
<span id="hint-text">Pilih tool di atas untuk menambah data</span>
|
|
</div>
|
|
|
|
<!-- MODAL JALAN -->
|
|
<div class="modal-overlay" id="modal-jalan">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<div>
|
|
<div class="modal-label">Polyline</div>
|
|
<div class="modal-title" id="modal-jalan-title">Tambah Data Jalan</div>
|
|
</div>
|
|
<button class="modal-close" onclick="closeModal('modal-jalan')">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" id="jalan-edit-id">
|
|
<div class="field">
|
|
<label>Nama Jalan</label>
|
|
<input type="text" id="jalan-nama" placeholder="Contoh: Jl. Ahmad Yani">
|
|
</div>
|
|
<div class="field">
|
|
<label>Status Jalan</label>
|
|
<select id="jalan-status">
|
|
<option value="Nasional">Jalan Nasional</option>
|
|
<option value="Provinsi">Jalan Provinsi</option>
|
|
<option value="Kabupaten">Jalan Kabupaten</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label>Panjang Jalan (otomatis)</label>
|
|
<div class="field-readonly" id="jalan-panjang-display">— m</div>
|
|
</div>
|
|
<button class="btn-primary" id="btn-save-jalan" onclick="saveJalan()">Simpan Data Jalan</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODAL PARSIL -->
|
|
<div class="modal-overlay" id="modal-parsil">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<div>
|
|
<div class="modal-label">Polygon</div>
|
|
<div class="modal-title" id="modal-parsil-title">Tambah Data Parsil Tanah</div>
|
|
</div>
|
|
<button class="modal-close" onclick="closeModal('modal-parsil')">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" id="parsil-edit-id">
|
|
<div class="field">
|
|
<label>Nama Parsil / Kavling</label>
|
|
<input type="text" id="parsil-nama" placeholder="Contoh: Kavling A-01">
|
|
</div>
|
|
<div class="field">
|
|
<label>Status Kepemilikan</label>
|
|
<select id="parsil-status">
|
|
<option value="SHM">Sertifikat Hak Milik (SHM)</option>
|
|
<option value="HGB">Sertifikat Hak Guna Bangunan (HGB)</option>
|
|
<option value="HGU">Sertifikat Hak Guna Usaha (HGU)</option>
|
|
<option value="HP">Sertifikat Hak Pakai (HP)</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label>Luas Tanah (otomatis)</label>
|
|
<div class="field-readonly" id="parsil-luas-display">— m²</div>
|
|
</div>
|
|
<button class="btn-primary" id="btn-save-parsil" onclick="saveParsil()">Simpan Data Parsil</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// ════════════════════════════════════════
|
|
// CONFIG & HELPERS
|
|
// ════════════════════════════════════════
|
|
|
|
const JALAN_COLORS = {
|
|
'Nasional': '#ef4444',
|
|
'Provinsi': '#f59e0b',
|
|
'Kabupaten': '#10b981'
|
|
};
|
|
|
|
const PARSIL_COLORS = {
|
|
'SHM': '#3b82f6',
|
|
'HGB': '#8b5cf6',
|
|
'HGU': '#ec4899',
|
|
'HP': '#06b6d4'
|
|
};
|
|
|
|
function jalanColor(status) { return JALAN_COLORS[status] || '#6b7280'; }
|
|
function parsilColor(status) { return PARSIL_COLORS[status] || '#6b7280'; }
|
|
|
|
function showToast(msg, color) {
|
|
const t = document.getElementById('toast');
|
|
document.getElementById('toast-dot').style.background = color || '#10b981';
|
|
document.getElementById('toast-msg').textContent = msg;
|
|
t.classList.add('show');
|
|
clearTimeout(t._tmr);
|
|
t._tmr = setTimeout(() => t.classList.remove('show'), 2800);
|
|
}
|
|
|
|
function openModal(id) { document.getElementById(id).classList.add('open'); }
|
|
function closeModal(id) {
|
|
document.getElementById(id).classList.remove('open');
|
|
// cancel pending draw
|
|
if (id === 'modal-jalan') { pendingJalan = null; }
|
|
if (id === 'modal-parsil') { pendingParsil = null; }
|
|
}
|
|
|
|
// ════════════════════════════════════════
|
|
// MAP INIT
|
|
// ════════════════════════════════════════
|
|
|
|
const map = L.map('map', { editable: true }).setView([-0.05538, 109.34947], 14);
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(map);
|
|
|
|
// Layer groups
|
|
const jalanLayer = L.layerGroup().addTo(map);
|
|
const parsilLayer = L.layerGroup().addTo(map);
|
|
|
|
// ════════════════════════════════════════
|
|
// DRAWING STATE
|
|
// ════════════════════════════════════════
|
|
|
|
let currentMode = 'view';
|
|
let drawPoints = [];
|
|
let drawMarkers = [];
|
|
let previewLine = null;
|
|
let previewPoly = null;
|
|
let pendingJalan = null; // { latlngs, geojson, panjang }
|
|
let pendingParsil = null; // { latlngs, geojson, luas }
|
|
|
|
const statusEl = document.getElementById('draw-status');
|
|
const statusTextEl = document.getElementById('draw-status-text');
|
|
const drawPulseEl = document.getElementById('draw-pulse');
|
|
const hintTextEl = document.getElementById('hint-text');
|
|
|
|
function setMode(mode) {
|
|
currentMode = mode;
|
|
clearDraw();
|
|
|
|
document.getElementById('btn-view').classList.remove('active-road', 'active-polygon');
|
|
document.getElementById('btn-jalan').classList.remove('active-road', 'active-polygon');
|
|
document.getElementById('btn-parsil').classList.remove('active-road', 'active-polygon');
|
|
|
|
if (mode === 'jalan') {
|
|
document.getElementById('btn-jalan').classList.add('active-road');
|
|
statusEl.classList.add('visible');
|
|
drawPulseEl.style.background = '#3b82f6';
|
|
statusTextEl.textContent = 'Klik peta untuk mulai menggambar jalan.';
|
|
hintTextEl.textContent = 'Mode: Gambar Jalan — klik Selesai bila sudah cukup titik';
|
|
map.getContainer().style.cursor = 'crosshair';
|
|
document.getElementById('btn-undo').disabled = true;
|
|
document.getElementById('btn-finish').disabled = true;
|
|
} else if (mode === 'parsil') {
|
|
document.getElementById('btn-parsil').classList.add('active-polygon');
|
|
statusEl.classList.add('visible');
|
|
drawPulseEl.style.background = '#8b5cf6';
|
|
statusTextEl.textContent = 'Klik peta untuk mulai menggambar parsil.';
|
|
hintTextEl.textContent = 'Mode: Gambar Parsil — klik Selesai bila sudah cukup titik';
|
|
map.getContainer().style.cursor = 'crosshair';
|
|
document.getElementById('btn-undo').disabled = true;
|
|
document.getElementById('btn-finish').disabled = true;
|
|
} else {
|
|
statusEl.classList.remove('visible');
|
|
hintTextEl.textContent = 'Klik fitur di peta untuk melihat detail';
|
|
map.getContainer().style.cursor = '';
|
|
}
|
|
}
|
|
|
|
function clearDraw() {
|
|
drawPoints = [];
|
|
drawMarkers.forEach(m => map.removeLayer(m));
|
|
drawMarkers = [];
|
|
if (previewLine) { map.removeLayer(previewLine); previewLine = null; }
|
|
if (previewPoly) { map.removeLayer(previewPoly); previewPoly = null; }
|
|
}
|
|
|
|
// ════════════════════════════════════════
|
|
// MAP CLICK — DRAWING
|
|
// ════════════════════════════════════════
|
|
|
|
// Vertex dot style
|
|
function makeVertexIcon() {
|
|
return L.divIcon({
|
|
html: '<div style="width:8px;height:8px;background:#fff;border:2px solid #3b82f6;border-radius:50%;margin:-4px 0 0 -4px;"></div>',
|
|
className: '', iconSize: [0,0]
|
|
});
|
|
}
|
|
|
|
map.on('click', function(e) {
|
|
if (currentMode === 'view') return;
|
|
|
|
drawPoints.push(e.latlng);
|
|
const dot = L.marker(e.latlng, { icon: makeVertexIcon(), interactive: false }).addTo(map);
|
|
drawMarkers.push(dot);
|
|
|
|
if (currentMode === 'jalan') {
|
|
if (previewLine) map.removeLayer(previewLine);
|
|
if (drawPoints.length > 1) {
|
|
previewLine = L.polyline(drawPoints, { color: '#3b82f6', weight: 3, dashArray: '6,4', opacity: 0.8 }).addTo(map);
|
|
}
|
|
}
|
|
|
|
if (currentMode === 'parsil') {
|
|
if (previewPoly) map.removeLayer(previewPoly);
|
|
if (drawPoints.length > 2) {
|
|
previewPoly = L.polygon(drawPoints, { color: '#8b5cf6', fillColor: '#8b5cf6', fillOpacity: 0.15, weight: 2, dashArray: '5,4' }).addTo(map);
|
|
}
|
|
}
|
|
|
|
updateDrawStatus();
|
|
});
|
|
|
|
// Disable default dblclick zoom while in draw mode
|
|
map.on('dblclick', function(e) {
|
|
if (currentMode !== 'view') L.DomEvent.stop(e);
|
|
});
|
|
|
|
function updateDrawStatus() {
|
|
const n = drawPoints.length;
|
|
const undoBtn = document.getElementById('btn-undo');
|
|
const finishBtn = document.getElementById('btn-finish');
|
|
undoBtn.disabled = (n === 0);
|
|
|
|
if (currentMode === 'jalan') {
|
|
finishBtn.disabled = (n < 2);
|
|
statusTextEl.textContent = n === 0
|
|
? 'Klik peta untuk mulai menggambar jalan.'
|
|
: `${n} titik — tambah titik atau klik Selesai.`;
|
|
} else if (currentMode === 'parsil') {
|
|
finishBtn.disabled = (n < 3);
|
|
statusTextEl.textContent = n === 0
|
|
? 'Klik peta untuk mulai menggambar parsil.'
|
|
: n < 3
|
|
? `${n} titik — perlu minimal 3 titik.`
|
|
: `${n} titik — tambah titik atau klik Selesai.`;
|
|
}
|
|
}
|
|
|
|
function undoLastPoint() {
|
|
if (drawPoints.length === 0) return;
|
|
drawPoints.pop();
|
|
const lastMarker = drawMarkers.pop();
|
|
if (lastMarker) map.removeLayer(lastMarker);
|
|
|
|
if (previewLine) { map.removeLayer(previewLine); previewLine = null; }
|
|
if (previewPoly) { map.removeLayer(previewPoly); previewPoly = null; }
|
|
|
|
if (currentMode === 'jalan' && drawPoints.length > 1) {
|
|
previewLine = L.polyline(drawPoints, { color: '#3b82f6', weight: 3, dashArray: '6,4', opacity: 0.8 }).addTo(map);
|
|
}
|
|
if (currentMode === 'parsil' && drawPoints.length > 2) {
|
|
previewPoly = L.polygon(drawPoints, { color: '#8b5cf6', fillColor: '#8b5cf6', fillOpacity: 0.15, weight: 2, dashArray: '5,4' }).addTo(map);
|
|
}
|
|
updateDrawStatus();
|
|
}
|
|
|
|
function finishDrawing() {
|
|
if (currentMode === 'jalan') {
|
|
if (drawPoints.length < 2) { showToast('Minimal 2 titik untuk membuat jalan', '#f59e0b'); return; }
|
|
finishJalan();
|
|
} else if (currentMode === 'parsil') {
|
|
if (drawPoints.length < 3) { showToast('Minimal 3 titik untuk membuat parsil', '#f59e0b'); return; }
|
|
finishParsil();
|
|
}
|
|
}
|
|
|
|
// ════════════════════════════════════════
|
|
// FINISH DRAWING — OPEN MODAL
|
|
// ════════════════════════════════════════
|
|
|
|
function calcPolylineLength(latlngs) {
|
|
let total = 0;
|
|
for (let i = 1; i < latlngs.length; i++) {
|
|
total += latlngs[i-1].distanceTo(latlngs[i]);
|
|
}
|
|
return Math.round(total);
|
|
}
|
|
|
|
// Shoelace formula on Mercator (approx) — Leaflet's GeometryUtil-free version
|
|
// Using L.GeometryUtil is cleaner but requires plugin; we use the geodetic formula
|
|
function calcPolygonArea(latlngs) {
|
|
// Convert to a temporary Leaflet polygon and compute area via spherical excess
|
|
const poly = L.polygon(latlngs);
|
|
// Leaflet has no built-in area; compute with spherical formula
|
|
const pts = latlngs.map(ll => [ll.lat * Math.PI/180, ll.lng * Math.PI/180]);
|
|
let area = 0;
|
|
const R = 6371000; // meters
|
|
for (let i = 0; i < pts.length; i++) {
|
|
const j = (i + 1) % pts.length;
|
|
area += pts[i][1] * pts[j][0];
|
|
area -= pts[j][1] * pts[i][0];
|
|
}
|
|
area = Math.abs(area) / 2;
|
|
area *= R * R;
|
|
return Math.round(area);
|
|
}
|
|
|
|
function finishJalan() {
|
|
const pts = [...drawPoints];
|
|
const panjang = calcPolylineLength(pts);
|
|
const geojson = JSON.stringify({
|
|
type: 'LineString',
|
|
coordinates: pts.map(p => [p.lng, p.lat])
|
|
});
|
|
|
|
pendingJalan = { latlngs: pts, geojson, panjang };
|
|
clearDraw();
|
|
statusEl.classList.remove('visible');
|
|
|
|
// Pre-fill modal
|
|
document.getElementById('jalan-edit-id').value = '';
|
|
document.getElementById('jalan-nama').value = '';
|
|
document.getElementById('modal-jalan-title').textContent = 'Tambah Data Jalan';
|
|
document.getElementById('btn-save-jalan').textContent = 'Simpan Data Jalan';
|
|
document.getElementById('jalan-panjang-display').textContent = panjang.toLocaleString('id-ID') + ' m';
|
|
openModal('modal-jalan');
|
|
}
|
|
|
|
function finishParsil() {
|
|
const pts = [...drawPoints];
|
|
const luas = calcPolygonArea(pts);
|
|
const geojson = JSON.stringify({
|
|
type: 'Polygon',
|
|
coordinates: [pts.map(p => [p.lng, p.lat]).concat([[pts[0].lng, pts[0].lat]])]
|
|
});
|
|
|
|
pendingParsil = { latlngs: pts, geojson, luas };
|
|
clearDraw();
|
|
statusEl.classList.remove('visible');
|
|
|
|
document.getElementById('parsil-edit-id').value = '';
|
|
document.getElementById('parsil-nama').value = '';
|
|
document.getElementById('modal-parsil-title').textContent = 'Tambah Data Parsil Tanah';
|
|
document.getElementById('btn-save-parsil').textContent = 'Simpan Data Parsil';
|
|
document.getElementById('parsil-luas-display').textContent = luas.toLocaleString('id-ID') + ' m²';
|
|
openModal('modal-parsil');
|
|
}
|
|
|
|
// ════════════════════════════════════════
|
|
// SAVE — JALAN
|
|
// ════════════════════════════════════════
|
|
|
|
function saveJalan() {
|
|
const nama = document.getElementById('jalan-nama').value.trim();
|
|
const status = document.getElementById('jalan-status').value;
|
|
const editId = document.getElementById('jalan-edit-id').value;
|
|
|
|
if (!nama) { showToast('Nama jalan wajib diisi', '#ef4444'); return; }
|
|
|
|
if (editId) {
|
|
// UPDATE — geojson unchanged
|
|
const layer = jalanLayers[editId];
|
|
const panjang = layer ? calcPolylineLength(layer.getLatLngs()) : 0;
|
|
const geojson = layer ? JSON.stringify(layer.toGeoJSON().geometry) : '';
|
|
const fd = new FormData();
|
|
fd.append('action', 'update_jalan');
|
|
fd.append('id', editId);
|
|
fd.append('nama', nama);
|
|
fd.append('status', status);
|
|
fd.append('panjang', panjang);
|
|
fd.append('geojson', geojson);
|
|
fetch('index.php', { method: 'POST', body: fd })
|
|
.then(r => r.json())
|
|
.then(() => {
|
|
// Re-render layer
|
|
if (jalanLayers[editId]) {
|
|
jalanLayers[editId].setStyle({ color: jalanColor(status), weight: 4 });
|
|
const popHtml = buildJalanPopup({ id: editId, nama_jalan: nama, status_jalan: status, panjang_meter: panjang, geojson });
|
|
jalanLayers[editId].setPopupContent(popHtml);
|
|
}
|
|
closeModal('modal-jalan');
|
|
showToast('Data jalan diperbarui ✓', '#10b981');
|
|
});
|
|
} else {
|
|
if (!pendingJalan) return;
|
|
const fd = new FormData();
|
|
fd.append('action', 'insert_jalan');
|
|
fd.append('nama', nama);
|
|
fd.append('status', status);
|
|
fd.append('panjang', pendingJalan.panjang);
|
|
fd.append('geojson', pendingJalan.geojson);
|
|
fetch('index.php', { method: 'POST', body: fd })
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
addJalanLayer({ id: res.id, nama_jalan: nama, status_jalan: status, panjang_meter: pendingJalan.panjang, geojson: pendingJalan.geojson });
|
|
pendingJalan = null;
|
|
closeModal('modal-jalan');
|
|
setMode('view');
|
|
showToast('Jalan berhasil disimpan ✓', '#10b981');
|
|
});
|
|
}
|
|
}
|
|
|
|
// ════════════════════════════════════════
|
|
// SAVE — PARSIL
|
|
// ════════════════════════════════════════
|
|
|
|
function saveParsil() {
|
|
const nama = document.getElementById('parsil-nama').value.trim();
|
|
const status = document.getElementById('parsil-status').value;
|
|
const editId = document.getElementById('parsil-edit-id').value;
|
|
|
|
if (!nama) { showToast('Nama parsil wajib diisi', '#ef4444'); return; }
|
|
|
|
if (editId) {
|
|
const layer = parsilLayers[editId];
|
|
const luas = layer ? calcPolygonArea(layer.getLatLngs()[0]) : 0;
|
|
const geojson = layer ? JSON.stringify(layer.toGeoJSON().geometry) : '';
|
|
const fd = new FormData();
|
|
fd.append('action', 'update_parsil');
|
|
fd.append('id', editId);
|
|
fd.append('nama', nama);
|
|
fd.append('status', status);
|
|
fd.append('luas', luas);
|
|
fd.append('geojson', geojson);
|
|
fetch('index.php', { method: 'POST', body: fd })
|
|
.then(r => r.json())
|
|
.then(() => {
|
|
if (parsilLayers[editId]) {
|
|
const c = parsilColor(status);
|
|
parsilLayers[editId].setStyle({ color: c, fillColor: c });
|
|
const popHtml = buildParsilPopup({ id: editId, nama_parsil: nama, status_kepemilikan: status, luas_m2: luas, geojson });
|
|
parsilLayers[editId].setPopupContent(popHtml);
|
|
}
|
|
closeModal('modal-parsil');
|
|
showToast('Data parsil diperbarui ✓', '#10b981');
|
|
});
|
|
} else {
|
|
if (!pendingParsil) return;
|
|
const fd = new FormData();
|
|
fd.append('action', 'insert_parsil');
|
|
fd.append('nama', nama);
|
|
fd.append('status', status);
|
|
fd.append('luas', pendingParsil.luas);
|
|
fd.append('geojson', pendingParsil.geojson);
|
|
fetch('index.php', { method: 'POST', body: fd })
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
addParsilLayer({ id: res.id, nama_parsil: nama, status_kepemilikan: status, luas_m2: pendingParsil.luas, geojson: pendingParsil.geojson });
|
|
pendingParsil = null;
|
|
closeModal('modal-parsil');
|
|
setMode('view');
|
|
showToast('Parsil berhasil disimpan ✓', '#10b981');
|
|
});
|
|
}
|
|
}
|
|
|
|
// ════════════════════════════════════════
|
|
// RENDER LAYERS
|
|
// ════════════════════════════════════════
|
|
|
|
const jalanLayers = {}; // id → L.polyline
|
|
const parsilLayers = {}; // id → L.polygon
|
|
|
|
function buildJalanPopup(d) {
|
|
const color = jalanColor(d.status_jalan);
|
|
const panjang = parseInt(d.panjang_meter).toLocaleString('id-ID');
|
|
return `
|
|
<div class="pop-head">
|
|
<div class="pop-type">Jalan</div>
|
|
<div class="pop-name">${d.nama_jalan}</div>
|
|
</div>
|
|
<div class="pop-body">
|
|
<div class="pop-row">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
<span class="pop-badge" style="color:${color};border-color:${color}40;background:${color}15">${d.status_jalan}</span>
|
|
</div>
|
|
<div class="pop-row">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h18v18H3z"/><path d="M3 9h18M3 15h18M9 3v18M15 3v18"/></svg>
|
|
Panjang: <strong>${panjang} m</strong>
|
|
</div>
|
|
</div>
|
|
<div class="pop-foot">
|
|
<button class="btn-pop-edit" onclick="editJalan(${d.id})">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
|
Atribut
|
|
</button>
|
|
<button class="btn-pop-edit" onclick="startGeomEdit('jalan', ${d.id})" style="border-color:rgba(245,158,11,0.4);color:#f59e0b;background:rgba(245,158,11,0.1)">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="5 9 2 12 5 15"/><polyline points="9 5 12 2 15 5"/><polyline points="15 19 12 22 9 19"/><polyline points="19 9 22 12 19 15"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="12" y1="2" x2="12" y2="22"/></svg>
|
|
Geometri
|
|
</button>
|
|
<button class="btn-pop-del" onclick="deleteJalan(${d.id})">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg>
|
|
Hapus
|
|
</button>
|
|
</div>`;
|
|
}
|
|
|
|
function buildParsilPopup(d) {
|
|
const color = parsilColor(d.status_kepemilikan);
|
|
const luas = parseInt(d.luas_m2).toLocaleString('id-ID');
|
|
return `
|
|
<div class="pop-head">
|
|
<div class="pop-type">Parsil Tanah</div>
|
|
<div class="pop-name">${d.nama_parsil}</div>
|
|
</div>
|
|
<div class="pop-body">
|
|
<div class="pop-row">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
|
|
<span class="pop-badge" style="color:${color};border-color:${color}40;background:${color}15">${d.status_kepemilikan}</span>
|
|
</div>
|
|
<div class="pop-row">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
|
|
Luas: <strong>${luas} m²</strong>
|
|
</div>
|
|
</div>
|
|
<div class="pop-foot">
|
|
<button class="btn-pop-edit" onclick="editParsil(${d.id})">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
|
Atribut
|
|
</button>
|
|
<button class="btn-pop-edit" onclick="startGeomEdit('parsil', ${d.id})" style="border-color:rgba(245,158,11,0.4);color:#f59e0b;background:rgba(245,158,11,0.1)">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="5 9 2 12 5 15"/><polyline points="9 5 12 2 15 5"/><polyline points="15 19 12 22 9 19"/><polyline points="19 9 22 12 19 15"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="12" y1="2" x2="12" y2="22"/></svg>
|
|
Geometri
|
|
</button>
|
|
<button class="btn-pop-del" onclick="deleteParsil(${d.id})">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg>
|
|
Hapus
|
|
</button>
|
|
</div>`;
|
|
}
|
|
|
|
function addJalanLayer(d) {
|
|
const gj = JSON.parse(d.geojson);
|
|
const latlngs = gj.coordinates.map(c => L.latLng(c[1], c[0]));
|
|
const color = jalanColor(d.status_jalan);
|
|
const line = L.polyline(latlngs, { color, weight: 4, opacity: 0.9 })
|
|
.bindPopup(buildJalanPopup(d), { maxWidth: 260 })
|
|
.addTo(jalanLayer);
|
|
jalanLayers[d.id] = line;
|
|
}
|
|
|
|
function addParsilLayer(d) {
|
|
const gj = JSON.parse(d.geojson);
|
|
const latlngs = gj.coordinates[0].map(c => L.latLng(c[1], c[0]));
|
|
const color = parsilColor(d.status_kepemilikan);
|
|
const poly = L.polygon(latlngs, { color, fillColor: color, fillOpacity: 0.25, weight: 2 })
|
|
.bindPopup(buildParsilPopup(d), { maxWidth: 260 })
|
|
.addTo(parsilLayer);
|
|
parsilLayers[d.id] = poly;
|
|
}
|
|
|
|
// ════════════════════════════════════════
|
|
// EDIT
|
|
// ════════════════════════════════════════
|
|
|
|
function editJalan(id) {
|
|
const layer = jalanLayers[id];
|
|
if (!layer) return;
|
|
map.closePopup();
|
|
// Find name/status from popup content — easier to fetch from server
|
|
fetch('index.php?get=jalan')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
const d = data.find(x => x.id == id);
|
|
if (!d) return;
|
|
document.getElementById('jalan-edit-id').value = id;
|
|
document.getElementById('jalan-nama').value = d.nama_jalan;
|
|
document.getElementById('jalan-status').value = d.status_jalan;
|
|
document.getElementById('jalan-panjang-display').textContent = parseInt(d.panjang_meter).toLocaleString('id-ID') + ' m';
|
|
document.getElementById('modal-jalan-title').textContent = 'Edit Data Jalan';
|
|
document.getElementById('btn-save-jalan').textContent = 'Simpan Perubahan';
|
|
openModal('modal-jalan');
|
|
});
|
|
}
|
|
|
|
function editParsil(id) {
|
|
const layer = parsilLayers[id];
|
|
if (!layer) return;
|
|
map.closePopup();
|
|
fetch('index.php?get=parsil')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
const d = data.find(x => x.id == id);
|
|
if (!d) return;
|
|
document.getElementById('parsil-edit-id').value = id;
|
|
document.getElementById('parsil-nama').value = d.nama_parsil;
|
|
document.getElementById('parsil-status').value = d.status_kepemilikan;
|
|
document.getElementById('parsil-luas-display').textContent = parseInt(d.luas_m2).toLocaleString('id-ID') + ' m²';
|
|
document.getElementById('modal-parsil-title').textContent = 'Edit Data Parsil';
|
|
document.getElementById('btn-save-parsil').textContent = 'Simpan Perubahan';
|
|
openModal('modal-parsil');
|
|
});
|
|
}
|
|
|
|
// ════════════════════════════════════════
|
|
// DELETE
|
|
// ════════════════════════════════════════
|
|
|
|
function deleteJalan(id) {
|
|
if (!confirm('Hapus data jalan ini?')) return;
|
|
const fd = new FormData();
|
|
fd.append('action', 'delete_jalan');
|
|
fd.append('id', id);
|
|
fetch('index.php', { method: 'POST', body: fd })
|
|
.then(r => r.json())
|
|
.then(() => {
|
|
map.closePopup();
|
|
if (jalanLayers[id]) { jalanLayer.removeLayer(jalanLayers[id]); delete jalanLayers[id]; }
|
|
showToast('Data jalan dihapus', '#ef4444');
|
|
});
|
|
}
|
|
|
|
function deleteParsil(id) {
|
|
if (!confirm('Hapus data parsil ini?')) return;
|
|
const fd = new FormData();
|
|
fd.append('action', 'delete_parsil');
|
|
fd.append('id', id);
|
|
fetch('index.php', { method: 'POST', body: fd })
|
|
.then(r => r.json())
|
|
.then(() => {
|
|
map.closePopup();
|
|
if (parsilLayers[id]) { parsilLayer.removeLayer(parsilLayers[id]); delete parsilLayers[id]; }
|
|
showToast('Data parsil dihapus', '#ef4444');
|
|
});
|
|
}
|
|
|
|
// ════════════════════════════════════════
|
|
// GEOMETRY EDITING
|
|
// ════════════════════════════════════════
|
|
|
|
let geomEditState = null; // { type: 'jalan'|'parsil', id, originalGeojson }
|
|
|
|
function startGeomEdit(type, id) {
|
|
// If something is already being edited, cancel it first
|
|
if (geomEditState) cancelGeomEdit();
|
|
|
|
map.closePopup();
|
|
const layer = type === 'jalan' ? jalanLayers[id] : parsilLayers[id];
|
|
if (!layer) return;
|
|
|
|
// Store original geometry so we can revert on cancel
|
|
const originalGeojson = JSON.stringify(layer.toGeoJSON().geometry);
|
|
geomEditState = { type, id, originalGeojson };
|
|
|
|
layer.enableEdit();
|
|
|
|
const bar = document.getElementById('geom-edit-bar');
|
|
document.getElementById('geom-edit-label').textContent =
|
|
type === 'jalan'
|
|
? 'Seret titik untuk ubah bentuk jalan. Klik titik tengah untuk tambah titik baru.'
|
|
: 'Seret titik untuk ubah bentuk parsil. Klik titik tengah untuk tambah titik baru.';
|
|
bar.classList.add('visible');
|
|
|
|
showToast('Mode edit geometri aktif', '#f59e0b');
|
|
}
|
|
|
|
function saveGeomEdit() {
|
|
if (!geomEditState) return;
|
|
const { type, id } = geomEditState;
|
|
const layer = type === 'jalan' ? jalanLayers[id] : parsilLayers[id];
|
|
if (!layer) return;
|
|
|
|
layer.disableEdit();
|
|
|
|
if (type === 'jalan') {
|
|
const latlngs = layer.getLatLngs();
|
|
const panjang = calcPolylineLength(latlngs);
|
|
const geojson = JSON.stringify(layer.toGeoJSON().geometry);
|
|
const fd = new FormData();
|
|
fd.append('action', 'update_jalan');
|
|
fd.append('id', id);
|
|
fd.append('panjang', panjang);
|
|
fd.append('geojson', geojson);
|
|
// Fetch current name/status so we don't blank them
|
|
fetch('index.php?get=jalan')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
const d = data.find(x => x.id == id);
|
|
fd.append('nama', d ? d.nama_jalan : '');
|
|
fd.append('status', d ? d.status_jalan : 'Kabupaten');
|
|
fetch('index.php', { method: 'POST', body: fd })
|
|
.then(r => r.json())
|
|
.then(() => {
|
|
// Refresh popup with updated length
|
|
if (d) layer.setPopupContent(buildJalanPopup({ ...d, panjang_meter: panjang, geojson }));
|
|
showToast('Geometri jalan disimpan ✓', '#10b981');
|
|
});
|
|
});
|
|
} else {
|
|
const latlngs = layer.getLatLngs()[0];
|
|
const luas = calcPolygonArea(latlngs);
|
|
const geojson = JSON.stringify(layer.toGeoJSON().geometry);
|
|
const fd = new FormData();
|
|
fd.append('action', 'update_parsil');
|
|
fd.append('id', id);
|
|
fd.append('luas', luas);
|
|
fd.append('geojson', geojson);
|
|
fetch('index.php?get=parsil')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
const d = data.find(x => x.id == id);
|
|
fd.append('nama', d ? d.nama_parsil : '');
|
|
fd.append('status', d ? d.status_kepemilikan : 'SHM');
|
|
fetch('index.php', { method: 'POST', body: fd })
|
|
.then(r => r.json())
|
|
.then(() => {
|
|
if (d) layer.setPopupContent(buildParsilPopup({ ...d, luas_m2: luas, geojson }));
|
|
showToast('Geometri parsil disimpan ✓', '#10b981');
|
|
});
|
|
});
|
|
}
|
|
|
|
document.getElementById('geom-edit-bar').classList.remove('visible');
|
|
geomEditState = null;
|
|
}
|
|
|
|
function cancelGeomEdit() {
|
|
if (!geomEditState) return;
|
|
const { type, id, originalGeojson } = geomEditState;
|
|
const layer = type === 'jalan' ? jalanLayers[id] : parsilLayers[id];
|
|
|
|
if (layer) {
|
|
layer.disableEdit();
|
|
// Restore original geometry
|
|
const gj = JSON.parse(originalGeojson);
|
|
if (type === 'jalan') {
|
|
const latlngs = gj.coordinates.map(c => L.latLng(c[1], c[0]));
|
|
layer.setLatLngs(latlngs);
|
|
} else {
|
|
const latlngs = gj.coordinates[0].map(c => L.latLng(c[1], c[0]));
|
|
layer.setLatLngs([latlngs]);
|
|
}
|
|
}
|
|
|
|
document.getElementById('geom-edit-bar').classList.remove('visible');
|
|
geomEditState = null;
|
|
showToast('Edit geometri dibatalkan', '#6b7280');
|
|
}
|
|
|
|
// ════════════════════════════════════════
|
|
// LOAD DATA
|
|
// ════════════════════════════════════════
|
|
|
|
function loadAll() {
|
|
fetch('index.php?get=jalan')
|
|
.then(r => r.json())
|
|
.then(data => data.forEach(d => addJalanLayer(d)));
|
|
|
|
fetch('index.php?get=parsil')
|
|
.then(r => r.json())
|
|
.then(data => data.forEach(d => addParsilLayer(d)));
|
|
}
|
|
|
|
loadAll();
|
|
</script>
|
|
</body>
|
|
</html>
|