Skip to content

Commit

Permalink
feat(journey-maps): show geolocation with custom control (#2011)
Browse files Browse the repository at this point in the history
Refs: ROKAS-100

---------

Co-authored-by: Chris Dickinson <“christopher.dickinson@sbb.ch”>
  • Loading branch information
2 people authored and github-actions committed Sep 19, 2023
1 parent ad87bd7 commit c5745c7
Show file tree
Hide file tree
Showing 16 changed files with 617 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,7 @@ export class JourneyMapsFullExample implements OnInit, OnDestroy {
zoomControls: [true],
basemapSwitch: [true],
homeButton: [true],
geoLocation: [true],
}),
styleOptions: _fb.group({
mode: ['bright', resetSelectedMarkerIdValidator],
Expand Down
9 changes: 9 additions & 0 deletions src/journey-maps/angular/BUILD.bazel
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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');
Original file line number Diff line number Diff line change
@@ -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();
}
}
Loading

0 comments on commit c5745c7

Please sign in to comment.