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') }} - +