86 lines
2.9 KiB
HTML
86 lines
2.9 KiB
HTML
<!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>
|