213 lines
9.4 KiB
HTML
213 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Map Point Manager</title>
|
|
|
|
<!-- Leaflet CSS -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h1>🗺️ MapPoints</h1>
|
|
<p class="subtitle">Manage Your Locations</p>
|
|
</div>
|
|
|
|
<div class="sidebar-content">
|
|
<div class="stats-grid">
|
|
<div class="stats-card">
|
|
<div class="stat-number" id="marker-count">0</div>
|
|
<div class="stat-label">Point</div>
|
|
</div>
|
|
<div class="stats-card">
|
|
<div class="stat-number" id="road-count">0</div>
|
|
<div class="stat-label">Road</div>
|
|
</div>
|
|
<div class="stats-card">
|
|
<div class="stat-number" id="parcel-count">0</div>
|
|
<div class="stat-label">Parcel</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-actions">
|
|
<button id="add-point-btn" class="btn-primary btn-lg">
|
|
<span class="btn-icon">+</span>
|
|
Add Point Manually
|
|
</button>
|
|
<button id="draw-road-btn" class="btn-primary btn-lg">
|
|
<span class="btn-icon">🛣️</span>
|
|
Draw Road
|
|
</button>
|
|
<button id="draw-parcel-btn" class="btn-primary btn-lg">
|
|
<span class="btn-icon">🧱</span>
|
|
Draw Parcel
|
|
</button>
|
|
</div>
|
|
|
|
<div class="draw-actions hidden" id="draw-actions">
|
|
<button id="finish-draw-btn" class="btn-secondary">Finish Draw</button>
|
|
<button id="cancel-draw-btn" class="btn-secondary">Cancel Draw</button>
|
|
</div>
|
|
|
|
<div class="instructions-box">
|
|
<h3>How to Use</h3>
|
|
<div class="instructions-list">
|
|
<div class="instruction-item">
|
|
<span class="instruction-num">1</span>
|
|
<span>Click on the map to create a point or draw a line/polygon.</span>
|
|
</div>
|
|
<div class="instruction-item">
|
|
<span class="instruction-num">2</span>
|
|
<span>Use Draw Road or Draw Parcel, then click vertices on the map.</span>
|
|
</div>
|
|
<div class="instruction-item">
|
|
<span class="instruction-num">3</span>
|
|
<span>Finish the shape and save; length/area is calculated automatically.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<h3>💡 Tip</h3>
|
|
<p>Click on map for quick point creation with auto-filled coordinates, or use "Add Point Manually" button for custom entry.</p>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<div id="map"></div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Feature Modal -->
|
|
<div id="feature-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="modal-title">Add New Feature</h2>
|
|
<span class="close">×</span>
|
|
</div>
|
|
|
|
<form id="feature-form">
|
|
<div class="form-group" id="field-name-group">
|
|
<label for="feature-name" id="label-feature-name">Name *</label>
|
|
<input type="text" id="feature-name" name="name" required
|
|
placeholder="e.g., Coffee Shop, Jalan Utama, Kavling A">
|
|
</div>
|
|
|
|
<div class="form-group" id="field-status-group" style="display:none;">
|
|
<label for="feature-status">Status *</label>
|
|
<select id="feature-status" name="status">
|
|
<option value="">Select status</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-row" id="point-coords">
|
|
<div class="form-group">
|
|
<label for="feature-latitude">Latitude *</label>
|
|
<input type="number" id="feature-latitude" name="latitude"
|
|
step="any" placeholder="Auto-filled" readonly-display>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="feature-longitude">Longitude *</label>
|
|
<input type="number" id="feature-longitude" name="longitude"
|
|
step="any" placeholder="Auto-filled" readonly-display>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group checkbox-group" id="feature-checkbox-group">
|
|
<label class="checkbox-label" for="feature-24hours">
|
|
<input type="checkbox" id="feature-24hours" name="open_24_hours">
|
|
<span>Open 24 Hours</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-info" id="feature-form-info"></div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="btn-secondary" onclick="closeFeatureModal()">Cancel</button>
|
|
<button type="submit" class="btn-primary">Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Road Modal -->
|
|
<div id="road-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="road-modal-title">Add Road</h2>
|
|
<span class="close road-close">×</span>
|
|
</div>
|
|
<form id="road-form">
|
|
<div class="form-group">
|
|
<label for="road-name">Road Name *</label>
|
|
<input type="text" id="road-name" name="roadName" required placeholder="e.g., Jalan Ahmad Yani">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="road-status">Road Status *</label>
|
|
<select id="road-status" name="roadStatus" required>
|
|
<option value="Jalan Nasional">Jalan Nasional</option>
|
|
<option value="Jalan Provinsi">Jalan Provinsi</option>
|
|
<option value="Jalan Kabupaten">Jalan Kabupaten</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="road-length">Panjang Jalan (meter)</label>
|
|
<input type="number" id="road-length" name="roadLength" readonly-display readonly>
|
|
</div>
|
|
<div class="form-info" id="road-form-info"></div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn-secondary" onclick="closeRoadModal()">Cancel</button>
|
|
<button type="submit" class="btn-primary">Save Road</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Parcel Modal -->
|
|
<div id="parcel-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="parcel-modal-title">Add Parcel</h2>
|
|
<span class="close parcel-close">×</span>
|
|
</div>
|
|
<form id="parcel-form">
|
|
<div class="form-group">
|
|
<label for="parcel-owner">Status Kepemilikan *</label>
|
|
<select id="parcel-owner" name="parcelOwner" required>
|
|
<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="form-group">
|
|
<label for="parcel-area">Luas Tanah (m²)</label>
|
|
<input type="number" id="parcel-area" name="parcelArea" readonly-display readonly>
|
|
</div>
|
|
<div class="form-info" id="parcel-form-info"></div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn-secondary" onclick="closeParcelModal()">Cancel</button>
|
|
<button type="submit" class="btn-primary">Save Parcel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Leaflet JS -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.geometryutil/0.9.3/leaflet.geometryutil.min.js"></script>
|
|
|
|
<!-- Custom JS -->
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|