844878ce85
All checks were successful
Build Docker Image / build (push) Successful in 4m55s
- Add useClusteredNodes composable for fetching clustered nodes - Update CatalogMap to support server-side clustering mode - Add bounds-change event for fetching clusters on map move/zoom - Add hover event to HubCard for marker highlighting - Update hubs/map page to use new clustering system
87 lines
2.2 KiB
Vue
87 lines
2.2 KiB
Vue
<template>
|
|
<NuxtLayout name="map">
|
|
<template #sidebar>
|
|
<CatalogMapSidebar
|
|
:title="t('catalogHubsSection.header.title')"
|
|
:back-link="localePath('/catalog/hubs')"
|
|
:back-label="t('catalogMap.actions.list_view')"
|
|
:items-count="items.length"
|
|
:filters="filters"
|
|
:selected-filter="selectedFilter"
|
|
:loading="isLoading"
|
|
:empty-text="t('catalogMap.empty.hubs')"
|
|
@update:selected-filter="selectedFilter = $event"
|
|
>
|
|
<template #cards>
|
|
<HubCard
|
|
v-for="hub in items"
|
|
:key="hub.uuid"
|
|
:hub="hub"
|
|
selectable
|
|
:is-selected="selectedItemId === hub.uuid"
|
|
@select="selectItem(hub)"
|
|
@hover="(hovered) => onHubHover(hub.uuid, hovered)"
|
|
/>
|
|
</template>
|
|
</CatalogMapSidebar>
|
|
</template>
|
|
|
|
<CatalogMap
|
|
ref="mapRef"
|
|
map-id="hubs-fullscreen-map"
|
|
:clustered-points="clusteredNodes"
|
|
use-server-clustering
|
|
:hovered-item-id="hoveredItemId"
|
|
point-color="#10b981"
|
|
@select-item="onMapSelectItem"
|
|
@bounds-change="onBoundsChange"
|
|
/>
|
|
</NuxtLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
|
|
|
|
definePageMeta({
|
|
layout: false
|
|
})
|
|
|
|
const { t } = useI18n()
|
|
const localePath = useLocalePath()
|
|
|
|
const {
|
|
items,
|
|
selectedFilter,
|
|
filters,
|
|
isLoading,
|
|
init
|
|
} = useCatalogHubs()
|
|
|
|
await init()
|
|
|
|
const { clusteredNodes, fetchClusters } = useClusteredNodes()
|
|
|
|
const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
|
|
const selectedItemId = ref<string | null>(null)
|
|
const hoveredItemId = ref<string | null>(null)
|
|
|
|
const selectItem = (item: any) => {
|
|
selectedItemId.value = item.uuid
|
|
if (item.latitude && item.longitude) {
|
|
mapRef.value?.flyTo(item.latitude, item.longitude, 8)
|
|
}
|
|
}
|
|
|
|
const onMapSelectItem = (uuid: string) => {
|
|
selectedItemId.value = uuid
|
|
}
|
|
|
|
const onHubHover = (uuid: string | undefined | null, hovered: boolean) => {
|
|
hoveredItemId.value = hovered && uuid ? uuid : null
|
|
}
|
|
|
|
const onBoundsChange = (bounds: MapBounds) => {
|
|
fetchClusters(bounds)
|
|
}
|
|
</script>
|