Merge branch 'master' into recenter-route

Author: s4chinjha

src/components/map/index.tsx

@@ -50,6 +50,7 @@ import { RecenterControl } from './parts/recenter-control';
 import {
   VALHALLA_EDGES_LAYER_ID,
   VALHALLA_NODES_LAYER_ID,
+  VALHALLA_SHORTCUTS_LAYER_ID,
 } from '@/components/tiles/valhalla-layers';
 import { MarkerIcon, type MarkerColor } from './parts/marker-icon';
 import { maxBounds } from './constants';
@@ -506,6 +507,7 @@ export const MapComponent = () => {
       const availableLayers = [
         VALHALLA_EDGES_LAYER_ID,
         VALHALLA_NODES_LAYER_ID,
+        VALHALLA_SHORTCUTS_LAYER_ID,
       ].filter((layerId) => map.getLayer(layerId));
 
       if (availableLayers.length === 0) return;
@@ -736,7 +738,8 @@ export const MapComponent = () => {
         features &&
         features.length > 0 &&
         (features[0]?.layer?.id === VALHALLA_EDGES_LAYER_ID ||
-          features[0]?.layer?.id === VALHALLA_NODES_LAYER_ID);
+          features[0]?.layer?.id === VALHALLA_NODES_LAYER_ID ||
+          features[0]?.layer?.id === VALHALLA_SHORTCUTS_LAYER_ID);
 
       if (isOverRoute) {
         onRouteLineHover(event);
@@ -790,7 +793,11 @@ export const MapComponent = () => {
       onMouseLeave={handleMouseLeave}
       interactiveLayerIds={
         activeTab === 'tiles'
-          ? [VALHALLA_EDGES_LAYER_ID, VALHALLA_NODES_LAYER_ID]
+          ? [
+              VALHALLA_EDGES_LAYER_ID,
+              VALHALLA_NODES_LAYER_ID,
+              VALHALLA_SHORTCUTS_LAYER_ID,
+            ]
           : ['routes-line']
       }
       mapStyle={resolvedMapStyle}

src/components/map/parts/tiles-info-popup.spec.tsx

@@ -71,6 +71,18 @@ describe('TilesInfoPopup', () => {
 
     expect(screen.getByText('Node')).toBeInTheDocument();
   });
+  // Ensures that features from the 'shortcuts' layer are correctly labeled as "Shortcut"
+  // in the popup header instead of defaulting to "Node"
+  it('should display "Shortcut" label for shortcut features', () => {
+    const shortcutFeature = createMockFeature('shortcuts', {
+      id: '23456',
+      shortcut: true,
+    });
+
+    render(<TilesInfoPopup features={[shortcutFeature]} onClose={vi.fn()} />);
+
+    expect(screen.getByText('Shortcut')).toBeInTheDocument();
+  });
 
   it('should display all properties of a feature', () => {
     render(<TilesInfoPopup {...defaultProps} />);

src/components/map/parts/tiles-info-popup.tsx

@@ -25,9 +25,13 @@ export function TilesInfoPopup({ features, onClose }: TilesInfoPopupProps) {
 
       {features.map((feature, index) => {
         const isEdge = feature.sourceLayer === 'edges';
-        const layerType = isEdge ? 'Edge' : 'Node';
+        const isShortcut = feature.sourceLayer === 'shortcuts';
+        const isEdgeLike = isEdge || isShortcut;
+        let layerType = 'Node';
+        if (isEdge) layerType = 'Edge';
+        else if (isShortcut) layerType = 'Shortcut';
         const properties = feature.properties || {};
-        const Icon = isEdge ? Route : MapPin;
+        const Icon = isEdgeLike ? Route : MapPin;
 
         return (
           <div

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

@@ -7,6 +7,7 @@ import {
   VALHALLA_LAYERS,
   VALHALLA_EDGES_LAYER_ID,
   VALHALLA_NODES_LAYER_ID,
+  VALHALLA_SHORTCUTS_LAYER_ID,
 } from './valhalla-layers';
 
 const createMockMap = () => {
@@ -151,6 +152,9 @@ describe('ValhallaLayersToggle', () => {
       await user.click(toggle);
 
       expect(mockMap.removeLayer).toHaveBeenCalledWith(VALHALLA_EDGES_LAYER_ID);
+      expect(mockMap.removeLayer).toHaveBeenCalledWith(
+        VALHALLA_SHORTCUTS_LAYER_ID
+      );
       expect(mockMap.removeLayer).toHaveBeenCalledWith(VALHALLA_NODES_LAYER_ID);
     });
 
@@ -188,7 +192,9 @@ describe('ValhallaLayersToggle', () => {
       const toggle = screen.getByRole('switch');
       await user.click(toggle);
 
-      expect(mockMap.addLayer).toHaveBeenCalledTimes(1);
+      expect(mockMap.addLayer).toHaveBeenCalledTimes(
+        VALHALLA_LAYERS.length - 1
+      );
     });
 
     it('should update checked state when toggled', async () => {

src/components/tiles/valhalla-layers.spec.ts

@@ -7,8 +7,10 @@ import type {
 import {
   VALHALLA_SOURCE_ID,
   VALHALLA_EDGES_LAYER_ID,
+  VALHALLA_SHORTCUTS_LAYER_ID,
   VALHALLA_NODES_LAYER_ID,
   VALHALLA_EDGES_LAYER,
+  VALHALLA_SHORTCUTS_LAYER,
   VALHALLA_NODES_LAYER,
   VALHALLA_LAYERS,
   getValhallaTileUrl,
@@ -32,12 +34,14 @@ describe('valhalla-layers', () => {
 
     it('should export correct layer IDs', () => {
       expect(VALHALLA_EDGES_LAYER_ID).toBe('valhalla-edges');
+      expect(VALHALLA_SHORTCUTS_LAYER_ID).toBe('valhalla-shortcuts');
       expect(VALHALLA_NODES_LAYER_ID).toBe('valhalla-nodes');
     });
 
-    it('should export VALHALLA_LAYERS array with both layers', () => {
-      expect(VALHALLA_LAYERS).toHaveLength(2);
+    it('should export VALHALLA_LAYERS array with all layers', () => {
+      expect(VALHALLA_LAYERS).toHaveLength(3);
       expect(VALHALLA_LAYERS).toContain(VALHALLA_EDGES_LAYER);
+      expect(VALHALLA_LAYERS).toContain(VALHALLA_SHORTCUTS_LAYER);
       expect(VALHALLA_LAYERS).toContain(VALHALLA_NODES_LAYER);
     });
   });
@@ -78,6 +82,33 @@ describe('valhalla-layers', () => {
     });
   });
 
+  //Shortcut is now a separate map layer.
+  //It uses the same styling as edges.
+  describe('VALHALLA_SHORTCUTS_LAYER', () => {
+    const shortcutsLayer = VALHALLA_SHORTCUTS_LAYER as LineLayerSpecification;
+
+    it('should have correct id', () => {
+      expect(shortcutsLayer.id).toBe(VALHALLA_SHORTCUTS_LAYER_ID);
+    });
+
+    it('should be a line type layer', () => {
+      expect(shortcutsLayer.type).toBe('line');
+    });
+
+    it('should reference correct source', () => {
+      expect(shortcutsLayer.source).toBe(VALHALLA_SOURCE_ID);
+    });
+
+    it('should have shortcuts source-layer', () => {
+      expect(shortcutsLayer['source-layer']).toBe('shortcuts');
+    });
+
+    it('should clone edges paint and layout styling', () => {
+      expect(shortcutsLayer.paint).toEqual(VALHALLA_EDGES_LAYER.paint);
+      expect(shortcutsLayer.layout).toEqual(VALHALLA_EDGES_LAYER.layout);
+    });
+  });
+
   describe('VALHALLA_NODES_LAYER', () => {
     const nodesLayer = VALHALLA_NODES_LAYER as CircleLayerSpecification;
 

src/components/tiles/valhalla-layers.ts

@@ -3,6 +3,7 @@ import { getBaseUrl, normalizeBaseUrl } from '@/utils/base-url';
 
 export const VALHALLA_SOURCE_ID = 'valhalla-tiles';
 export const VALHALLA_EDGES_LAYER_ID = 'valhalla-edges';
+export const VALHALLA_SHORTCUTS_LAYER_ID = 'valhalla-shortcuts';
 export const VALHALLA_NODES_LAYER_ID = 'valhalla-nodes';
 
 // Pre-encoded JSON: {"tile":{"z":{z},"x":{x},"y":{y}}}
@@ -67,6 +68,50 @@ export const VALHALLA_EDGES_LAYER: LayerSpecification = {
   },
 };
 
+// Shortcuts is now a separate tile layer.
+// and It uses the same line style as edges.
+export const VALHALLA_SHORTCUTS_LAYER: LayerSpecification = {
+  id: VALHALLA_SHORTCUTS_LAYER_ID,
+  type: 'line',
+  source: VALHALLA_SOURCE_ID,
+  'source-layer': 'shortcuts',
+  minzoom: 7,
+  maxzoom: 22,
+  filter: ['all'],
+  layout: { visibility: 'visible' },
+  paint: {
+    'line-color': [
+      'match',
+      ['get', 'tile_level'],
+      0,
+      '#ff0000',
+      1,
+      '#ff8800',
+      2,
+      '#ffdd00',
+      '#ff00ff',
+    ],
+    'line-width': [
+      'interpolate',
+      ['exponential', 1.5],
+      ['zoom'],
+      12,
+      ['match', ['get', 'tile_level'], 0, 3, 1, 2, 2, 1, 2],
+      14,
+      ['match', ['get', 'tile_level'], 0, 4, 1, 3, 2, 2, 3],
+      16,
+      ['match', ['get', 'tile_level'], 0, 6, 1, 4, 2, 3, 4],
+      18,
+      ['match', ['get', 'tile_level'], 0, 8, 1, 6, 2, 4, 6],
+      20,
+      ['match', ['get', 'tile_level'], 0, 10, 1, 8, 2, 6, 8],
+      22,
+      ['match', ['get', 'tile_level'], 0, 12, 1, 10, 2, 8, 10],
+    ],
+    'line-opacity': 0.8,
+  },
+};
+
 export const VALHALLA_NODES_LAYER: LayerSpecification = {
   id: VALHALLA_NODES_LAYER_ID,
   type: 'circle',
@@ -85,5 +130,6 @@ export const VALHALLA_NODES_LAYER: LayerSpecification = {
 
 export const VALHALLA_LAYERS: LayerSpecification[] = [
   VALHALLA_EDGES_LAYER,
+  VALHALLA_SHORTCUTS_LAYER,
   VALHALLA_NODES_LAYER,
 ];