fix(journey-maps): allow showing default and custom 3d-buildings ...

src/components-examples/journey-maps/angular/journey-maps-style-options/journey-maps-style-options-example.html

@@ -7,8 +7,8 @@
     [apiKey]="apiKey"
     [viewportDimensions]="viewportDimensions"
     [interactionOptions]="interactionOptions"
-    [extrusions]="customExtrusions"
-    [enableExtrusions]="form.get('extrusions')?.value"
+    [customExtrusions]="customExtrusions"
+    [enableDefaultExtrusions]="form.get('defaultExtrusions')?.value"
     [styleOptions]="form.get('styleOptions')?.value"
   ></sbb-journey-maps>
 </div>
@@ -47,10 +47,8 @@
 
     <div>
       <span class="sbb-label">3D buildings</span>
-      <sbb-checkbox formControlName="extrusions">Show</sbb-checkbox><br />
-      <sbb-checkbox formControlName="customExtrusions" [disabled]="!form.get('extrusions')?.value"
-        >Custom</sbb-checkbox
-      >
+      <sbb-checkbox formControlName="defaultExtrusions">Default</sbb-checkbox><br />
+      <sbb-checkbox formControlName="customExtrusions">Custom</sbb-checkbox>
     </div>
   </form>
 </div>

src/components-examples/journey-maps/angular/journey-maps-style-options/journey-maps-style-options-example.ts

@@ -79,7 +79,7 @@ export class JourneyMapsStyleOptionsExample implements OnInit {
       styleVersion: this.fb.group({
         versionNumber: ['v2'],
       }),
-      extrusions: [true],
+      defaultExtrusions: [true],
       customExtrusions: [true],
     });
   }

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

@@ -135,10 +135,10 @@ export class SbbJourneyMaps implements OnInit, AfterViewInit, OnDestroy, OnChang
   @Input() viewportDimensions?: SbbViewportDimensions;
   /** Restrict the visible part and possible zoom levels of the map. */
   @Input() viewportBounds?: SbbViewportBounds;
-  /** Enable/disable extrusions to be shown on the map */
-  @Input() enableExtrusions: boolean = false;
-  /** Custom Extrusions GeoJSON */
-  @Input() extrusions?: SbbBuildingExtrusions;
+  /** Enable/disable default extrusions to be shown on the map */
+  @Input() enableDefaultExtrusions: boolean = false;
+  /** Custom Extrusions GeoJSON to be shown on the map */
+  @Input() customExtrusions?: SbbBuildingExtrusions;
 
   /**
    * This event is emitted whenever a marker, with property triggerEvent, is selected or unselected.
@@ -599,8 +599,8 @@ export class SbbJourneyMaps implements OnInit, AfterViewInit, OnDestroy, OnChang
     this._executeWhenMapStyleLoaded(() => {
       this._mapOverflowingLabelService.hideOverflowingLabels(this._map, this.interactionOptions);
       this._show2Dor3D();
-      this._showOrHideExtrusions();
-      this._updateExtrusions();
+      this._showOrHideDefaultExtrusions();
+      this._showOrHideCustomExtrusions();
     });
   }
 
@@ -776,12 +776,15 @@ export class SbbJourneyMaps implements OnInit, AfterViewInit, OnDestroy, OnChang
       this._show2Dor3D();
     }
 
-    if (changes.enableExtrusions?.currentValue !== changes.enableExtrusions?.previousValue) {
-      this._showOrHideExtrusions();
+    if (
+      changes.enableDefaultExtrusions?.currentValue !==
+      changes.enableDefaultExtrusions?.previousValue
+    ) {
+      this._showOrHideDefaultExtrusions();
     }
 
-    if (changes.extrusions?.currentValue !== changes.extrusions?.previousValue) {
-      this._updateExtrusions();
+    if (changes.customExtrusions?.currentValue !== changes.customExtrusions?.previousValue) {
+      this._showOrHideCustomExtrusions();
     }
   }
 
@@ -987,7 +990,8 @@ export class SbbJourneyMaps implements OnInit, AfterViewInit, OnDestroy, OnChang
         this._map.once('styledata', () => {
           this._featureEventListenerComponent.updateListener();
           this._show2Dor3D();
-          this._showOrHideExtrusions();
+          this._showOrHideDefaultExtrusions();
+          this._showOrHideCustomExtrusions();
           this._mapMarkerService.updateMarkers(
             this._map,
             this._getMarkers(),
@@ -1019,9 +1023,6 @@ export class SbbJourneyMaps implements OnInit, AfterViewInit, OnDestroy, OnChang
               this.styleOptions.railNetwork,
             );
           }
-          if (this.extrusions) {
-            this._updateExtrusions();
-          }
         });
       });
 
@@ -1227,23 +1228,20 @@ export class SbbJourneyMaps implements OnInit, AfterViewInit, OnDestroy, OnChang
     }
   }
 
-  private _showOrHideExtrusions() {
+  private _showOrHideDefaultExtrusions() {
     if (this._isStyleLoaded) {
       this._map.setLayoutProperty(
         '3d-buildings',
         'visibility',
-        this.enableExtrusions ? 'visible' : 'none',
-      );
-      this._map.setLayoutProperty(
-        '3d-buildings-custom',
-        'visibility',
-        this.enableExtrusions ? 'visible' : 'none',
+        this.enableDefaultExtrusions ? 'visible' : 'none',
       );
     }
   }
 
-  private _updateExtrusions() {
-    this._mapExtrusionService.addExtrusions(this._map, this.extrusions);
+  private _showOrHideCustomExtrusions() {
+    if (this._isStyleLoaded) {
+      this._mapExtrusionService.updateCustomExtrusions(this._map, this.customExtrusions);
+    }
   }
 
   private _isLevelFilterEnabled(): boolean {

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

@@ -8,11 +8,11 @@ import { SBB_EMPTY_FEATURE_COLLECTION } from './map-service';
 
 @Injectable({ providedIn: 'root' })
 export class SbbMapExtrusionService {
-  addExtrusions(
+  updateCustomExtrusions(
     map: MaplibreMap,
-    extrusions: FeatureCollection = SBB_EMPTY_FEATURE_COLLECTION,
+    customExtrusions: FeatureCollection = SBB_EMPTY_FEATURE_COLLECTION,
   ): void {
     const source = map.getSource(SBB_ROKAS_EXTRUSION_SOURCE) as GeoJSONSource;
-    source.setData(extrusions);
+    source.setData(customExtrusions);
   }
 }

src/journey-maps/web-component/showcase.ts

@@ -22,8 +22,8 @@ function addViewportDimensions(client: HTMLElement & SbbJourneyMaps) {
 }
 
 function addExtrusions(client: HTMLElement & SbbJourneyMaps) {
-  client.enableExtrusions = true;
-  client.extrusions = {
+  client.enableDefaultExtrusions = true;
+  client.customExtrusions = {
     type: 'FeatureCollection',
     features: [
       {