chore(journey-maps): upgrade maplibre to 4.7.1

package.json

@@ -63,7 +63,7 @@
     "@angular/platform-server": "19.0.0-rc.1",
     "@angular/router": "19.0.0-rc.1",
     "@stackblitz/sdk": "1.11.0",
-    "maplibre-gl": "3.6.2",
+    "maplibre-gl": "4.7.1",
     "rxjs": "7.8.1",
     "tslib": "2.7.0",
     "zone.js": "0.15.0"

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

@@ -1,4 +1,4 @@
-@import 'https://unpkg.com/maplibre-gl@3.6.1/dist/maplibre-gl.css';
+@import 'https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css';
 
 sbb-notification.api-key-info {
   margin-bottom: 30px;

src/components-examples/journey-maps/angular/journey-maps-map-navigation/journey-maps-map-navigation-example.css

@@ -1,4 +1,4 @@
-@import 'https://unpkg.com/maplibre-gl@3.6.1/dist/maplibre-gl.css';
+@import 'https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css';
 
 sbb-notification.api-key-info {
   margin-bottom: 30px;

src/components-examples/journey-maps/angular/journey-maps-pois-markers/journey-maps-pois-markers-example.css

@@ -1,4 +1,4 @@
-@import 'https://unpkg.com/maplibre-gl@3.6.1/dist/maplibre-gl.css';
+@import 'https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css';
 
 sbb-notification.api-key-info {
   margin-bottom: 30px;

src/components-examples/journey-maps/angular/journey-maps-routes-zones/journey-maps-routes-zones-example.css

@@ -1,4 +1,4 @@
-@import 'https://unpkg.com/maplibre-gl@3.6.1/dist/maplibre-gl.css';
+@import 'https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css';
 
 sbb-notification.api-key-info {
   margin-bottom: 30px;

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

@@ -1,4 +1,4 @@
-@import 'https://unpkg.com/maplibre-gl@3.6.1/dist/maplibre-gl.css';
+@import 'https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css';
 
 sbb-notification.api-key-info {
   margin-bottom: 30px;

src/components-examples/journey-maps/angular/journey-maps-ui-options/journey-maps-ui-options-example.css

@@ -1,4 +1,4 @@
-@import 'https://unpkg.com/maplibre-gl@3.6.1/dist/maplibre-gl.css';
+@import 'https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css';
 
 sbb-notification.api-key-info {
   margin-bottom: 30px;

src/components-examples/journey-maps/esri-plugin/esri-plugin/esri-plugin-example.css

@@ -1,4 +1,4 @@
-@import 'https://unpkg.com/maplibre-gl@3.6.1/dist/maplibre-gl.css';
+@import 'https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css';
 
 sbb-notification.api-key-info {
   margin-bottom: 30px;

src/journey-maps/angular/angular.md

@@ -20,7 +20,7 @@ npm install --save-dev @types/geojson
 ```
 
 **NOTE** \
-The `maplibre-gl` version compatible with this version of `journey-maps` is `3.x.y`.
+The `maplibre-gl` version compatible with this version of `journey-maps` is `4.x.y`.
 
 ### Reference the CSS
 
@@ -31,12 +31,14 @@ You should add the following two CSS files to your application:
 
 You can add them for example in the `styles` array of your `angular.json` file:
 
-```json lines
-"styles": [
-  "src/styles.scss",
-  "node_modules/maplibre-gl/dist/maplibre-gl.css"
-  "node_modules/@sbb-esta/angular/typography.css"
-],
+```json
+{
+  "styles": [
+    "src/styles.scss",
+    "node_modules/maplibre-gl/dist/maplibre-gl.css",
+    "node_modules/@sbb-esta/angular/typography.css"
+  ]
+}
 ```
 
 ### i18n

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

@@ -48,9 +48,8 @@ export class SbbMapMarkerService {
     this.markerLayers = [SBB_MARKER_LAYER];
     this.markerLayersSelected = [SBB_MARKER_LAYER_SELECTED];
 
-    const markerCategoryMappings = (((map.getStyle().metadata as any) ?? {})[
-      SBB_METADATA_MAPPINGS
-    ] ?? []) as SbbMarkerCategoryMapping[];
+    const markerCategoryMappings = ((map.getStyle().metadata as any)?.[SBB_METADATA_MAPPINGS] ??
+      []) as SbbMarkerCategoryMapping[];
     for (const mapping of markerCategoryMappings) {
       this.sources.push(mapping.source);
       this.markerLayers.push(mapping.layer);
@@ -116,11 +115,9 @@ export class SbbMapMarkerService {
     center: LngLatLike,
     offset: PointLike = [0, 0],
   ): void {
-    this._getPrimaryMarkerSource(map).getClusterExpansionZoom(clusterId, (err, zoom) => {
-      if (zoom) {
-        this._easeTo(map, center, { zoom: zoom + 0.1, offset });
-      }
-    });
+    this._getPrimaryMarkerSource(map)
+      .getClusterExpansionZoom(clusterId)
+      .then((zoom) => zoom && this._easeTo(map, center, { zoom: zoom + 0.1, offset }));
   }
 
   onMarkerClicked(
@@ -154,7 +151,7 @@ export class SbbMapMarkerService {
       filter: ['in', 'id', marker.id],
     });
 
-    if (features && features.length) {
+    if (features?.length) {
       // Marker is already visible on map.
       // Center map to marker.
       this._easeTo(map, marker.position as LngLatLike);
@@ -224,24 +221,26 @@ export class SbbMapMarkerService {
     found: boolean[] = [],
   ): void {
     const clusterId = cluster.properties?.cluster_id;
-    this._getPrimaryMarkerSource(map).getClusterChildren(clusterId, (e1, children) => {
-      // Skip processing if marker has been found
-      if (!found.length) {
-        for (const child of children ?? []) {
-          if (child.id === marker.id) {
-            found.push(true);
-            this._zoomToCluster(
-              map,
-              clusterId,
-              marker.position as LngLatLike,
-              this._getSelectedMarkerOffset(map),
-            );
-          } else if (child.properties?.cluster === true) {
-            this._zoomUntilMarkerVisible(map, child, marker, found);
+    this._getPrimaryMarkerSource(map)
+      .getClusterChildren(clusterId)
+      .then((children) => {
+        // Skip processing if marker has been found
+        if (!found.length) {
+          for (const child of children ?? []) {
+            if (child.id === marker.id) {
+              found.push(true);
+              this._zoomToCluster(
+                map,
+                clusterId,
+                marker.position as LngLatLike,
+                this._getSelectedMarkerOffset(map),
+              );
+            } else if (child.properties?.cluster === true) {
+              this._zoomUntilMarkerVisible(map, child, marker, found);
+            }
           }
         }
-      }
-    });
+      });
   }
 
   unselectFeature(map: MaplibreMap): void {

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

@@ -23,8 +23,8 @@ export class SbbMapService {
    * Emulate moving the map with the keyboard's arrow keys
    */
   pan(map: MaplibreMap, dir: SbbDirection): void {
-    const xDir = dir === 'west' ? 1 : dir === 'east' ? -1 : 0;
-    const yDir = dir === 'north' ? 1 : dir === 'south' ? -1 : 0;
+    const directionMap = { west: [1, 0], east: [-1, 0], north: [0, 1], south: [0, -1] };
+    const [xDir, yDir] = directionMap[dir];
 
     // same default values as KeyboardHandler.keydown() in mapbox's keyboard.js
     const panStep = 100; // pixels
@@ -38,9 +38,10 @@ export class SbbMapService {
   }
 
   addMissingImage(map: MaplibreMap, name: string, icon: string): void {
-    map.loadImage(icon, (error: any, image: any) =>
-      this._imageLoadedCallback(map, name, error, image),
-    );
+    map
+      .loadImage(icon)
+      .then(({ data: image }) => map.addImage(name, image, { pixelRatio: 2 }))
+      .catch((reason) => console.warn(reason));
   }
 
   verifySources(map: MaplibreMap, sourceIds: string[]): void {
@@ -52,14 +53,6 @@ export class SbbMapService {
     }
   }
 
-  private _imageLoadedCallback(map: MaplibreMap, name: string, error: any, image: any): void {
-    if (error) {
-      console.error(error);
-    } else {
-      map.addImage(name, image, { pixelRatio: 2 });
-    }
-  }
-
   private _centerMap(
     map: MaplibreMap,
     center: LngLatLike | undefined,

src/journey-maps/esri-plugin/esri-plugin.md

@@ -4,7 +4,7 @@ Utilize this component when you need to depict Esri Feature Layers on a MapLibre
 
 ### Compatibility
 
-The `maplibre-gl` version compatible with this version of `journey-maps` is `3.x.y`.
+The `maplibre-gl` version compatible with this version of `journey-maps` is `4.x.y`.
 
 You can even use our [Journey-Maps-Client](https://angular.app.sbb.ch/journey-maps/components/angular/overview) as well.
 
@@ -17,12 +17,14 @@ You should add the following two CSS files to your application:
 
 You can add them for example in the `styles` array of your `angular.json` file:
 
-```json lines
-"styles": [
-  "src/styles.scss",
-  "node_modules/maplibre-gl/dist/maplibre-gl.css"
-  "node_modules/@sbb-esta/angular/typography.css"
-],
+```json
+{
+  "styles": [
+    "src/styles.scss",
+    "node_modules/maplibre-gl/dist/maplibre-gl.css",
+    "node_modules/@sbb-esta/angular/typography.css"
+  ]
+}
 ```
 
 ### Usage

src/journey-maps/package.json

@@ -14,7 +14,7 @@
     "@angular/common": "0.0.0-NG",
     "@angular/core": "0.0.0-NG",
     "@types/geojson": ">=7946",
-    "maplibre-gl": "^3.6.2"
+    "maplibre-gl": "^4.7.1"
   },
   "ng-update": {
     "packageGroup": [

src/showcase/app/shared/shared.module.ts

@@ -1,4 +1,5 @@
 import { PortalModule } from '@angular/cdk/portal';
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { SbbAccordionModule } from '@sbb-esta/angular/accordion';
@@ -11,7 +12,14 @@ import { PackageViewerComponent } from './package-viewer/package-viewer.componen
 
 @NgModule({
   declarations: [MarkdownViewerComponent, ModeNotificationToastComponent, PackageViewerComponent],
-  imports: [PortalModule, SbbButtonModule, SbbSidebarModule, SbbAccordionModule, RouterModule],
+  imports: [
+    PortalModule,
+    SbbButtonModule,
+    SbbSidebarModule,
+    SbbAccordionModule,
+    RouterModule,
+    CommonModule,
+  ],
   exports: [MarkdownViewerComponent, PackageViewerComponent],
 })
 export class SharedModule {}

src/showcase/assets/stack-blitz/package.json

@@ -22,7 +22,7 @@
     "@angular/router": "^18.0.0",
     "@sbb-esta/angular": "^${version}",
     "@sbb-esta/journey-maps": "^${version}",
-    "maplibre-gl": "^3.6.2",
+    "maplibre-gl": "^4.7.1",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "~0.14.0"