diff --git a/app/pages/open-data.vue b/app/pages/open-data.vue index 4f79e49..7a66e77 100644 --- a/app/pages/open-data.vue +++ b/app/pages/open-data.vue @@ -29,6 +29,16 @@ const prevPage = () => { if (currentPage.value > 1) currentPage.value-- } +const { data: mapOpenDataResponse, pending: mapPending } = useAsyncData( + 'open-data-map-reports', + () => getOpenDataReports({ page: 1, per_page: 200 }), + { lazy: true } +) + +const mapVisibleReports = computed(() => + (mapOpenDataResponse.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude)) +) + const currentView = ref<'grid' | 'map'>('grid') const mapContainer = ref(null) let leaflet: typeof import('leaflet') | null = null @@ -66,12 +76,12 @@ const renderMapMarkers = async () => { clearMarkers() - if (visibleReports.value.length === 0) { + if (mapVisibleReports.value.length === 0) { map.setView(BARI_CENTER, 12) return } - visibleReports.value.forEach((report) => { + mapVisibleReports.value.forEach((report) => { const marker = L.circleMarker([report.latitude, report.longitude], { radius: 8, weight: 2, @@ -93,7 +103,7 @@ const renderMapMarkers = async () => { markers.push(marker) }) - const fitBounds: LatLngBoundsExpression = visibleReports.value.map((report) => [report.latitude, report.longitude]) + const fitBounds: LatLngBoundsExpression = mapVisibleReports.value.map((report) => [report.latitude, report.longitude]) map.fitBounds(fitBounds, { padding: [32, 32], maxZoom: 15 }) } @@ -130,7 +140,7 @@ watch(currentView, async (view) => { } }) -watch(visibleReports, async () => { +watch(mapVisibleReports, async () => { if (currentView.value === 'map' && map) { await renderMapMarkers() } @@ -266,7 +276,10 @@ onBeforeUnmount(() => {

Mappa pubblica delle segnalazioni nell'area di Bari.

- {{ visibleReports.length }} punti + + + +
@@ -305,4 +318,4 @@ onBeforeUnmount(() => { line-height: 1.4; min-width: 12rem; } - \ No newline at end of file +