hover and scroll on map

This commit is contained in:
2026-10-15 14:12:03 +07:00
parent 2e8271d27a
commit df2b5a1312
2 changed files with 29 additions and 10 deletions
@@ -233,14 +233,14 @@ class SummaryController extends Controller
$aksesPasar = $this->filteredAksesPasar($request);
$kpiCards = [
// [
// 'value' => number_format($totalPetani, 0, ',', '.'),
// 'unit' => 'orang',
// 'label' => 'Jumlah Petani',
// 'description' => 'Petani sesuai filter yang dipilih',
// 'icon' => 'tabler-users',
// 'variant' => 'primary',
// ],
[
'value' => number_format($totalPetani, 0, ',', '.'),
'unit' => 'orang',
'label' => 'Jumlah Petani',
'description' => 'Petani sesuai filter yang dipilih',
'icon' => 'tabler-users',
'variant' => 'primary',
],
[
'value' => number_format($totalLuasLahan, 2, ',', '.'),
'unit' => 'ha',
@@ -248,6 +248,7 @@
box-shadow: 0 6px 24px rgba(0, 0, 0, .2);
left: auto;
max-height: calc(100% - 2rem);
overscroll-behavior: contain;
overflow-y: auto;
padding: .875rem;
pointer-events: auto;
@@ -258,6 +259,11 @@
z-index: 700;
}
.produksi-map-information-overlay:focus-visible {
outline: 2px solid var(--bs-primary, #7367f0);
outline-offset: 2px;
}
.produksi-map-information {
display: flex;
flex-direction: column;
@@ -782,7 +788,7 @@
Kembali ke Atas
</button>
<div id="produksi-map-empty" class="produksi-map-empty">Belum ada poligon lahan untuk filter ini.</div>
<div class="produksi-map-information-overlay">
<div class="produksi-map-information-overlay" tabindex="0" role="region" aria-label="Informasi peta sebaran">
<div class="produksi-map-information" id="produksi-map-information"></div>
</div>
</div>
@@ -810,7 +816,7 @@
Kembali ke Atas
</button>
<div id="produksi-budidaya-map-empty" class="produksi-map-empty">Belum ada poligon lahan untuk filter ini.</div>
<div class="produksi-map-information-overlay">
<div class="produksi-map-information-overlay" tabindex="0" role="region" aria-label="Informasi peta praktik budidaya">
<div class="produksi-map-information" id="produksi-budidaya-map-information"></div>
</div>
</div>
@@ -1460,6 +1466,17 @@ document.addEventListener('DOMContentLoaded', function () {
map: null,
};
function enableMapInformationInteraction(mapElement) {
const informationOverlay = mapElement.querySelector('.produksi-map-information-overlay');
if (!informationOverlay) return;
L.DomEvent.disableScrollPropagation(informationOverlay);
L.DomEvent.disableClickPropagation(informationOverlay);
informationOverlay.addEventListener('click', function () {
informationOverlay.focus({ preventScroll: true });
});
}
function initProductionMap() {
const element = document.getElementById('produksi-sebaran-map');
@@ -1485,6 +1502,7 @@ document.addEventListener('DOMContentLoaded', function () {
productionMapState.group = L.featureGroup().addTo(productionMapState.map);
productionMapState.backButton = document.getElementById('produksi-map-back');
productionMapState.empty = document.getElementById('produksi-map-empty');
enableMapInformationInteraction(element);
L.control.zoom({ position: 'topleft' }).addTo(productionMapState.map);
@@ -1712,6 +1730,7 @@ document.addEventListener('DOMContentLoaded', function () {
cultivationMapState.group = L.featureGroup().addTo(cultivationMapState.map);
cultivationMapState.backButton = document.getElementById('produksi-budidaya-map-back');
cultivationMapState.empty = document.getElementById('produksi-budidaya-map-empty');
enableMapInformationInteraction(element);
L.control.zoom({ position: 'topleft' }).addTo(cultivationMapState.map);