powji17
90 lines
4.6 KiB
HTML
90 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Sistem Pemetaan</title>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css" />
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div id="sidebar">
|
|
<h3>Menu Peta</h3>
|
|
|
|
<div class="mode-selector">
|
|
<strong>Pilih Mode Pemetaan:</strong><br><br>
|
|
<div class="mode-buttons">
|
|
<button class="mode-btn active" data-mode="point" onclick="ubahMode('point')">
|
|
<i class="fa-solid fa-gas-pump"></i> SPBU
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="polyline-actions" class="action-buttons">
|
|
<strong><i class="fa-solid fa-road"></i> Gambar Jalan Baru</strong>
|
|
<p style="font-size: 11px; color: #666;">Klik di peta untuk menggambar garis.</p>
|
|
<label>Nama Jalan:</label>
|
|
<input type="text" id="input_nama_jalan" placeholder="Masukkan nama...">
|
|
<label>Status Jalan:</label>
|
|
<select id="input_status_jalan">
|
|
<option value="Nasional">Nasional (Merah)</option>
|
|
<option value="Provinsi">Provinsi (Kuning)</option>
|
|
<option value="Kabupaten">Kabupaten (Hijau)</option>
|
|
</select>
|
|
<button onclick="simpanPolyline()" class="btn-success">Simpan Jalan</button>
|
|
<button onclick="batalPolyline()" class="btn-danger">Batal</button>
|
|
</div>
|
|
|
|
<div id="polygon-actions" class="action-buttons">
|
|
<strong><i class="fa-solid fa-draw-polygon"></i> Gambar Kavling</strong>
|
|
<p style="font-size: 11px; color: #666;">Klik min. 3 titik untuk area.</p>
|
|
<label>Nama Pemilik/Kavling:</label>
|
|
<input type="text" id="input_nama_kavling" placeholder="Masukkan nama...">
|
|
<label>Status Tanah:</label>
|
|
<select id="input_status_tanah">
|
|
<option value="SHM">SHM (Merah)</option>
|
|
<option value="HGB">HGB (Biru)</option>
|
|
<option value="HGU">HGU (Hijau)</option>
|
|
<option value="HP">HP (Kuning)</option>
|
|
</select>
|
|
<button onclick="simpanPolygon()" class="btn-success">Simpan Area</button>
|
|
<button onclick="batalPolygon()" class="btn-danger">Batal</button>
|
|
</div>
|
|
|
|
<div id="edit-jalan-actions" class="action-buttons">
|
|
<strong><i class="fa-solid fa-pen-ruler"></i> Mode Edit Jalan Aktif</strong>
|
|
<p style="font-size: 11px; color: #666;">Pilih salah satu jalan di peta yang ingin diubah bentuknya.</p>
|
|
<div id="info-edit-jalan" style="display:none; margin-bottom:10px; padding:10px; background:#f9f9f9; border:1px solid #ccc; border-radius:4px;">
|
|
<b id="nama-jalan-edit">Nama Jalan</b><br>
|
|
<span style="font-size:12px; color:gray;">Geser titik-titik (kotak putih) pada jalan di peta untuk mengubah bentuknya.</span>
|
|
</div>
|
|
<button id="btn-simpan-edit-jalan" onclick="simpanEditPolyline()" class="btn-success" style="display:none;">Simpan Perubahan Jalan</button>
|
|
</div>
|
|
|
|
<div id="edit-kavling-actions" class="action-buttons">
|
|
<strong><i class="fa-solid fa-pen-ruler"></i> Mode Edit Kavling Aktif</strong>
|
|
<p style="font-size: 11px; color: #666;">Pilih salah satu kavling di peta yang ingin diubah bentuknya.</p>
|
|
<div id="info-edit-kavling" style="display:none; margin-bottom:10px; padding:10px; background:#f9f9f9; border:1px solid #ccc; border-radius:4px;">
|
|
<b id="nama-kavling-edit">Nama Kavling</b><br>
|
|
<span style="font-size:12px; color:gray;">Geser titik-titik (kotak putih) pada area di peta untuk mengubah bentuknya.</span>
|
|
</div>
|
|
<button id="btn-simpan-edit-kavling" onclick="simpanEditPolygon()" class="btn-success" style="display:none;">Simpan Perubahan Kavling</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="map-container">
|
|
<div id="map"></div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |