Lint

frontend/src/hooks/useMapData.test.ts

@@ -64,9 +64,7 @@ describe('useMapData', () => {
     );
 
     await act(async () => {
-      result.current.handleViewChange(
-        viewChange({ south: 1, west: 1, north: 2, east: 2 })
-      );
+      result.current.handleViewChange(viewChange({ south: 1, west: 1, north: 2, east: 2 }));
     });
     await act(async () => {
       vi.advanceTimersByTime(150);
@@ -74,9 +72,7 @@ describe('useMapData', () => {
     expect(requests).toHaveLength(1);
 
     await act(async () => {
-      result.current.handleViewChange(
-        viewChange({ south: 3, west: 3, north: 4, east: 4 })
-      );
+      result.current.handleViewChange(viewChange({ south: 3, west: 3, north: 4, east: 4 }));
     });
 
     await act(async () => {

frontend/src/hooks/usePoiLayers.test.ts

@@ -34,6 +34,17 @@ const busStop: POI = {
   emoji: '🚌',
 };
 
+const foodWarehouse: POI = {
+  id: 'poi-4',
+  name: 'Iceland Avonmead Food Warehouse',
+  category: 'Iceland',
+  icon_category: 'The Food Warehouse',
+  group: 'Groceries',
+  lat: 51.49,
+  lng: -0.18,
+  emoji: '🛒',
+};
+
 function layerById(layers: readonly unknown[], id: string) {
   const layer = layers.find((item) => (item as { id?: string }).id === id);
   if (!layer) throw new Error(`Layer ${id} not found`);
@@ -62,8 +73,18 @@ describe('usePoiLayers', () => {
     const iconLayer = layerById(result.current.poiLayers, 'poi-icons');
     const getIcon = iconLayer.props.getIcon as (poi: POI) => { url: string };
 
-    expect(getIcon(waitrose).url).toBe(
-      'https://geolytix.github.io/MapIcons/brands/waitrose_24px.svg'
+    expect(getIcon(waitrose).url).toBe('/assets/poi-icons/brands/waitrose_24px.svg');
+  });
+
+  it('prefers POI fascia icon categories for map marker icons', () => {
+    const { result } = renderHook(() =>
+      usePoiLayers({ pois: [foodWarehouse], zoom: 15, isDark: false })
+    );
+    const iconLayer = layerById(result.current.poiLayers, 'poi-icons');
+    const getIcon = iconLayer.props.getIcon as (poi: POI) => { url: string };
+
+    expect(getIcon(foodWarehouse).url).toBe(
+      '/assets/poi-icons/brands/iceland_food_warehouse_24px.svg'
     );
   });
 
@@ -99,6 +120,7 @@ describe('usePoiLayers', () => {
       y: 88,
       name: supermarket.name,
       category: supermarket.category,
+      icon_category: undefined,
       group: supermarket.group,
       emoji: supermarket.emoji,
       id: supermarket.id,

frontend/src/hooks/usePoiLayers.ts

@@ -19,6 +19,7 @@ export interface PopupInfo {
   y: number;
   name: string;
   category: string;
+  icon_category?: string;
   group: string;
   emoji: string;
   id: string;
@@ -49,6 +50,7 @@ export function usePoiLayers({ pois, zoom, isDark }: UsePoiLayersProps) {
         y: info.y,
         name: info.object.name,
         category: info.object.category,
+        icon_category: info.object.icon_category,
         group: info.object.group,
         emoji: info.object.emoji,
         id: info.object.id,
@@ -176,7 +178,7 @@ export function usePoiLayers({ pois, zoom, isDark }: UsePoiLayersProps) {
         data: visiblePois,
         getPosition: (d) => [d.lng, d.lat],
         getIcon: (d) => ({
-          url: getPoiIconUrl(d.category, d.emoji),
+          url: getPoiIconUrl(d.category, d.emoji, d.icon_category, d.name),
           width: 72,
           height: 72,
         }),