Give an option to append valhalla tiles to style.json file (#312)

Author: mustaphaturhan

src/components/tiles/tiles.spec.tsx

@@ -16,6 +16,8 @@ const createMockLayers = () => [
 
 const createMockMap = (layers = createMockLayers()) => {
   const layerVisibility: Record<string, string> = {};
+  const sources: Record<string, unknown> = {};
+  const dynamicLayers: Record<string, unknown> = {};
 
   return {
     getStyle: vi.fn(() => ({ layers })),
@@ -34,6 +36,20 @@ const createMockMap = (layers = createMockLayers()) => {
     ),
     on: vi.fn(),
     off: vi.fn(),
+    getSource: vi.fn((id: string) => sources[id]),
+    addSource: vi.fn((id: string, spec: unknown) => {
+      sources[id] = spec;
+    }),
+    removeSource: vi.fn((id: string) => {
+      delete sources[id];
+    }),
+    getLayer: vi.fn((id: string) => dynamicLayers[id]),
+    addLayer: vi.fn((layer: { id: string }) => {
+      dynamicLayers[layer.id] = layer;
+    }),
+    removeLayer: vi.fn((id: string) => {
+      delete dynamicLayers[id];
+    }),
   };
 };
 
@@ -360,7 +376,7 @@ describe('TilesControl', () => {
       render(<TilesControl />);
 
       const groupSwitches = screen.getAllByRole('switch');
-      const roadsGroupSwitch = groupSwitches[1]!;
+      const roadsGroupSwitch = groupSwitches[2]!;
 
       await user.click(roadsGroupSwitch);
 
@@ -386,7 +402,7 @@ describe('TilesControl', () => {
       render(<TilesControl />);
 
       const groupSwitches = screen.getAllByRole('switch');
-      const waterGroupSwitch = groupSwitches[0]!;
+      const waterGroupSwitch = groupSwitches[1]!;
 
       await user.click(waterGroupSwitch);
       await user.click(waterGroupSwitch);
@@ -431,12 +447,14 @@ describe('TilesControl', () => {
       expect(mockMap.getStyle).toHaveBeenCalled();
       const initialCallCount = mockMap.getStyle.mock.calls.length;
 
-      const styleDataHandler = mockMap.on.mock.calls.find(
-        (call) => call[0] === 'styledata'
-      )?.[1];
+      const styleDataHandlers = mockMap.on.mock.calls
+        .filter((call) => call[0] === 'styledata')
+        .map((call) => call[1]);
 
       await act(async () => {
-        styleDataHandler?.();
+        for (const handler of styleDataHandlers) {
+          handler?.();
+        }
       });
 
       await waitFor(() => {
@@ -456,12 +474,14 @@ describe('TilesControl', () => {
         expect(screen.getByText('water-fill')).toBeInTheDocument();
       });
 
-      const styleDataHandler = mockMap.on.mock.calls.find(
-        (call) => call[0] === 'styledata'
-      )?.[1];
+      const styleDataHandlers = mockMap.on.mock.calls
+        .filter((call) => call[0] === 'styledata')
+        .map((call) => call[1]);
 
       await act(async () => {
-        styleDataHandler?.();
+        for (const handler of styleDataHandlers) {
+          handler?.();
+        }
       });
 
       await waitFor(() => {

src/components/tiles/tiles.tsx

@@ -10,11 +10,15 @@ import {
   CollapsibleTrigger,
 } from '@/components/ui/collapsible';
 import { ChevronDown, ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { ValhallaLayersToggle } from './valhalla-layers-toggle';
+import { VALHALLA_SOURCE_ID } from './valhalla-layers';
 
 interface LayerInfo {
   id: string;
   type: string;
   sourceLayer?: string;
+  source?: string;
 }
 
 interface GroupedLayers {
@@ -67,6 +71,7 @@ export const TilesControl = () => {
         type: layer.type,
         sourceLayer:
           'source-layer' in layer ? layer['source-layer'] : undefined,
+        source: 'source' in layer ? (layer.source as string) : undefined,
       }));
     // eslint-disable-next-line react-hooks/exhaustive-deps -- styleVersion is used to invalidate cache on style changes
   }, [mapReady, mainMap, styleVersion]);
@@ -163,8 +168,15 @@ export const TilesControl = () => {
     return visibleCount > 0 && visibleCount < layersInGroup.length;
   };
 
+  const isValhallaGroup = (sourceLayer: string) => {
+    const layersInGroup = groupedLayers.grouped[sourceLayer] || [];
+    return layersInGroup.some((layer) => layer.source === VALHALLA_SOURCE_ID);
+  };
+
   return (
     <div className="flex flex-col gap-3 flex-1 overflow-hidden min-h-0">
+      <ValhallaLayersToggle />
+
       <Input
         type="text"
         placeholder="Search layers..."
@@ -180,7 +192,13 @@ export const TilesControl = () => {
               open={expandedGroups.has(sourceLayer)}
               onOpenChange={() => toggleExpanded(sourceLayer)}
             >
-              <div className="flex items-center gap-2 p-2 bg-muted/50 rounded-md">
+              <div
+                className={cn(
+                  'flex items-center gap-2 p-2 bg-muted/50 rounded-md',
+                  isValhallaGroup(sourceLayer) &&
+                    'border-l-2 border-l-green-600'
+                )}
+              >
                 <CollapsibleTrigger className="flex items-center gap-1 flex-1 text-left">
                   {expandedGroups.has(sourceLayer) ? (
                     <ChevronDown className="size-4" />
@@ -191,6 +209,11 @@ export const TilesControl = () => {
                   <span className="text-xs text-muted-foreground ml-1">
                     ({groupLayers.length})
                   </span>
+                  {isValhallaGroup(sourceLayer) && (
+                    <span className="text-xs bg-green-600 text-white px-1.5 py-0.5 rounded ml-2">
+                      Valhalla
+                    </span>
+                  )}
                 </CollapsibleTrigger>
                 <Switch
                   checked={isGroupVisible(sourceLayer)}