Update workshop
This commit is contained in:
@@ -338,7 +338,6 @@
|
||||
@push('scripts')
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script>
|
||||
// 1. Setup Base Map (Gunakan HTTPS untuk menghindari error mixed-content)
|
||||
var satellite = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', { maxZoom: 22 });
|
||||
var topo = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png');
|
||||
var parcels = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png');
|
||||
@@ -346,7 +345,6 @@
|
||||
var map = L.map('map', { center: [-0.789, 113.921], zoom: 5, layers: [satellite], zoomControl: false });
|
||||
L.control.zoom({ position: 'topleft' }).addTo(map);
|
||||
|
||||
// Map Switcher Custom
|
||||
function setMapLayer(type) {
|
||||
map.removeLayer(satellite); map.removeLayer(topo); map.removeLayer(parcels);
|
||||
if(type === 'satellite') satellite.addTo(map);
|
||||
@@ -369,23 +367,16 @@
|
||||
var mapHistory = [];
|
||||
var btnBack = document.getElementById('btnBackMap');
|
||||
|
||||
// ==========================================
|
||||
// FUNGSI PINTAR: DETEKSI LATITUDE/LONGITUDE
|
||||
// ==========================================
|
||||
function ensureLatLon(coords) {
|
||||
if (typeof coords[0] === 'number') {
|
||||
// Indonesia: Longitude = ~95 s/d ~141 | Latitude = ~-11 s/d ~6
|
||||
// Jika angka pertama melebihi 90, itu PASTI Longitude. Kita balik agar menjadi [Lat, Lon]
|
||||
if (Math.abs(coords[0]) > 90) {
|
||||
return [coords[1], coords[0]];
|
||||
}
|
||||
// Jika angka pertama kecil, berarti sudah benar [Lat, Lon], biarkan saja
|
||||
return [coords[0], coords[1]];
|
||||
}
|
||||
return coords.map(ensureLatLon);
|
||||
}
|
||||
|
||||
// 3. Fungsi Render Peta Dinamis
|
||||
function renderLevel(level, parentId = null, fallbackBounds = null) {
|
||||
var dataToRender = dataLevels[level];
|
||||
|
||||
@@ -403,11 +394,7 @@
|
||||
|
||||
currentLayerGroup.clearLayers();
|
||||
|
||||
// =========================================================
|
||||
// FITUR BARU: GAMBAR BATAS DESA SAAT MELIHAT LAHAN
|
||||
// =========================================================
|
||||
if (level === 'lahan' && parentId !== null) {
|
||||
// Cari data desa yang sedang diklik
|
||||
var parentDesa = dataLevels['desa'].find(d => d.id == parentId);
|
||||
|
||||
if (parentDesa && parentDesa.polygon) {
|
||||
@@ -415,13 +402,12 @@
|
||||
var desaGeojson = typeof parentDesa.polygon === 'string' ? JSON.parse(parentDesa.polygon) : parentDesa.polygon;
|
||||
var desaLayer;
|
||||
|
||||
// Style untuk batas Desa (Garis putus-putus merah, isian transparan)
|
||||
var desaStyle = {
|
||||
color: '#dc3545', // Merah
|
||||
color: '#dc3545',
|
||||
weight: 2,
|
||||
dashArray: '5, 8', // Garis putus-putus
|
||||
fillColor: 'none', // Tidak ada warna isian
|
||||
interactive: false // Tidak bisa diklik agar tidak menutupi klik lahan
|
||||
dashArray: '5, 8',
|
||||
fillColor: 'none',
|
||||
interactive: false
|
||||
};
|
||||
|
||||
if (desaGeojson !== null && typeof desaGeojson === 'object' && desaGeojson.type) {
|
||||
@@ -439,7 +425,6 @@
|
||||
desaLayer = L.polygon(safeCoordsDesa, desaStyle);
|
||||
}
|
||||
|
||||
// Tambahkan layer desa ke peta
|
||||
if (desaLayer) {
|
||||
currentLayerGroup.addLayer(desaLayer);
|
||||
}
|
||||
@@ -448,9 +433,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
// =========================================================
|
||||
|
||||
// Render data utama (Lahan / Wilayah Administratif)
|
||||
dataToRender.forEach(function(item) {
|
||||
if (!item.polygon) return;
|
||||
try {
|
||||
@@ -478,19 +461,15 @@
|
||||
|
||||
if (layer) {
|
||||
if (level === 'lahan') {
|
||||
// 1. Handling Khusus untuk Komoditas/Tanaman
|
||||
var listTanaman = item.tanaman && item.tanaman.length > 0 ? item.tanaman.join(', ') : null;
|
||||
|
||||
// Teks & Style conditional untuk komoditas kosong
|
||||
var komoditasText = listTanaman
|
||||
? listTanaman
|
||||
: '<span class="text-danger-light fw-medium small">Belum terdaftar</span>';
|
||||
|
||||
// Ikon conditional (ikon tanaman jika ada, ikon off jika kosong)
|
||||
var cropIcon = listTanaman ? 'ti tabler-plant' : 'ti tabler-leaf-off';
|
||||
var cropIconColor = listTanaman ? 'text-success' : 'text-danger';
|
||||
|
||||
// 2. Tampilan Baru Popup Lahan (Modern Card)
|
||||
var popupContent = `
|
||||
<div class="modern-lahan-popup">
|
||||
<div class="p-3 bg-white rounded-top-12 header-farmer">
|
||||
@@ -538,16 +517,13 @@
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Pengaturan Popup Leaflet
|
||||
layer.bindPopup(popupContent, {
|
||||
maxWidth: 300, // Membatasi lebar agar tetap rapi
|
||||
closeButton: true, // Menampilkan tombol close pro
|
||||
offset: [0, 0], // Penyesuaian jarak tip
|
||||
className: 'leaflet-modern-popup-wrapper' // Kelas CSS kustom (Langkah 2)
|
||||
maxWidth: 300,
|
||||
closeButton: true,
|
||||
offset: [0, 0],
|
||||
className: 'leaflet-modern-popup-wrapper'
|
||||
});
|
||||
} else {
|
||||
// FORMAT TOOLTIP BARU: Struktur Card Modern
|
||||
// Menggunakan template literal (backticks ``) agar rapi
|
||||
var tooltipContent = `
|
||||
<div class="modern-map-card">
|
||||
<div class="card-header-region">
|
||||
@@ -585,15 +561,13 @@
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Pengaturan Tooltip Leaflet
|
||||
layer.bindTooltip(tooltipContent, {
|
||||
sticky: true, // Ikut kursor
|
||||
direction: 'top', // Muncul di atas kursor
|
||||
className: 'leaflet-modern-tooltip', // Kelas CSS kustom (Langkah 2)
|
||||
offset: [0, -10] // Jarak dari kursor agar tidak menutupi poligon
|
||||
sticky: true,
|
||||
direction: 'top',
|
||||
className: 'leaflet-modern-tooltip',
|
||||
offset: [0, -10]
|
||||
});
|
||||
|
||||
// Logika Klik (Hapalan dari sebelumnya - jangan diubah)
|
||||
layer.on('click', function(e) {
|
||||
L.DomEvent.stopPropagation(e);
|
||||
var nextLevel = level === 'provinsi' ? 'kabupaten'
|
||||
@@ -623,7 +597,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Aksi Tombol Kembali
|
||||
if (btnBack) {
|
||||
btnBack.addEventListener('click', function() {
|
||||
var prevState = mapHistory.pop();
|
||||
@@ -636,7 +609,6 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Pastikan ukuran peta sesuai dengan container saat dimuat
|
||||
setTimeout(() => {
|
||||
map.invalidateSize();
|
||||
// Render Awal: Provinsi
|
||||
|
||||
Reference in New Issue
Block a user