diff --git a/app/components/catalog/CatalogMap.vue b/app/components/catalog/CatalogMap.vue
index ceab260..e97b9e3 100644
--- a/app/components/catalog/CatalogMap.vue
+++ b/app/components/catalog/CatalogMap.vue
@@ -372,7 +372,7 @@ const initClientClusteringLayers = async (map: MapboxMapType) => {
}
})
- // Related points layer (for Info mode - smaller cyan circles)
+ // Related points layer (for Info mode - colored by type)
map.addSource(relatedSourceId.value, {
type: 'geojson',
data: relatedPointsGeoJson.value
@@ -383,7 +383,14 @@ const initClientClusteringLayers = async (map: MapboxMapType) => {
source: relatedSourceId.value,
paint: {
'circle-radius': 8,
- 'circle-color': '#06b6d4', // cyan
+ 'circle-color': [
+ 'match',
+ ['get', 'type'],
+ 'hub', '#22c55e', // green
+ 'supplier', '#3b82f6', // blue
+ 'offer', '#f97316', // orange
+ '#06b6d4' // default cyan
+ ],
'circle-stroke-width': 2,
'circle-stroke-color': '#ffffff'
}
@@ -557,7 +564,7 @@ const initServerClusteringLayers = async (map: MapboxMapType) => {
}
})
- // Related points layer (for Info mode - smaller cyan circles)
+ // Related points layer (for Info mode - colored by type)
map.addSource(relatedSourceId.value, {
type: 'geojson',
data: relatedPointsGeoJson.value
@@ -568,7 +575,14 @@ const initServerClusteringLayers = async (map: MapboxMapType) => {
source: relatedSourceId.value,
paint: {
'circle-radius': 8,
- 'circle-color': '#06b6d4', // cyan
+ 'circle-color': [
+ 'match',
+ ['get', 'type'],
+ 'hub', '#22c55e', // green
+ 'supplier', '#3b82f6', // blue
+ 'offer', '#f97316', // orange
+ '#06b6d4' // default cyan
+ ],
'circle-stroke-width': 2,
'circle-stroke-color': '#ffffff'
}
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index ec1fc10..13a5723 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -49,9 +49,9 @@
{{ $t('catalog.list') }}
-
+