feat(journey-maps): v1 route hover

src/components-examples/journey-maps/angular/journey-maps-full/journey-maps-full-example.ts

@@ -219,7 +219,7 @@ export class JourneyMapsFullExample implements OnInit, OnDestroy {
       ?.valueChanges.pipe(takeUntil(this._destroyed))
       .subscribe((selectedLegId: string) => {
         // 'journeyMapsRoutingOption' can be null on .reset() of its dropdown form data
-        if (this.journeyMapsRoutingOption && this.journeyMapsRoutingOption.journey) {
+        if (this.journeyMapsRoutingOption?.journey) {
           const bbox = selectedLegId
             ? this._getBboxForLegId(selectedLegId, this.journeyMapsRoutingOption)
             : this._getBbox(this.journeyMapsRoutingOption);

src/journey-maps/angular/components/feature-event-listener/feature-event-listener.ts

@@ -32,7 +32,7 @@ import { SbbMapEventUtils } from '../../services/map/events/map-event-utils';
 import { SbbMapSelectionEvent } from '../../services/map/events/map-selection-event';
 import { SbbRouteUtils, SBB_ROUTE_ID_PROPERTY_NAME } from '../../services/map/events/route-utils';
 import { SbbMapMarkerService } from '../../services/map/map-marker-service';
-import { SbbMapRoutesService, SBB_ALL_ROUTE_LAYERS } from '../../services/map/map-routes.service';
+import { SbbMapRoutesService } from '../../services/map/map-routes.service';
 import { SbbMapStationService, SBB_STATION_LAYER } from '../../services/map/map-station-service';
 import { SBB_ZONE_LAYER } from '../../services/map/map-zone-service';
 
@@ -102,7 +102,7 @@ export class SbbFeatureEventListener implements OnChanges, OnDestroy {
         this._updateWatchOnLayers(this._mapMarkerService.allMarkerAndClusterLayers, 'MARKER');
       }
       if (this.listenerOptions.ROUTE?.watch) {
-        this._updateWatchOnLayers(SBB_ALL_ROUTE_LAYERS, 'ROUTE');
+        this._updateWatchOnLayers(this._mapRoutesService.getRouteLayerIds(this.map), 'ROUTE');
       }
       if (this.listenerOptions.STATION?.watch) {
         this._updateWatchOnLayers([SBB_STATION_LAYER], 'STATION');

src/journey-maps/angular/services/map/events/route-utils.ts

@@ -3,7 +3,7 @@ import { Feature } from 'geojson';
 import { Map as MaplibreMap } from 'maplibre-gl';
 
 import { SbbFeatureData } from '../../../journey-maps.interfaces';
-import { SBB_ALL_ROUTE_LAYERS } from '../map-routes.service';
+import { SbbMapRoutesService } from '../map-routes.service';
 
 import { SbbMapEventUtils } from './map-event-utils';
 
@@ -12,7 +12,10 @@ export const SBB_ROUTE_LINE_COLOR_PROPERTY_NAME = 'lineColor';
 
 @Injectable({ providedIn: 'root' })
 export class SbbRouteUtils {
-  constructor(private _mapEventUtils: SbbMapEventUtils) {}
+  constructor(
+    private _mapEventUtils: SbbMapEventUtils,
+    private _mapRoutesService: SbbMapRoutesService
+  ) {}
 
   filterRouteFeatures(currentFeatures: SbbFeatureData[]): SbbFeatureData[] {
     return currentFeatures.filter((hovered) => !!hovered.properties![SBB_ROUTE_ID_PROPERTY_NAME]);
@@ -29,7 +32,7 @@ export class SbbRouteUtils {
   ): SbbFeatureData[] {
     const filter = this._createRelatedRoutesFilter(routeFeature);
     if (find === 'visibleOnly') {
-      const layers = SBB_ALL_ROUTE_LAYERS;
+      const layers = this._mapRoutesService.getRouteLayerIds(mapInstance);
       return this._mapEventUtils.queryVisibleFeaturesByFilter(mapInstance, 'ROUTE', layers, filter);
     } else {
       return this._mapEventUtils.queryFeatureSourceByFilter(mapInstance, 'ROUTE', filter);

src/journey-maps/angular/services/map/map-journey-service.ts

@@ -33,9 +33,11 @@ export class SbbMapJourneyService {
       const properties = feature.properties!;
       const type = properties.type;
       const pathType = properties.pathType;
+      const legId = properties.legId ?? 'journey'; // default: all belong together
+      const isSelected = selectedLegId === legId || !selectedLegId; // default state: all selected
 
-      properties[SBB_ROUTE_ID_PROPERTY_NAME] = 'journey'; // They all belong together
-      properties[SBB_SELECTED_PROPERTY_NAME] = true; // Always selected
+      properties[SBB_ROUTE_ID_PROPERTY_NAME] = legId;
+      properties[SBB_SELECTED_PROPERTY_NAME] = isSelected;
 
       if (type === 'path' && (pathType === 'transport' || pathType === 'bee')) {
         routeFeatures.push(feature);

src/journey-maps/angular/services/map/map-routes.service.ts

@@ -16,15 +16,12 @@ import {
 import { SbbMapRouteService } from './map-route-service';
 import { SBB_EMPTY_FEATURE_COLLECTION } from './map-service';
 import { toFeatureCollection } from './util/feature-collection-util';
+import { isV1Style } from './util/style-version-lookup';
 
-export const SBB_ALL_ROUTE_LAYERS: string[] = [
-  'rokas-route-halo-shadow',
-  'rokas-route-halo-shadow-gen0',
-  'rokas-route-halo-shadow-gen1',
-  'rokas-route-halo-shadow-gen2',
-  'rokas-route-halo-shadow-gen3',
-  'rokas-route-halo-shadow-gen4',
-];
+const SBB_ROUTE_GEN_PREFIX = 'gen';
+const SBB_ROUTE_GEN_NUM = 5;
+const SBB_ROUTE_LINE_LAYER_ID = 'rokas-route';
+const SBB_ROUTE_OUTER_LINE_LAYER_ID = 'rokas-route-halo-shadow';
 
 @Injectable({ providedIn: 'root' })
 export class SbbMapRoutesService {
@@ -83,4 +80,22 @@ export class SbbMapRoutesService {
       })
       .filter((m) => !!m) as SbbMarker[];
   }
+
+  /**
+   * Get all route layer ids, for user interaction (click, hover).
+   * @param map current map instance.
+   */
+  getRouteLayerIds(map: MaplibreMap): string[] {
+    return isV1Style(map)
+      ? this.generateRouteLayerIds(map, SBB_ROUTE_LINE_LAYER_ID)
+      : this.generateRouteLayerIds(map, SBB_ROUTE_OUTER_LINE_LAYER_ID);
+  }
+
+  generateRouteLayerIds(map: MaplibreMap, layerId: string): string[] {
+    const layerIds = [layerId];
+    for (let i = 0; i < SBB_ROUTE_GEN_NUM; i++) {
+      layerIds.push(`${layerId}-${SBB_ROUTE_GEN_PREFIX}${i}`);
+    }
+    return layerIds;
+  }
 }