Remove fitur jalan, parsil, dan spbu
This commit is contained in:
@@ -15,7 +15,7 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') {
|
||||
$tabel = $_POST['tabel'];
|
||||
|
||||
// Daftar tabel yang diizinkan (untuk keamanan)
|
||||
$allowed_tables = ['spbu_locations', 'jalan', 'parsil', 'rumah_ibadah', 'penduduk_miskin'];
|
||||
$allowed_tables = ['rumah_ibadah', 'penduduk_miskin'];
|
||||
|
||||
if (in_array($tabel, $allowed_tables)) {
|
||||
$stmt = $conn->prepare("DELETE FROM $tabel WHERE id = ?");
|
||||
|
||||
+3
-160
@@ -12,7 +12,6 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
|
||||
<title>Sistem WebGIS Terpadu — Kota Pontianak</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/leaflet.draw/1.0.4/leaflet.draw.css" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap"
|
||||
rel="stylesheet">
|
||||
@@ -72,9 +71,6 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
|
||||
<!-- Kotak Pilihan Dropdown yang Luas -->
|
||||
<div class="custom-select-options" id="custom-select-options">
|
||||
<div class="custom-option selected" data-value="Semua">Semua Layer</div>
|
||||
<div class="custom-option" data-value="SPBU">SPBU</div>
|
||||
<div class="custom-option" data-value="Jalan">Jaringan Jalan</div>
|
||||
<div class="custom-option" data-value="Parsil">Parsil / Lahan</div>
|
||||
<div class="custom-option" data-value="Rumah Ibadah">Rumah Ibadah</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -87,7 +83,7 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</span>
|
||||
<input type="text" id="search-input" placeholder="Cari nama lokasi, jalan, atau lahan..."
|
||||
<input type="text" id="search-input" placeholder="Cari nama lokasi atau rumah ibadah..."
|
||||
onkeyup="jalankanPencarian()" oninput="toggleClearBtn()" autocomplete="off">
|
||||
<button class="search-clear-btn" id="search-clear" onclick="clearSearch()" title="Hapus pencarian">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
||||
@@ -191,19 +187,7 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
|
||||
|
||||
<!-- Tab Navigation -->
|
||||
<div class="sidebar-tabs">
|
||||
<button class="stab active" data-tab="spbu" onclick="switchSidebarTab('spbu')">
|
||||
<span class="stab-icon">⛽</span>
|
||||
<span>SPBU</span>
|
||||
</button>
|
||||
<button class="stab" data-tab="jalan" onclick="switchSidebarTab('jalan')">
|
||||
<span class="stab-icon">🛣️</span>
|
||||
<span>Jalan</span>
|
||||
</button>
|
||||
<button class="stab" data-tab="parsil" onclick="switchSidebarTab('parsil')">
|
||||
<span class="stab-icon">🏘️</span>
|
||||
<span>Parsil</span>
|
||||
</button>
|
||||
<button class="stab" data-tab="ibadah" onclick="switchSidebarTab('ibadah')">
|
||||
<button class="stab active" data-tab="ibadah" onclick="switchSidebarTab('ibadah')">
|
||||
<span class="stab-icon">🕌</span>
|
||||
<span>Ibadah</span>
|
||||
</button>
|
||||
@@ -216,147 +200,8 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
|
||||
<!-- Scrollable Content -->
|
||||
<div class="sidebar-body">
|
||||
|
||||
<!-- ===== TAB: SPBU ===== -->
|
||||
<div class="stab-content active" id="tab-spbu">
|
||||
<div class="step-guide">
|
||||
<div class="step-badge">Langkah 1</div>
|
||||
<p>Klik tombol <strong>Tandai Lokasi</strong>, lalu klik titik di peta untuk menentukan posisi SPBU.
|
||||
</p>
|
||||
</div>
|
||||
<button class="btn-pick-location" id="btn-pick-spbu" onclick="activatePickMode('spbu')">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
Tandai Lokasi di Peta
|
||||
</button>
|
||||
<div class="coords-display" id="coords-spbu">
|
||||
<span class="coords-label">Koordinat:</span>
|
||||
<span class="coords-value" id="coords-spbu-val">Belum dipilih</span>
|
||||
</div>
|
||||
<div class="step-guide" style="margin-top:14px;">
|
||||
<div class="step-badge">Langkah 2</div>
|
||||
<p>Isi detail informasi SPBU di bawah ini.</p>
|
||||
</div>
|
||||
<div class="sfield">
|
||||
<label class="sfield-label">Nama SPBU <span class="required">*</span></label>
|
||||
<input type="text" id="sb_nama_spbu" class="sinput" placeholder="Contoh: SPBU Jl. Ahmad Yani">
|
||||
</div>
|
||||
<div class="sfield">
|
||||
<label class="sfield-label">Nomor Telepon</label>
|
||||
<input type="text" id="sb_nohp_spbu" class="sinput" placeholder="Contoh: 0561-xxxxxx">
|
||||
</div>
|
||||
<div class="sfield">
|
||||
<label class="sfield-label">Status Operasional</label>
|
||||
<select id="sb_kategori_spbu" class="sselect">
|
||||
<option value="Ya">Buka 24 Jam</option>
|
||||
<option value="Tidak">Reguler</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn-save-sidebar" onclick="saveSPBUSidebar()">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Simpan SPBU
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ===== TAB: JALAN ===== -->
|
||||
<div class="stab-content" id="tab-jalan">
|
||||
<div class="step-guide">
|
||||
<div class="step-badge">Langkah 1</div>
|
||||
<p>Klik tombol <strong>Gambar Jalur</strong>, lalu klik titik-titik di peta membentuk ruas jalan.
|
||||
Klik dua kali untuk selesai.</p>
|
||||
</div>
|
||||
<button class="btn-pick-location btn-draw" id="btn-draw-jalan" onclick="activateDrawMode('polyline')">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
Gambar Jalur di Peta
|
||||
</button>
|
||||
<div class="coords-display" id="coords-jalan">
|
||||
<span class="coords-label">Status:</span>
|
||||
<span class="coords-value" id="coords-jalan-val">Belum digambar</span>
|
||||
</div>
|
||||
<div class="step-guide" style="margin-top:14px;">
|
||||
<div class="step-badge">Langkah 2</div>
|
||||
<p>Isi detail informasi jalan di bawah ini.</p>
|
||||
</div>
|
||||
<div class="sfield">
|
||||
<label class="sfield-label">Nama Jalan <span class="required">*</span></label>
|
||||
<input type="text" id="sb_nama_jalan" class="sinput" placeholder="Contoh: Jl. Gajah Mada">
|
||||
</div>
|
||||
<div class="sfield">
|
||||
<label class="sfield-label">Status Jalan</label>
|
||||
<select id="sb_status_jalan" class="sselect">
|
||||
<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="sfield">
|
||||
<label class="sfield-label">Panjang Terukur</label>
|
||||
<input type="text" id="sb_panjang_jalan" class="sinput" placeholder="Otomatis terisi" readonly>
|
||||
</div>
|
||||
<button class="btn-save-sidebar btn-teal" onclick="saveJalanSidebar()">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Simpan Jalan
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ===== TAB: PARSIL ===== -->
|
||||
<div class="stab-content" id="tab-parsil">
|
||||
<div class="step-guide">
|
||||
<div class="step-badge">Langkah 1</div>
|
||||
<p>Klik tombol <strong>Gambar Parsil</strong>, lalu klik titik-titik untuk membentuk batas lahan.
|
||||
Klik dua kali untuk selesai.</p>
|
||||
</div>
|
||||
<button class="btn-pick-location btn-purple" id="btn-draw-parsil" onclick="activateDrawMode('polygon')">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
||||
</svg>
|
||||
Gambar Area Parsil
|
||||
</button>
|
||||
<div class="coords-display" id="coords-parsil">
|
||||
<span class="coords-label">Status:</span>
|
||||
<span class="coords-value" id="coords-parsil-val">Belum digambar</span>
|
||||
</div>
|
||||
<div class="step-guide" style="margin-top:14px;">
|
||||
<div class="step-badge">Langkah 2</div>
|
||||
<p>Isi detail informasi lahan di bawah ini.</p>
|
||||
</div>
|
||||
<div class="sfield">
|
||||
<label class="sfield-label">Nama Pemilik <span class="required">*</span></label>
|
||||
<input type="text" id="sb_nama_parsil" class="sinput" placeholder="Contoh: Budi Santoso">
|
||||
</div>
|
||||
<div class="sfield">
|
||||
<label class="sfield-label">Status Tanah</label>
|
||||
<select id="sb_status_parsil" class="sselect">
|
||||
<option value="SHM">SHM (Hak Milik)</option>
|
||||
<option value="HGB">HGB (Guna Bangunan)</option>
|
||||
<option value="HGU">HGU (Guna Usaha)</option>
|
||||
<option value="HP">HP (Hak Pakai)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="sfield">
|
||||
<label class="sfield-label">Luas Terukur</label>
|
||||
<input type="text" id="sb_luas_parsil" class="sinput" placeholder="Otomatis terisi" readonly>
|
||||
</div>
|
||||
<button class="btn-save-sidebar btn-purple-solid" onclick="saveParsil_Sidebar()">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Simpan Parsil
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ===== TAB: RUMAH IBADAH ===== -->
|
||||
<div class="stab-content" id="tab-ibadah">
|
||||
<div class="stab-content active" id="tab-ibadah">
|
||||
<div class="step-guide">
|
||||
<div class="step-badge">Langkah 1</div>
|
||||
<p>Klik tombol <strong>Tandai Lokasi</strong>, lalu klik titik di peta untuk menentukan posisi rumah
|
||||
@@ -449,8 +294,6 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
|
||||
<div id="map" style="padding-top: 56px; height: 100vh; box-sizing: border-box;"></div>
|
||||
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,16 +1,10 @@
|
||||
<?php
|
||||
include 'koneksi.php';
|
||||
|
||||
// Cek data apa yang diminta, jika kosong jadikan 'spbu' sebagai default
|
||||
$jenis = isset($_GET['jenis']) ? $_GET['jenis'] : 'spbu';
|
||||
// Cek data apa yang diminta, jika kosong jadikan 'rumah_ibadah' sebagai default
|
||||
$jenis = isset($_GET['jenis']) ? $_GET['jenis'] : 'rumah_ibadah';
|
||||
|
||||
if ($jenis == 'spbu') {
|
||||
$sql = "SELECT * FROM spbu_locations";
|
||||
} else if ($jenis == 'jalan') {
|
||||
$sql = "SELECT * FROM jalan";
|
||||
} else if ($jenis == 'parsil') {
|
||||
$sql = "SELECT * FROM parsil";
|
||||
} else if ($jenis == 'rumah_ibadah') {
|
||||
if ($jenis == 'rumah_ibadah') {
|
||||
$sql = "SELECT * FROM rumah_ibadah";
|
||||
} else if ($jenis == 'penduduk_miskin') {
|
||||
$sql = "SELECT * FROM penduduk_miskin";
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
<?php
|
||||
session_start();
|
||||
|
||||
// Tolak akses jika bukan admin
|
||||
if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin') {
|
||||
http_response_code(403); // Status Forbidden
|
||||
echo "Akses ditolak! Anda bukan operator.";
|
||||
exit;
|
||||
}
|
||||
include 'koneksi.php';
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
|
||||
$nama = $_POST['nama_spbu'];
|
||||
$hp = $_POST['no_hp'];
|
||||
$kategori = $_POST['kategori'];
|
||||
$lat = $_POST['latitude'];
|
||||
$lng = $_POST['longitude'];
|
||||
|
||||
// Perhatikan: id dihilangkan, tanda tanya hanya 5
|
||||
$stmt = $conn->prepare("INSERT INTO spbu_locations (nama_spbu, no_hp, kategori, latitude, longitude) VALUES (?, ?, ?, ?, ?)");
|
||||
|
||||
// Perhatikan: huruf sssdd (5 huruf untuk 5 variabel)
|
||||
$stmt->bind_param("sssdd", $nama, $hp, $kategori, $lat, $lng);
|
||||
|
||||
if ($stmt->execute()) {
|
||||
echo "Data SPBU berhasil disimpan!";
|
||||
} else {
|
||||
echo "Gagal menyimpan data: " . $conn->error;
|
||||
}
|
||||
|
||||
$stmt->close();
|
||||
$conn->close();
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
<?php
|
||||
session_start();
|
||||
|
||||
// Tolak akses jika bukan admin
|
||||
if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin') {
|
||||
http_response_code(403); // Status Forbidden
|
||||
echo "Akses ditolak! Anda bukan operator.";
|
||||
exit;
|
||||
}
|
||||
include 'koneksi.php';
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
|
||||
$nama = $_POST['nama_jalan'];
|
||||
$status = $_POST['status'];
|
||||
$panjang = $_POST['panjang'];
|
||||
$koordinat = $_POST['koordinat'];
|
||||
|
||||
// Perhatikan: id dihilangkan, tanda tanya hanya 4
|
||||
$stmt = $conn->prepare("INSERT INTO jalan (nama_jalan, status, panjang, koordinat) VALUES (?, ?, ?, ?)");
|
||||
|
||||
// Perhatikan: huruf ssds (4 huruf untuk 4 variabel)
|
||||
$stmt->bind_param("ssds", $nama, $status, $panjang, $koordinat);
|
||||
|
||||
if ($stmt->execute()) {
|
||||
echo "Data Jalan berhasil disimpan!";
|
||||
} else {
|
||||
echo "Gagal: " . $conn->error;
|
||||
}
|
||||
|
||||
$stmt->close();
|
||||
$conn->close();
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
<?php
|
||||
session_start();
|
||||
|
||||
// Tolak akses jika bukan admin
|
||||
if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin') {
|
||||
http_response_code(403); // Status Forbidden
|
||||
echo "Akses ditolak! Anda bukan operator.";
|
||||
exit;
|
||||
}
|
||||
include 'koneksi.php';
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
|
||||
$nama = $_POST['nama_pemilik'];
|
||||
$status = $_POST['status'];
|
||||
$luas = $_POST['luas'];
|
||||
$koordinat = $_POST['koordinat'];
|
||||
|
||||
// Perhatikan: id dihilangkan, tanda tanya hanya 4
|
||||
$stmt = $conn->prepare("INSERT INTO parsil (nama_pemilik, status, luas, koordinat) VALUES (?, ?, ?, ?)");
|
||||
|
||||
// Perhatikan: huruf ssds (4 huruf untuk 4 variabel)
|
||||
$stmt->bind_param("ssds", $nama, $status, $luas, $koordinat);
|
||||
|
||||
if ($stmt->execute()) {
|
||||
echo "Data Parsil berhasil disimpan!";
|
||||
} else {
|
||||
echo "Gagal: " . $conn->error;
|
||||
}
|
||||
|
||||
$stmt->close();
|
||||
$conn->close();
|
||||
}
|
||||
+11
-501
@@ -6,18 +6,13 @@ var map = L.map('map', { zoomControl: false }).setView([-0.0227, 109.3425], 14);
|
||||
// Zoom control di kanan bawah (lebih bersih)
|
||||
L.control.zoom({ position: 'bottomright' }).addTo(map);
|
||||
|
||||
// Membuat panel khusus untuk Jalan
|
||||
map.createPane('jalanPane');
|
||||
map.getPane('jalanPane').style.zIndex = 450;
|
||||
// Custom pane initialization removed
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
|
||||
// Layer Group untuk masing-masing data
|
||||
var markersLayer = L.layerGroup().addTo(map);
|
||||
var jalanLayer = L.layerGroup().addTo(map);
|
||||
var parsilLayer = L.layerGroup().addTo(map);
|
||||
var drawnItems = new L.FeatureGroup().addTo(map);
|
||||
//var batasKotaLayer = L.layerGroup().addTo(map);
|
||||
//var sungaiLayer = L.layerGroup().addTo(map);
|
||||
@@ -30,9 +25,6 @@ var povertyHeatLayer = L.heatLayer([], { radius: 22, blur: 18, maxZoom: 17 }).ad
|
||||
|
||||
// Inisialisasi Layers Control (di kanan atas)
|
||||
var overlayMaps = {
|
||||
"⛽ Stasiun SPBU": markersLayer,
|
||||
"🛣️ Jaringan Jalan": jalanLayer,
|
||||
"🏘️ Parsil Bangunan": parsilLayer,
|
||||
"🕌 Rumah Ibadah": rumahIbadahLayer,
|
||||
"🔥 Kepadatan Kemiskinan (Heatmap)": povertyHeatLayer,
|
||||
"👥 Penduduk Terdekat (Analisis)": pendudukMiskinLayer
|
||||
@@ -42,23 +34,7 @@ L.control.layers(null, overlayMaps, { collapsed: true, position: 'bottomleft' })
|
||||
// ==========================================
|
||||
// ICON DEFINITIONS
|
||||
// ==========================================
|
||||
var greenIcon = L.icon({
|
||||
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
|
||||
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
|
||||
iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41]
|
||||
});
|
||||
|
||||
var redIcon = L.icon({
|
||||
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
|
||||
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
|
||||
iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41]
|
||||
});
|
||||
|
||||
var blueIcon = L.icon({
|
||||
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png',
|
||||
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
|
||||
iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41]
|
||||
});
|
||||
// Unused marker icons removed
|
||||
|
||||
// Icon Rumah Ibadah Kustom — bangunan rumah ibadah bergaya universal
|
||||
var rumahIbadahIcon = L.divIcon({
|
||||
@@ -79,231 +55,12 @@ var rumahIbadahIcon = L.divIcon({
|
||||
popupAnchor: [0, -38]
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// 2. TOOLBAR LEAFLET DRAW
|
||||
// ==========================================
|
||||
var drawControl = new L.Control.Draw({
|
||||
draw: {
|
||||
polyline: true, polygon: true, marker: true,
|
||||
circle: false, rectangle: false, circlemarker: false
|
||||
},
|
||||
edit: false
|
||||
});
|
||||
//map.addControl(drawControl);
|
||||
// Leaflet Draw toolbar removed
|
||||
|
||||
// ==========================================
|
||||
// 3. FUNGSI LOAD DATA DARI DATABASE
|
||||
// ==========================================
|
||||
function loadSPBU() {
|
||||
markersLayer.clearLayers();
|
||||
spbuMarkers = {};
|
||||
|
||||
fetch('load.php?jenis=spbu').then(res => res.json()).then(data => {
|
||||
data.forEach(item => {
|
||||
var actionButtons = '';
|
||||
|
||||
if (IS_ADMIN) {
|
||||
actionButtons = `
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-edit" onclick="formEditSPBU('${item.id}', '${item.nama_spbu}', '${item.no_hp}', '${item.kategori}')">✏️ Edit</button>
|
||||
<button class="btn btn-delete" onclick="deleteData('spbu_locations', '${item.id}')">🗑️ Hapus</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
var statusBuka = item.kategori === 'Ya' ? 'Buka 24 Jam' : 'Reguler';
|
||||
var icon = item.kategori === 'Ya' ? greenIcon : redIcon;
|
||||
var statusColor = item.kategori === 'Ya' ? '#10b981' : '#ef4444';
|
||||
|
||||
var viewHTML = `
|
||||
<div class="popup-container" id="popup-spbu-${item.id}">
|
||||
<div class="popup-header">
|
||||
<h4>${item.nama_spbu}</h4>
|
||||
<span class="popup-type-badge">⛽ Stasiun SPBU</span>
|
||||
</div>
|
||||
<div class="popup-body">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Telepon</span>
|
||||
<span class="info-value">${item.no_hp || '—'}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Status Operasional</span>
|
||||
<span class="info-value" style="color:${statusColor}; font-weight:600;">● ${statusBuka}</span>
|
||||
</div>
|
||||
|
||||
${actionButtons}
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
var marker = L.marker([item.latitude, item.longitude], { icon: icon, draggable: false })
|
||||
.bindPopup(viewHTML).addTo(markersLayer);
|
||||
|
||||
spbuMarkers[String(item.id)] = marker;
|
||||
marker.on('click', function () { map.flyTo(marker.getLatLng(), 17, { animate: true }); });
|
||||
|
||||
databasePencarian.push({
|
||||
namaLower: item.nama_spbu.toLowerCase(),
|
||||
namaAsli: item.nama_spbu,
|
||||
kategori: 'SPBU',
|
||||
ikon: '⛽',
|
||||
tipe: 'titik',
|
||||
layer: marker
|
||||
});
|
||||
|
||||
marker.on('dragend', function (e) {
|
||||
var position = marker.getLatLng();
|
||||
if (document.getElementById('edit_lat')) {
|
||||
document.getElementById('edit_lat').value = position.lat;
|
||||
document.getElementById('edit_lng').value = position.lng;
|
||||
}
|
||||
marker.openPopup();
|
||||
});
|
||||
});
|
||||
}).catch(e => console.log('Belum ada data SPBU'));
|
||||
}
|
||||
|
||||
function openEditKonfirmasi(id, nama, hp, kategori, lat, lng) {
|
||||
var marker = spbuMarkers[String(id)];
|
||||
var editHTML = `
|
||||
<div class="popup-container">
|
||||
<div class="popup-header" style="background: linear-gradient(135deg, #92400e, #f59e0b);">
|
||||
<h4>Konfirmasi Perubahan</h4>
|
||||
<span class="popup-type-badge">📍 Posisi telah digeser</span>
|
||||
</div>
|
||||
<div class="popup-body">
|
||||
<form onsubmit="updateData(event, 'spbu_locations', '${id}')">
|
||||
<input type="text" id="edit_nama" value="${nama}" placeholder="Nama SPBU" required>
|
||||
<input type="text" id="edit_hp" value="${hp}" placeholder="No HP">
|
||||
<select id="edit_kategori">
|
||||
<option value="Ya" ${kategori === 'Ya' ? 'selected' : ''}>Buka 24 Jam</option>
|
||||
<option value="Tidak" ${kategori === 'Tidak' ? 'selected' : ''}>Reguler</option>
|
||||
</select>
|
||||
<input type="hidden" id="edit_lat" value="${lat}">
|
||||
<input type="hidden" id="edit_lng" value="${lng}">
|
||||
<div class="btn-group">
|
||||
<button type="submit" class="btn btn-save">💾 Simpan</button>
|
||||
<button type="button" class="btn btn-delete" onclick="map.closePopup();">Batal</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>`;
|
||||
marker.setPopupContent(editHTML);
|
||||
marker.openPopup();
|
||||
}
|
||||
|
||||
function loadJalan() {
|
||||
jalanLayer.clearLayers();
|
||||
|
||||
fetch('load.php?jenis=jalan').then(res => res.json()).then(data => {
|
||||
data.forEach(item => {
|
||||
try {
|
||||
var actionButtons = '';
|
||||
|
||||
if (IS_ADMIN) {
|
||||
actionButtons = `
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-edit" onclick="formEditJalan('${item.id}', '${item.nama_jalan}', '${item.status}')">✏️ Edit</button>
|
||||
<button class="btn btn-delete" onclick="deleteData('jalan', '${item.id}')">🗑️ Hapus</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
var geom = JSON.parse(item.koordinat);
|
||||
var warna = item.status === 'Jalan Nasional' ? '#ef4444'
|
||||
: item.status === 'Jalan Provinsi' ? '#eab308'
|
||||
: '#10b981';
|
||||
|
||||
var viewHTML = `
|
||||
<div class="popup-container" id="popup-jalan-${item.id}">
|
||||
<div class="popup-header" style="background: linear-gradient(135deg, #134e4a, #0f766e);">
|
||||
<h4>${item.nama_jalan}</h4>
|
||||
<span class="popup-type-badge">🛣️ Jaringan Jalan</span>
|
||||
</div>
|
||||
<div class="popup-body">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Status</span>
|
||||
<span class="info-value">${item.status}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Panjang</span>
|
||||
<span class="info-value">${item.panjang} m</span>
|
||||
</div>
|
||||
${actionButtons}
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
var layerJalan = L.geoJSON(geom, { style: { color: warna, weight: 5 } })
|
||||
.bindPopup(viewHTML).addTo(jalanLayer);
|
||||
|
||||
layerJalan.on('click', function () { map.fitBounds(layerJalan.getBounds()); });
|
||||
|
||||
databasePencarian.push({
|
||||
namaLower: item.nama_jalan.toLowerCase(),
|
||||
namaAsli: item.nama_jalan,
|
||||
kategori: 'Jalan',
|
||||
ikon: '🛣️',
|
||||
tipe: 'area',
|
||||
layer: layerJalan
|
||||
});
|
||||
} catch (error) { console.error("Error parse koordinat jalan", error); }
|
||||
});
|
||||
}).catch(e => console.log('Belum ada data Jalan'));
|
||||
}
|
||||
|
||||
function loadParsil() {
|
||||
parsilLayer.clearLayers();
|
||||
|
||||
fetch('load.php?jenis=parsil').then(res => res.json()).then(data => {
|
||||
data.forEach(item => {
|
||||
var actionButtons = '';
|
||||
|
||||
if (IS_ADMIN) {
|
||||
actionButtons = `
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-edit" onclick="formEditParsil('${item.id}', '${item.nama_pemilik}', '${item.status}')">✏️ Edit</button>
|
||||
<button class="btn btn-delete" onclick="deleteData('parsil', '${item.id}')">🗑️ Hapus</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
var geom = JSON.parse(item.koordinat);
|
||||
var warna = item.status === 'SHM' ? 'green'
|
||||
: item.status === 'HGB' ? 'blue'
|
||||
: item.status === 'HGU' ? 'purple'
|
||||
: 'orange';
|
||||
|
||||
var viewHTML = `
|
||||
<div class="popup-container" id="popup-parsil-${item.id}">
|
||||
<div class="popup-header" style="background: linear-gradient(135deg, #4a1d96, #7c3aed);">
|
||||
<h4>${item.nama_pemilik}</h4>
|
||||
<span class="popup-type-badge">🏘️ Parsil Bangunan</span>
|
||||
</div>
|
||||
<div class="popup-body">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Status Tanah</span>
|
||||
<span class="info-value">${item.status}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Luas</span>
|
||||
<span class="info-value">${item.luas} m²</span>
|
||||
</div>
|
||||
${actionButtons}
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
var layerParsil = L.geoJSON(geom, { style: { fillColor: warna, color: warna, weight: 2, fillOpacity: 0.5 } })
|
||||
.bindPopup(viewHTML).addTo(parsilLayer);
|
||||
|
||||
layerParsil.on('click', function () { map.fitBounds(layerParsil.getBounds()); });
|
||||
|
||||
databasePencarian.push({
|
||||
namaLower: item.nama_pemilik.toLowerCase(),
|
||||
namaAsli: item.nama_pemilik,
|
||||
kategori: 'Parsil',
|
||||
ikon: '🏘️',
|
||||
tipe: 'area',
|
||||
layer: layerParsil
|
||||
});
|
||||
});
|
||||
}).catch(e => console.log('Belum ada data Parsil'));
|
||||
}
|
||||
/*
|
||||
function loadBatasKota() {
|
||||
batasKotaLayer.clearLayers();
|
||||
@@ -539,12 +296,9 @@ map.on('click', function () {
|
||||
pendudukMiskinLayer.clearLayers();
|
||||
});
|
||||
|
||||
loadSPBU(); loadJalan(); loadParsil(); loadRumahIbadah();
|
||||
loadRumahIbadah();
|
||||
|
||||
var koordinatSementara = "";
|
||||
var tempLat = 0;
|
||||
var tempLng = 0;
|
||||
var spbuMarkers = {};
|
||||
// SPBU & draw-related globals removed
|
||||
|
||||
// ==========================================
|
||||
// 4. EVENT SAAT MENGGAMBAR SELESAI
|
||||
@@ -725,7 +479,7 @@ function deleteData(tabel, id) {
|
||||
.then(r => r.text()).then(res => {
|
||||
alert(res);
|
||||
map.closePopup();
|
||||
loadSPBU(); loadJalan(); loadParsil(); loadRumahIbadah();
|
||||
loadRumahIbadah();
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -733,89 +487,7 @@ function deleteData(tabel, id) {
|
||||
// ==========================================
|
||||
// 8. EDIT DATA
|
||||
// ==========================================
|
||||
function formEditSPBU(id, nama, hp, kategori) {
|
||||
var markerId = String(id);
|
||||
var currentMarker = spbuMarkers[markerId];
|
||||
if (currentMarker) currentMarker.dragging.enable();
|
||||
|
||||
setTimeout(function () {
|
||||
var lat = currentMarker.getLatLng().lat;
|
||||
var lng = currentMarker.getLatLng().lng;
|
||||
|
||||
var formHTML = `
|
||||
<div class="popup-container">
|
||||
<div class="popup-header" style="background: linear-gradient(135deg, #92400e, #f59e0b);">
|
||||
<h4>Edit SPBU</h4>
|
||||
<span class="popup-type-badge">✏️ Mode Edit</span>
|
||||
</div>
|
||||
<div class="popup-body">
|
||||
<form onsubmit="updateData(event, 'spbu_locations', '${id}')">
|
||||
<input type="text" id="edit_nama" value="${nama}" placeholder="Nama SPBU" required>
|
||||
<input type="text" id="edit_hp" value="${hp}" placeholder="No HP">
|
||||
<select id="edit_kategori">
|
||||
<option value="Ya" ${kategori === 'Ya' ? 'selected' : ''}>Buka 24 Jam</option>
|
||||
<option value="Tidak" ${kategori === 'Tidak' ? 'selected' : ''}>Reguler</option>
|
||||
</select>
|
||||
<input type="hidden" id="edit_lat" value="${lat}">
|
||||
<input type="hidden" id="edit_lng" value="${lng}">
|
||||
<div class="btn-group">
|
||||
<button type="submit" class="btn btn-save">💾 Update</button>
|
||||
<button type="button" class="btn btn-delete" onclick="loadSPBU();">Batal</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
currentMarker.setPopupContent(formHTML);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function formEditJalan(id, nama, status) {
|
||||
setTimeout(function () {
|
||||
document.getElementById(`popup-jalan-${id}`).innerHTML = `
|
||||
<div class="popup-header" style="background: linear-gradient(135deg, #134e4a, #0f766e); padding:14px 16px 12px; border-radius: 0;">
|
||||
<h4 style="margin:0; font-weight:700; font-size:15px; color:#fff;">Edit Jalan</h4>
|
||||
</div>
|
||||
<div class="popup-body" style="padding:14px 16px;">
|
||||
<form onsubmit="updateData(event, 'jalan', '${id}')">
|
||||
<input type="text" id="edit_nama" value="${nama}" required>
|
||||
<select id="edit_status">
|
||||
<option value="Jalan Nasional" ${status === 'Jalan Nasional' ? 'selected' : ''}>Jalan Nasional</option>
|
||||
<option value="Jalan Provinsi" ${status === 'Jalan Provinsi' ? 'selected' : ''}>Jalan Provinsi</option>
|
||||
<option value="Jalan Kabupaten" ${status === 'Jalan Kabupaten' ? 'selected' : ''}>Jalan Kabupaten</option>
|
||||
</select>
|
||||
<div class="btn-group">
|
||||
<button type="submit" class="btn btn-save">💾 Update</button>
|
||||
<button type="button" class="btn btn-delete" onclick="loadJalan();">Batal</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>`;
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function formEditParsil(id, nama, status) {
|
||||
setTimeout(function () {
|
||||
document.getElementById(`popup-parsil-${id}`).innerHTML = `
|
||||
<div class="popup-header" style="background: linear-gradient(135deg, #4a1d96, #7c3aed); padding:14px 16px 12px; border-radius: 0;">
|
||||
<h4 style="margin:0; font-weight:700; font-size:15px; color:#fff;">Edit Parsil</h4>
|
||||
</div>
|
||||
<div class="popup-body" style="padding:14px 16px;">
|
||||
<form onsubmit="updateData(event, 'parsil', '${id}')">
|
||||
<input type="text" id="edit_nama" value="${nama}" required>
|
||||
<select id="edit_status">
|
||||
<option value="SHM" ${status === 'SHM' ? 'selected' : ''}>SHM (Hak Milik)</option>
|
||||
<option value="HGB" ${status === 'HGB' ? 'selected' : ''}>HGB (Guna Bangunan)</option>
|
||||
<option value="HGU" ${status === 'HGU' ? 'selected' : ''}>HGU (Guna Usaha)</option>
|
||||
<option value="HP" ${status === 'HP' ? 'selected' : ''}>HP (Hak Pakai)</option>
|
||||
</select>
|
||||
<div class="btn-group">
|
||||
<button type="submit" class="btn btn-save">💾 Update</button>
|
||||
<button type="button" class="btn btn-delete" onclick="loadParsil();">Batal</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>`;
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function formEditRumahIbadah(id, nama, lat, lng) {
|
||||
setTimeout(function () {
|
||||
@@ -870,20 +542,7 @@ function updateData(e, tabel, id) {
|
||||
formData.append('tabel', tabel);
|
||||
formData.append('id', id);
|
||||
|
||||
if (tabel === 'spbu_locations') {
|
||||
formData.append('nama_spbu', document.getElementById('edit_nama').value);
|
||||
formData.append('no_hp', document.getElementById('edit_hp').value);
|
||||
formData.append('kategori', document.getElementById('edit_kategori').value);
|
||||
var markerPosisi = spbuMarkers[String(id)].getLatLng();
|
||||
formData.append('latitude', markerPosisi.lat);
|
||||
formData.append('longitude', markerPosisi.lng);
|
||||
} else if (tabel === 'jalan') {
|
||||
formData.append('nama_jalan', document.getElementById('edit_nama').value);
|
||||
formData.append('status', document.getElementById('edit_status').value);
|
||||
} else if (tabel === 'parsil') {
|
||||
formData.append('nama_pemilik', document.getElementById('edit_nama').value);
|
||||
formData.append('status', document.getElementById('edit_status').value);
|
||||
} else if (tabel === 'rumah_ibadah') {
|
||||
if (tabel === 'rumah_ibadah') {
|
||||
formData.append('nama', document.getElementById('edit_nama_ibadah').value);
|
||||
formData.append('latitude', document.getElementById('edit_lat_ibadah').value);
|
||||
formData.append('longitude', document.getElementById('edit_lng_ibadah').value);
|
||||
@@ -898,9 +557,6 @@ function updateData(e, tabel, id) {
|
||||
.then(r => r.text()).then(res => {
|
||||
alert(res);
|
||||
map.closePopup();
|
||||
if (tabel === 'spbu_locations') loadSPBU();
|
||||
if (tabel === 'jalan') loadJalan();
|
||||
if (tabel === 'parsil') loadParsil();
|
||||
if (tabel === 'rumah_ibadah' || tabel === 'penduduk_miskin') {
|
||||
loadRumahIbadah();
|
||||
}
|
||||
@@ -923,24 +579,6 @@ legend.onAdd = function (map) {
|
||||
<div class="legend-content">
|
||||
<h4>Legenda Peta</h4>
|
||||
|
||||
<span class="legend-group">SPBU</span>
|
||||
<div class="legend-item"><img src="https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png" class="legend-marker"> Buka 24 Jam</div>
|
||||
<div class="legend-item"><img src="https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png" class="legend-marker"> Reguler</div>
|
||||
|
||||
<span class="legend-group">Jaringan Jalan</span>
|
||||
<div class="legend-item"><span class="legend-line" style="background:#ef4444;"></span> Jalan Nasional</div>
|
||||
<div class="legend-item"><span class="legend-line" style="background:#eab308;"></span> Jalan Provinsi</div>
|
||||
<div class="legend-item"><span class="legend-line" style="background:#10b981;"></span> Jalan Kabupaten</div>
|
||||
|
||||
<span class="legend-group">Parsil Bangunan</span>
|
||||
<div class="legend-item"><span class="legend-color" style="background:rgba(0,128,0,0.5); border-color:green;"></span> SHM</div>
|
||||
<div class="legend-item"><span class="legend-color" style="background:rgba(0,0,255,0.5); border-color:blue;"></span> HGB</div>
|
||||
<div class="legend-item"><span class="legend-color" style="background:rgba(128,0,128,0.5); border-color:purple;"></span> HGU</div>
|
||||
<div class="legend-item"><span class="legend-color" style="background:rgba(255,165,0,0.5); border-color:orange;"></span> HP</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<span class="legend-group">Sosial & Keagamaan</span>
|
||||
<div class="legend-item">
|
||||
<div style="width:14px; height:14px; background: linear-gradient(135deg, #1e40af, #3b82f6); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display:flex; align-items:center; justify-content:center; margin-right:10px; margin-left:3px; box-shadow: 0 1px 3px rgba(59,130,246,0.5);">
|
||||
@@ -960,16 +598,10 @@ legend.addTo(map);
|
||||
var databasePencarian = [];
|
||||
|
||||
var ikonKategori = {
|
||||
'SPBU': '⛽',
|
||||
'Jalan': '🛣️',
|
||||
'Parsil': '🏘️',
|
||||
'Rumah Ibadah': '🕌',
|
||||
};
|
||||
|
||||
var warnaBadge = {
|
||||
'SPBU': 'badge-SPBU',
|
||||
'Jalan': 'badge-Jalan',
|
||||
'Parsil': 'badge-Parsil',
|
||||
'Rumah Ibadah': 'badge-Rumah-Ibadah',
|
||||
};
|
||||
|
||||
@@ -999,9 +631,6 @@ function jalankanPencarian() {
|
||||
var badgeClass = warnaBadge[item.kategori] || 'badge-default';
|
||||
var ikon = ikonKategori[item.kategori] || '📍';
|
||||
var bgColors = {
|
||||
'SPBU': 'rgba(16,185,129,0.12)',
|
||||
'Jalan': 'rgba(245,158,11,0.12)',
|
||||
'Parsil': 'rgba(139,92,246,0.12)',
|
||||
'Rumah Ibadah': 'rgba(59,130,246,0.12)'
|
||||
};
|
||||
|
||||
@@ -1078,11 +707,8 @@ document.addEventListener('keydown', function (e) {
|
||||
// 12. LOGIKA SIDEBAR INPUT TERPUSAT
|
||||
// ==========================================
|
||||
|
||||
var sidebarPickMode = null; // 'spbu' | 'ibadah' | 'penduduk'
|
||||
var sidebarDrawMode = null; // 'polyline' | 'polygon'
|
||||
var sidebarPickMode = null; // 'ibadah' | 'penduduk'
|
||||
var sidebarTempLat = 0, sidebarTempLng = 0;
|
||||
var sidebarKoordinat = "";
|
||||
var sidebarDrawHandler = null;
|
||||
|
||||
// Buka/Tutup Sidebar
|
||||
document.getElementById('sidebar-toggle').addEventListener('click', function () {
|
||||
@@ -1109,41 +735,19 @@ function switchSidebarTab(tabName) {
|
||||
function activatePickMode(jenis) {
|
||||
sidebarPickMode = jenis;
|
||||
document.getElementById('pick-overlay').classList.add('active');
|
||||
var teks = { spbu: 'Klik di peta untuk posisi SPBU', ibadah: 'Klik di peta untuk posisi Rumah Ibadah', penduduk: 'Klik di peta untuk posisi Penduduk Miskin' };
|
||||
var teks = { ibadah: 'Klik di peta untuk posisi Rumah Ibadah', penduduk: 'Klik di peta untuk posisi Penduduk Miskin' };
|
||||
document.getElementById('pick-overlay-text').textContent = teks[jenis] || 'Klik lokasi di peta...';
|
||||
var btnMap = { spbu: 'btn-pick-spbu', ibadah: 'btn-pick-ibadah', penduduk: 'btn-pick-penduduk' };
|
||||
var btnMap = { ibadah: 'btn-pick-ibadah', penduduk: 'btn-pick-penduduk' };
|
||||
if (btnMap[jenis]) document.getElementById(btnMap[jenis]).classList.add('active-pick');
|
||||
map.getContainer().style.cursor = 'crosshair';
|
||||
}
|
||||
|
||||
// Aktifkan mode gambar garis/poligon
|
||||
function activateDrawMode(type) {
|
||||
deactivatePickMode();
|
||||
sidebarDrawMode = type;
|
||||
if (type === 'polyline') {
|
||||
sidebarDrawHandler = new L.Draw.Polyline(map);
|
||||
document.getElementById('coords-jalan-val').textContent = 'Sedang menggambar...';
|
||||
document.getElementById('btn-draw-jalan').classList.add('active-pick');
|
||||
} else if (type === 'polygon') {
|
||||
sidebarDrawHandler = new L.Draw.Polygon(map);
|
||||
document.getElementById('coords-parsil-val').textContent = 'Sedang menggambar...';
|
||||
document.getElementById('btn-draw-parsil').classList.add('active-pick');
|
||||
}
|
||||
if (sidebarDrawHandler) sidebarDrawHandler.enable();
|
||||
document.getElementById('pick-overlay').classList.add('active');
|
||||
var teks = { polyline: 'Klik titik-titik jalur jalan. Klik dua kali selesai.', polygon: 'Klik titik-titik batas lahan. Klik dua kali selesai.' };
|
||||
document.getElementById('pick-overlay-text').textContent = teks[type];
|
||||
map.getContainer().style.cursor = 'crosshair';
|
||||
}
|
||||
|
||||
// Batalkan semua mode
|
||||
function deactivatePickMode() {
|
||||
sidebarPickMode = null;
|
||||
sidebarDrawMode = null;
|
||||
document.getElementById('pick-overlay').classList.remove('active');
|
||||
document.querySelectorAll('.btn-pick-location').forEach(function (b) { b.classList.remove('active-pick'); });
|
||||
map.getContainer().style.cursor = '';
|
||||
if (sidebarDrawHandler) { try { sidebarDrawHandler.disable(); } catch (e) { } sidebarDrawHandler = null; }
|
||||
}
|
||||
|
||||
// Tangkap klik peta untuk mode pick titik
|
||||
@@ -1156,11 +760,7 @@ map.on('click', function (e) {
|
||||
radiusLayer.clearLayers();
|
||||
pendudukMiskinLayer.clearLayers();
|
||||
|
||||
if (sidebarPickMode === 'spbu') {
|
||||
var el = document.getElementById('coords-spbu-val');
|
||||
el.textContent = lat + ', ' + lng;
|
||||
el.classList.add('has-coords');
|
||||
} else if (sidebarPickMode === 'ibadah') {
|
||||
if (sidebarPickMode === 'ibadah') {
|
||||
var el = document.getElementById('coords-ibadah-val');
|
||||
el.textContent = lat + ', ' + lng;
|
||||
el.classList.add('has-coords');
|
||||
@@ -1190,98 +790,8 @@ map.on('click', function (e) {
|
||||
deactivatePickMode();
|
||||
});
|
||||
|
||||
// Tangkap hasil gambar polyline/polygon dari sidebar
|
||||
map.on(L.Draw.Event.CREATED, function (e) {
|
||||
var type = e.layerType, layer = e.layer;
|
||||
var geojson = layer.toGeoJSON();
|
||||
|
||||
drawnItems.clearLayers();
|
||||
drawnItems.addLayer(layer);
|
||||
|
||||
// Jika berasal dari sidebar draw mode (Tidak ada lagi fallback popup lama)
|
||||
if (sidebarDrawMode === 'polyline' && type === 'polyline') {
|
||||
var panjangMeter = turf.length(geojson, { units: 'meters' }).toFixed(2);
|
||||
sidebarKoordinat = JSON.stringify(geojson.geometry);
|
||||
var el = document.getElementById('coords-jalan-val');
|
||||
el.textContent = 'Panjang: ' + panjangMeter + ' m';
|
||||
el.classList.add('has-coords');
|
||||
document.getElementById('sb_panjang_jalan').value = panjangMeter + ' m';
|
||||
deactivatePickMode();
|
||||
} else if (sidebarDrawMode === 'polygon' && type === 'polygon') {
|
||||
var luasMeter = turf.area(geojson).toFixed(2);
|
||||
sidebarKoordinat = JSON.stringify(geojson.geometry);
|
||||
var el = document.getElementById('coords-parsil-val');
|
||||
el.textContent = 'Luas: ' + luasMeter + ' m²';
|
||||
el.classList.add('has-coords');
|
||||
document.getElementById('sb_luas_parsil').value = luasMeter + ' m²';
|
||||
deactivatePickMode();
|
||||
}
|
||||
});
|
||||
|
||||
// ===== FUNGSI SIMPAN DARI SIDEBAR =====
|
||||
function saveSPBUSidebar() {
|
||||
if (!sidebarTempLat && sidebarTempLat !== 0) { alert('Pilih lokasi di peta terlebih dahulu!'); return; }
|
||||
var nama = document.getElementById('sb_nama_spbu').value.trim();
|
||||
if (!nama) { alert('Nama SPBU wajib diisi!'); return; }
|
||||
var coords = document.getElementById('coords-spbu-val').textContent;
|
||||
if (coords === 'Belum dipilih') { alert('Pilih lokasi di peta terlebih dahulu!'); return; }
|
||||
var formData = new FormData();
|
||||
formData.append('nama_spbu', nama);
|
||||
formData.append('no_hp', document.getElementById('sb_nohp_spbu').value);
|
||||
formData.append('kategori', document.getElementById('sb_kategori_spbu').value);
|
||||
formData.append('latitude', sidebarTempLat);
|
||||
formData.append('longitude', sidebarTempLng);
|
||||
fetch('save.php', { method: 'POST', body: formData })
|
||||
.then(r => r.text()).then(res => {
|
||||
alert(res);
|
||||
document.getElementById('sb_nama_spbu').value = '';
|
||||
document.getElementById('sb_nohp_spbu').value = '';
|
||||
document.getElementById('coords-spbu-val').textContent = 'Belum dipilih';
|
||||
document.getElementById('coords-spbu-val').classList.remove('has-coords');
|
||||
sidebarTempLat = 0; sidebarTempLng = 0;
|
||||
loadSPBU();
|
||||
}).catch(e => console.error(e));
|
||||
}
|
||||
|
||||
function saveJalanSidebar() {
|
||||
if (!sidebarKoordinat) { alert('Gambar jalur jalan di peta terlebih dahulu!'); return; }
|
||||
var nama = document.getElementById('sb_nama_jalan').value.trim();
|
||||
if (!nama) { alert('Nama jalan wajib diisi!'); return; }
|
||||
var formData = new FormData();
|
||||
formData.append('nama_jalan', nama);
|
||||
formData.append('status', document.getElementById('sb_status_jalan').value);
|
||||
formData.append('panjang', document.getElementById('sb_panjang_jalan').value);
|
||||
formData.append('koordinat', sidebarKoordinat);
|
||||
fetch('save_jalan.php', { method: 'POST', body: formData })
|
||||
.then(r => r.text()).then(res => {
|
||||
alert(res);
|
||||
document.getElementById('sb_nama_jalan').value = '';
|
||||
document.getElementById('sb_panjang_jalan').value = '';
|
||||
document.getElementById('coords-jalan-val').textContent = 'Belum digambar';
|
||||
document.getElementById('coords-jalan-val').classList.remove('has-coords');
|
||||
sidebarKoordinat = ''; drawnItems.clearLayers(); loadJalan();
|
||||
}).catch(e => console.error(e));
|
||||
}
|
||||
|
||||
function saveParsil_Sidebar() {
|
||||
if (!sidebarKoordinat) { alert('Gambar area parsil di peta terlebih dahulu!'); return; }
|
||||
var nama = document.getElementById('sb_nama_parsil').value.trim();
|
||||
if (!nama) { alert('Nama pemilik wajib diisi!'); return; }
|
||||
var formData = new FormData();
|
||||
formData.append('nama_pemilik', nama);
|
||||
formData.append('status', document.getElementById('sb_status_parsil').value);
|
||||
formData.append('luas', document.getElementById('sb_luas_parsil').value);
|
||||
formData.append('koordinat', sidebarKoordinat);
|
||||
fetch('save_parsil.php', { method: 'POST', body: formData })
|
||||
.then(r => r.text()).then(res => {
|
||||
alert(res);
|
||||
document.getElementById('sb_nama_parsil').value = '';
|
||||
document.getElementById('sb_luas_parsil').value = '';
|
||||
document.getElementById('coords-parsil-val').textContent = 'Belum digambar';
|
||||
document.getElementById('coords-parsil-val').classList.remove('has-coords');
|
||||
sidebarKoordinat = ''; drawnItems.clearLayers(); loadParsil();
|
||||
}).catch(e => console.error(e));
|
||||
}
|
||||
|
||||
function saveRumahIbadahSidebar() {
|
||||
var coords = document.getElementById('coords-ibadah-val').textContent;
|
||||
|
||||
@@ -424,20 +424,6 @@ body {
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.badge-SPBU {
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.badge-Jalan {
|
||||
background: rgba(245, 158, 11, 0.15);
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.badge-Parsil {
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
color: #c084fc;
|
||||
}
|
||||
|
||||
.badge-Rumah-Ibadah {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
|
||||
@@ -15,27 +15,7 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') {
|
||||
$tabel = $_POST['tabel'];
|
||||
$stmt = null;
|
||||
|
||||
if ($tabel == 'spbu_locations') {
|
||||
$nama = $_POST['nama_spbu'];
|
||||
$hp = $_POST['no_hp'];
|
||||
$kategori = $_POST['kategori'];
|
||||
$lat = $_POST['latitude'];
|
||||
$lng = $_POST['longitude'];
|
||||
|
||||
$stmt = $conn->prepare("UPDATE spbu_locations SET nama_spbu=?, no_hp=?, kategori=?, latitude=?, longitude=? WHERE id=?");
|
||||
$stmt->bind_param("sssddi", $nama, $hp, $kategori, $lat, $lng, $id);
|
||||
|
||||
} else if ($tabel == 'jalan') {
|
||||
$nama = $_POST['nama_jalan']; $status = $_POST['status'];
|
||||
$stmt = $conn->prepare("UPDATE jalan SET nama_jalan=?, status=? WHERE id=?");
|
||||
$stmt->bind_param("ssi", $nama, $status, $id);
|
||||
|
||||
} else if ($tabel == 'parsil') {
|
||||
$nama = $_POST['nama_pemilik']; $status = $_POST['status'];
|
||||
$stmt = $conn->prepare("UPDATE parsil SET nama_pemilik=?, status=? WHERE id=?");
|
||||
$stmt->bind_param("ssi", $nama, $status, $id);
|
||||
|
||||
} else if ($tabel == 'rumah_ibadah') {
|
||||
if ($tabel == 'rumah_ibadah') {
|
||||
$nama = $_POST['nama'];
|
||||
$lat = $_POST['latitude'];
|
||||
$lng = $_POST['longitude'];
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<?php
|
||||
$host = "localhost";
|
||||
$user = "root";
|
||||
$pass = "";
|
||||
$db = "webgis_db_pertemuan1";
|
||||
$user = "root";
|
||||
$pass = "";
|
||||
$db = "webgis_db_pertemuan1";
|
||||
|
||||
|
||||
// Connect first without DB to ensure we can create it if missing
|
||||
$conn = new mysqli($host, $user, $pass);
|
||||
@@ -43,4 +44,3 @@ if (!$conn->query($sql_jalan)) {
|
||||
if (!$conn->query($sql_parsil)) {
|
||||
die("Gagal membuat tabel parsil: " . $conn->error);
|
||||
}
|
||||
?>
|
||||
|
||||
Reference in New Issue
Block a user