feat(journey-maps): show geolocation with custom control (#2011)

Refs: ROKAS-100

---------

Co-authored-by: Chris Dickinson <“christopher.dickinson@sbb.ch”>

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

@@ -78,6 +78,7 @@
             <sbb-checkbox formControlName="showSmallButtons">Small map controls</sbb-checkbox>
             <sbb-checkbox formControlName="basemapSwitch">Basemap Switch</sbb-checkbox>
             <sbb-checkbox formControlName="levelSwitch">Level Switcher</sbb-checkbox>
+            <sbb-checkbox formControlName="geoLocation">Show GeoLocation</sbb-checkbox>
           </ng-container>
           <sbb-checkbox formControlName="limitMaxBounds"> Limit max bounds to CH</sbb-checkbox>
         </div>

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

@@ -189,6 +189,7 @@ export class JourneyMapsFullExample implements OnInit, OnDestroy {
         zoomControls: [true],
         basemapSwitch: [true],
         homeButton: [true],
+        geoLocation: [true],
       }),
       styleOptions: _fb.group({
         mode: ['bright', resetSelectedMarkerIdValidator],

src/journey-maps/angular/BUILD.bazel

@@ -20,6 +20,7 @@ ng_module(
         ":journey-maps.css",
         ":components/attribution/attribution.css",
         ":components/basemap-switch/basemap-switch.css",
+        ":components/geolocate-button/geolocate-button.css",
         ":components/home-button/home-button.css",
         ":components/leit-poi/leit-poi.css",
         ":components/level-switch/level-switch.css",
@@ -71,6 +72,14 @@ sass_binary(
     ],
 )
 
+sass_binary(
+    name = "components_geolocate_button_geolocate_button_scss",
+    src = "components/geolocate-button/geolocate-button.scss",
+    deps = [
+        ":angular_scss_lib",
+    ],
+)
+
 sass_binary(
     name = "components_home_button_home_button_scss",
     src = "components/home-button/home-button.scss",

src/journey-maps/angular/components/geolocate-button/geolocate-button.html

@@ -0,0 +1,10 @@
+<div class="map-control-container" [class.small-buttons]="showSmallButtons" *ngIf="map">
+  <div class="map-control-button-wrapper">
+    <button
+      type="button"
+      (click)="onGeolocateButtonClicked()"
+      class="map-control-button"
+      [attr.aria-label]="geolocateButtonLabel"
+    ></button>
+  </div>
+</div>

src/journey-maps/angular/components/geolocate-button/geolocate-button.scss

@@ -0,0 +1,5 @@
+@use './../../style/functions' as f;
+
+@include f.map-controls-shared;
+@include f.map-control-icon;
+@include f.map-control-icon-button('gps');

src/journey-maps/angular/components/geolocate-button/geolocate-button.ts

@@ -0,0 +1,30 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Map as MaplibreMap } from 'maplibre-gl';
+
+import { SbbLocaleService } from '../../services/locale-service';
+
+@Component({
+  selector: 'sbb-geolocate-button',
+  templateUrl: './geolocate-button.html',
+  styleUrls: ['./geolocate-button.css'],
+})
+export class SbbGeolocateButton implements OnInit {
+  @Input() map: MaplibreMap | null;
+  @Input() showSmallButtons: boolean | undefined;
+
+  @Output() geolocateButtonClicked: EventEmitter<void> = new EventEmitter<void>();
+
+  geolocateButtonLabel: string;
+
+  constructor(private _i18n: SbbLocaleService) {}
+
+  ngOnInit(): void {
+    this.geolocateButtonLabel = `${this._i18n.getText('a4a.visualFunction')} ${this._i18n.getText(
+      'a4a.geolocateButton',
+    )}`;
+  }
+
+  onGeolocateButtonClicked(): void {
+    this.geolocateButtonClicked.next();
+  }
+}