feat(journey-maps): add SbbRailNetworkOptions

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

@@ -29,3 +29,11 @@ sbb-form-field {
   min-height: 500px;
   box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.15);
 }
+
+.rail-options {
+  margin-top: 5px;
+}
+
+.rail-options .sbb-select {
+  width: 305px;
+}

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

@@ -80,6 +80,14 @@
           <sbb-radio-button value="bright">Bright Mode</sbb-radio-button>
           <sbb-radio-button value="dark">Dark Mode</sbb-radio-button>
         </sbb-radio-group>
+        <div class="rail-options" formGroupName="railNetwork">
+          <span class="sbb-label">Rail network color (v2 style only)</span>
+          <sbb-select formControlName="railNetworkColor">
+            <sbb-option *ngFor="let color of railColors" [value]="color.value"
+              >{{color.label}}</sbb-option
+            >
+          </sbb-select>
+        </div>
       </li>
       <li formGroupName="styleVersion">
         <span class="sbb-label">Style</span>

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

@@ -79,11 +79,17 @@ export class JourneyMapsFullExample implements OnInit, OnDestroy {
       { label: 'Zürich - Schaffhausen, Waldfriedhof', value: { journey: zhShWaldfriedhof } },
       {
         label: 'Bern - Lausanne',
-        value: { routes: bnLsRoutes, routesMetaInformations: bnLsRoutesOptions },
+        value: {
+          routes: bnLsRoutes,
+          routesMetaInformations: bnLsRoutesOptions,
+        },
       },
       {
         label: 'Biel - Lyss',
-        value: { routes: bielLyssRoutes, routesMetaInformations: bielLyssRoutesOptions },
+        value: {
+          routes: bielLyssRoutes,
+          routesMetaInformations: bielLyssRoutesOptions,
+        },
       },
       { label: 'Transfer Bern', value: { transfer: bernIndoor } },
       { label: 'Transfer Genf', value: { transfer: geneveIndoor } },
@@ -95,6 +101,22 @@ export class JourneyMapsFullExample implements OnInit, OnDestroy {
   viewportDimensions?: SbbViewportDimensions;
   zoomLevels?: SbbZoomLevels;
   visibleLevels = new BehaviorSubject<number[]>([]);
+
+  railColors = [
+    { label: 'default' },
+    { label: 'hide', value: 'transparent' },
+    {
+      label: 'silver',
+      value: 'rgba(220,220,220,1)',
+    },
+    { label: 'blue', value: 'rgba(45,50,125,1)' },
+    { label: 'lemon', value: 'rgba(255,222,21,1)' },
+    {
+      label: 'violet',
+      value: 'rgba(111,34,130,1)',
+    },
+  ];
+
   form: UntypedFormGroup;
 
   private _styleIds = {
@@ -123,6 +145,9 @@ export class JourneyMapsFullExample implements OnInit, OnDestroy {
       }),
       styleOptions: _fb.group({
         mode: ['bright', resetSelectedMarkerIdValidator],
+        railNetwork: _fb.group({
+          railNetworkColor: [],
+        }),
         ...this._styleIds.v2,
       }),
       styleVersion: _fb.group({

src/journey-maps/angular/journey-maps.interfaces.ts

@@ -17,6 +17,8 @@ export interface SbbStyleOptions {
   darkId?: string;
   /** Select the style mode between bright and dark. */
   mode?: SbbStyleMode;
+  /** Additional rail network options as defined in <code>SbbRailNetworkOptions</code>. */
+  railNetwork?: SbbRailNetworkOptions;
 }
 
 export interface SbbInteractionOptions {
@@ -105,7 +107,7 @@ export interface SbbJourneyMapsRoutingOptions {
   journeyMetaInformation?: SbbJourneyMetaInformation;
 
   /**
-   * An array of additional informations as defined in <code>SbbRouteMetaInformation</code>.
+   * An array of additional information as defined in <code>SbbRouteMetaInformation</code>.
    * ID must match with ID from given routes.
    * If no meta information for a route given, it will use the default settings.
    * Note: journey, transfer and routes cannot be displayed at the same time.
@@ -202,6 +204,15 @@ export interface SbbRouteMetaInformation {
   midpointMarkerConfiguration?: Omit<SbbMarker, 'id' | 'position'>;
 }
 
+export interface SbbRailNetworkOptions {
+  /**
+   * Color of the rail network in the map.
+   *
+   * Set 'transparent' to hide the rail network, or use other color-format as specified in https://maplibre.org/maplibre-gl-js-docs/style-spec/types/.
+   * */
+  railNetworkColor?: string;
+}
+
 export interface SbbJourneyMetaInformation {
   /** ID that matches a leg ID in <code>SbbJourneyMapsRoutingOptions.journey</code>. */
   selectedLegId: string;

src/journey-maps/angular/journey-maps.ts

@@ -54,6 +54,7 @@ import { SbbMapJourneyService } from './services/map/map-journey-service';
 import { SbbMapLeitPoiService } from './services/map/map-leit-poi-service';
 import { SbbMapMarkerService } from './services/map/map-marker-service';
 import { SbbMapOverflowingLabelService } from './services/map/map-overflowing-label-service';
+import { SbbMapRailNetworkLayerService } from './services/map/map-rail-network-layer.service';
 import { SbbMapRoutesService } from './services/map/map-routes.service';
 import { SbbMapService } from './services/map/map-service';
 import { SbbMapTransferService } from './services/map/map-transfer-service';
@@ -205,6 +206,7 @@ export class SbbJourneyMaps implements OnInit, AfterViewInit, OnDestroy, OnChang
     private _mapJourneyService: SbbMapJourneyService,
     private _mapTransferService: SbbMapTransferService,
     private _mapRoutesService: SbbMapRoutesService,
+    private _mapRailNetworkLayerService: SbbMapRailNetworkLayerService,
     private _mapZoneService: SbbMapZoneService,
     private _mapLeitPoiService: SbbMapLeitPoiService,
     private _urlService: SbbMapUrlService,
@@ -777,6 +779,12 @@ export class SbbJourneyMaps implements OnInit, AfterViewInit, OnDestroy, OnChang
           if (this.journeyMapsZones) {
             this._updateZones();
           }
+          if (this.styleOptions.railNetwork) {
+            this._mapRailNetworkLayerService.updateOptions(
+              this._map,
+              this.styleOptions.railNetwork
+            );
+          }
         });
       });
 
@@ -818,6 +826,10 @@ export class SbbJourneyMaps implements OnInit, AfterViewInit, OnDestroy, OnChang
     this._mapMovementDebouncer.next();
     this._show2Dor3D();
 
+    if (this.styleOptions.railNetwork) {
+      this._mapRailNetworkLayerService.updateOptions(this._map, this.styleOptions.railNetwork);
+    }
+
     this._isStyleLoaded = true;
     this._styleLoaded.next();
     this.mapReady.next(this._map);

src/journey-maps/angular/services/map/map-rail-network-layer.service.ts

@@ -0,0 +1,72 @@
+import { Injectable } from '@angular/core';
+import { LineLayerSpecification, Map as MaplibreMap } from 'maplibre-gl';
+
+import { SbbRailNetworkOptions } from '../../journey-maps.interfaces';
+
+const RAIL_NETWORK_LAYER_CONST = {
+  idPart: '-track',
+  layerType: 'line',
+  colorPropName: 'line-color',
+};
+
+interface RailLayerMetadata extends Record<string, any> {
+  railNetworkDefaultLineColor?: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class SbbMapRailNetworkLayerService {
+  updateOptions(map: MaplibreMap, options?: SbbRailNetworkOptions) {
+    map.getStyle().layers?.forEach((layer) => {
+      if (
+        layer.type === RAIL_NETWORK_LAYER_CONST.layerType &&
+        layer.id.includes(RAIL_NETWORK_LAYER_CONST.idPart)
+      ) {
+        const lineLayer = layer as LineLayerSpecification;
+        if (!options) {
+          this._restoreLayerOptions(map, lineLayer);
+        } else {
+          this._updateLayerOptions(map, lineLayer, options);
+        }
+      }
+    });
+  }
+
+  private _updateLayerOptions(
+    map: MaplibreMap,
+    railLineLayer: LineLayerSpecification,
+    options: SbbRailNetworkOptions
+  ): void {
+    this._backupLayerOptions(railLineLayer);
+    if (options.railNetworkColor) {
+      map.setPaintProperty(
+        railLineLayer.id,
+        RAIL_NETWORK_LAYER_CONST.colorPropName,
+        options.railNetworkColor
+      );
+    }
+  }
+
+  private _backupLayerOptions(railLineLayer: LineLayerSpecification) {
+    const layerMetadata = (railLineLayer.metadata ?? {}) as RailLayerMetadata;
+    if (layerMetadata.railNetworkDefaultLineColor) {
+      return;
+    }
+    const linePaintOptions = (railLineLayer.paint || {}) as Record<string, any>;
+    layerMetadata.railNetworkDefaultLineColor =
+      linePaintOptions[RAIL_NETWORK_LAYER_CONST.colorPropName];
+    railLineLayer.metadata = layerMetadata;
+  }
+
+  private _restoreLayerOptions(map: MaplibreMap, railLineLayer: LineLayerSpecification): void {
+    const layerMetadata = (railLineLayer.metadata ?? {}) as RailLayerMetadata;
+    if (!layerMetadata.railNetworkDefaultLineColor) {
+      return;
+    }
+    map.setPaintProperty(
+      railLineLayer.id,
+      RAIL_NETWORK_LAYER_CONST.colorPropName,
+      layerMetadata.railNetworkDefaultLineColor
+    );
+    delete layerMetadata.railNetworkDefaultLineColor;
+  }
+}