first commit

2025-06-29 23:00:50 +07:00
commit 3e2b383e87
42 changed files with 35941 additions and 0 deletions
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Peta Wilayah</title>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+  <style>#map { height: 100vh; }</style>
+</head>
+<body>
+<div id="map"></div>
+<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+<script>
+const map = L.map('map').setView([4.2, 96.9], 7);
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+
+// Ganti endpoint berdasarkan level: wil_provinsi, wil_kabupaten_kota, dll
+// fetch('http://localhost:5000/api/geojson/wil_provinsi')
+//   .then(res => res.json())
+//   .then(data => {
+//     L.geoJSON(data, {
+//       style: { color: 'blue' },
+//       onEachFeature: function (feature, layer) {
+//         const p = feature.properties;
+//         layer.bindPopup(`<strong>${p.nama}</strong><br>Kode: ${p.kode}`);
+//       }
+//     }).addTo(map);
+//   });
+</script>
+<script>
+let currentLayer = null;
+
+function loadLayer(url, onClickCallback) {
+    fetch(url)
+        .then(res => res.json())
+        .then(data => {
+            if (currentLayer) {
+                map.removeLayer(currentLayer);
+            }
+
+            currentLayer = L.geoJSON(data, {
+                style: { color: "blue", weight: 2 },
+                onEachFeature: function (feature, layer) {
+                    let clickTimer = null;
+                    layer.on('click', function (e) {
+                        let kode = feature.properties.id;
+                        // onClickCallback(kode);
+                        if (clickTimer) {
+                            // Double click detected
+                            clearTimeout(clickTimer);
+                            clickTimer = null;
+
+                            // Aksi double click → Pindah layer
+                            let kode = feature.properties.id;
+                            onClickCallback(kode);
+                        } else {
+                            // Single click → Tampilkan popup
+                            clickTimer = setTimeout(() => {
+                                clickTimer = null;
+                                layer.bindPopup(feature.properties.nama).openPopup(e.latlng);
+                            }, 250); // waktu tunggu untuk deteksi double click
+                            layer.bindPopup(feature.properties.nama);
+                        }
+                    });
+                    // layer.bindPopup(feature.properties.nama);
+                }
+            }).addTo(map);
+
+            map.fitBounds(currentLayer.getBounds());
+        });
+}
+
+// Load provinsi Aceh awal
+loadLayer('/geojson/provinsi', function (kode_provinsi) {
+    loadLayer(`/geojson/kabupaten/${kode_provinsi}`, function (kode_kabupaten) {
+        loadLayer(`/geojson/kecamatan/${kode_kabupaten}`, function (kode_kecamatan) {
+            loadLayer(`/geojson/desa/${kode_kecamatan}`, function () {
+                // Desa tidak turun level lagi
+            });
+        });
+    });
+});
+</script>
+
+</body>
+</html>