feat: allow seeing all dots in open data map

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<HTMLElement | null>(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(() => {
       <div v-show="!pending && currentView === 'map'" class="map-view-wrapper">
         <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
           <p class="text-muted mb-0">Mappa pubblica delle segnalazioni nell'area di Bari.</p>
-          <span class="badge bg-light text-dark border">{{ visibleReports.length }} punti</span>
+          <span class="badge bg-light text-dark border">
+            <template v-if="mapPending">Caricamento...</template>
+            <template v-else>{{ mapVisibleReports.length }} punti</template>
+          </span>
         </div>
         <ClientOnly>
           <div ref="mapContainer" class="open-data-map rounded border"></div>