fix: use hosted valhalla default_style.json (#345)

.env

@@ -3,6 +3,7 @@ VITE_VALHALLA_URL=https://valhalla1.openstreetmap.de
 VITE_NOMINATIM_URL=https://nominatim.openstreetmap.org
 VITE_TILE_SERVER_URL="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
 VITE_CENTER_COORDS="52.51831,13.393707"
+VALHALLA_DEFAULT_STYLE_URL="https://raw.githubusercontent.com/valhalla/valhalla/master/docs/docs/api/tile/default_style.json"
 
 # Possible values: auto, bicycle, pedestrian, car, truck, bus, motor_scooter, motorcycle
 VITE_DEFAULT_COSTING_MODEL=bicycle

src/components/tiles/valhalla-layers-toggle.spec.tsx

@@ -3,16 +3,29 @@ import { render, screen, waitFor, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { LayerSpecification } from 'maplibre-gl';
 import { ValhallaLayersToggle } from './valhalla-layers-toggle';
+import * as valhallaLayers from './valhalla-layers';
 import {
   VALHALLA_SOURCE_ID,
-  VALHALLA_LAYERS,
+  VALHALLA_LAYER_IDS,
   VALHALLA_EDGES_LAYER_ID,
   VALHALLA_NODES_LAYER_ID,
   VALHALLA_SHORTCUTS_LAYER_ID,
   VALHALLA_ACCESS_RESTRICTIONS_PERMANENT_LAYER_ID,
   VALHALLA_ACCESS_RESTRICTIONS_TIMED_LAYER_ID,
 } from './valhalla-layers';
 
+vi.mock('./valhalla-layers', async () => {
+  const actual =
+    await vi.importActual<typeof import('./valhalla-layers')>(
+      './valhalla-layers'
+    );
+
+  return {
+    ...actual,
+    getValhallaLayers: vi.fn(),
+  };
+});
+
 const createMockMap = () => {
   const sources: Record<string, unknown> = {};
   const layers: Record<string, unknown> = {};
@@ -60,12 +73,35 @@ vi.mock('@/stores/common-store', () => ({
 }));
 
 const noCustomLayers: { layer: LayerSpecification; visible: boolean }[] = [];
+const mockHostedLayers: LayerSpecification[] = [
+  {
+    id: VALHALLA_EDGES_LAYER_ID,
+    type: 'line',
+    source: VALHALLA_SOURCE_ID,
+    'source-layer': 'edges',
+  } as LayerSpecification,
+  {
+    id: VALHALLA_SHORTCUTS_LAYER_ID,
+    type: 'line',
+    source: VALHALLA_SOURCE_ID,
+    'source-layer': 'shortcuts',
+  } as LayerSpecification,
+  {
+    id: VALHALLA_NODES_LAYER_ID,
+    type: 'circle',
+    source: VALHALLA_SOURCE_ID,
+    'source-layer': 'nodes',
+  } as LayerSpecification,
+];
 
 describe('ValhallaLayersToggle', () => {
   beforeEach(() => {
     mockMap = createMockMap();
     mockMapReady = true;
     vi.clearAllMocks();
+    vi.mocked(valhallaLayers.getValhallaLayers).mockResolvedValue(
+      mockHostedLayers
+    );
   });
 
   afterEach(() => {
@@ -111,13 +147,15 @@ describe('ValhallaLayersToggle', () => {
       const toggle = screen.getByRole('switch');
       await user.click(toggle);
 
-      expect(mockMap.addSource).toHaveBeenCalledWith(
-        VALHALLA_SOURCE_ID,
-        expect.objectContaining({
-          type: 'vector',
-          tiles: expect.any(Array),
-        })
-      );
+      await waitFor(() => {
+        expect(mockMap.addSource).toHaveBeenCalledWith(
+          VALHALLA_SOURCE_ID,
+          expect.objectContaining({
+            type: 'vector',
+            tiles: expect.any(Array),
+          })
+        );
+      });
     });
 
     it('should add all layers when toggled on', async () => {
@@ -127,10 +165,18 @@ describe('ValhallaLayersToggle', () => {
       const toggle = screen.getByRole('switch');
       await user.click(toggle);
 
-      expect(mockMap.addLayer).toHaveBeenCalledTimes(VALHALLA_LAYERS.length);
-      for (const layer of VALHALLA_LAYERS) {
-        expect(mockMap.addLayer).toHaveBeenCalledWith(layer);
-      }
+      await waitFor(() => {
+        expect(mockMap.addLayer).toHaveBeenCalledTimes(
+          VALHALLA_LAYER_IDS.length
+        );
+      });
+
+      const addLayerIds = mockMap.addLayer.mock.calls.map(
+        (call: [{ id: string }]) => call[0].id
+      );
+      expect(addLayerIds).toContain(VALHALLA_EDGES_LAYER_ID);
+      expect(addLayerIds).toContain(VALHALLA_SHORTCUTS_LAYER_ID);
+      expect(addLayerIds).toContain(VALHALLA_NODES_LAYER_ID);
     });
 
     it('should remove all layers when toggled off', async () => {
@@ -188,9 +234,11 @@ describe('ValhallaLayersToggle', () => {
       const toggle = screen.getByRole('switch');
       await user.click(toggle);
 
-      expect(mockMap.addLayer).toHaveBeenCalledTimes(
-        VALHALLA_LAYERS.length - 1
-      );
+      await waitFor(() => {
+        expect(mockMap.addLayer).toHaveBeenCalledTimes(
+          VALHALLA_LAYER_IDS.length - 1
+        );
+      });
     });
 
     it('should update checked state when toggled', async () => {
@@ -291,9 +339,11 @@ describe('ValhallaLayersToggle', () => {
       const toggle = screen.getByRole('switch');
       await user.click(toggle);
 
-      expect(mockMap.addLayer).toHaveBeenCalledWith(
-        expect.objectContaining({ id: 'custom-valhalla-layer' })
-      );
+      await waitFor(() => {
+        expect(mockMap.addLayer).toHaveBeenCalledWith(
+          expect.objectContaining({ id: 'custom-valhalla-layer' })
+        );
+      });
     });
 
     it('should set visibility none for an invisible custom valhalla layer when re-added', async () => {
@@ -314,11 +364,13 @@ describe('ValhallaLayersToggle', () => {
       const toggle = screen.getByRole('switch');
       await user.click(toggle);
 
-      expect(mockMap.setLayoutProperty).toHaveBeenCalledWith(
-        'custom-hidden-layer',
-        'visibility',
-        'none'
-      );
+      await waitFor(() => {
+        expect(mockMap.setLayoutProperty).toHaveBeenCalledWith(
+          'custom-hidden-layer',
+          'visibility',
+          'none'
+        );
+      });
     });
 
     it('should not re-add a custom layer that uses a different source', async () => {

src/components/tiles/valhalla-layers-toggle.tsx

@@ -6,7 +6,8 @@ import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
 import {
   VALHALLA_SOURCE_ID,
-  VALHALLA_LAYERS,
+  VALHALLA_LAYER_IDS,
+  getValhallaLayers,
   getValhallaSourceSpec,
 } from './valhalla-layers';
 
@@ -38,7 +39,7 @@ export const ValhallaLayersToggle = ({
     };
   }, [mainMap]);
 
-  const handleToggle = (checked: boolean) => {
+  const handleToggle = async (checked: boolean) => {
     if (!mainMap || !mapReady) return;
 
     const map = mainMap.getMap();
@@ -48,11 +49,14 @@ export const ValhallaLayersToggle = ({
       if (!map.getSource(VALHALLA_SOURCE_ID)) {
         map.addSource(VALHALLA_SOURCE_ID, getValhallaSourceSpec());
       }
-      for (const layer of VALHALLA_LAYERS) {
+
+      const valhallaLayers = await getValhallaLayers();
+      for (const layer of valhallaLayers) {
         if (!map.getLayer(layer.id)) {
           map.addLayer(layer);
         }
       }
+
       for (const entry of customLayers) {
         const layerSource =
           'source' in entry.layer ? entry.layer.source : undefined;
@@ -71,9 +75,9 @@ export const ValhallaLayersToggle = ({
         }
       }
     } else {
-      for (const layer of VALHALLA_LAYERS) {
-        if (map.getLayer(layer.id)) {
-          map.removeLayer(layer.id);
+      for (const layerId of VALHALLA_LAYER_IDS) {
+        if (map.getLayer(layerId)) {
+          map.removeLayer(layerId);
         }
       }