Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(journey-maps): add SbbRailNetworkOptions #1837

Merged
merged 35 commits into from
Mar 17, 2023
Merged
Show file tree
Hide file tree
Changes from 34 commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
256e604
feat(journey-maps): improved route hover
mstankala Feb 23, 2023
77d04d8
feat(journey-maps): listener route layer ids changed
mstankala Feb 23, 2023
518c0b2
feat(journey-maps): improved route hover in V1-Style
mstankala Feb 23, 2023
3c52155
Merge branch 'main' into feature/journey-maps-v2-route-hover
mstankala Feb 23, 2023
f323619
feat(journey-maps): improved route hover in V1-Style
mstankala Feb 23, 2023
8aca6e5
feat(journey-maps): code cleanup
mstankala Feb 24, 2023
3f9c06b
feat(journey-maps): simplify layer ids list
mstankala Feb 24, 2023
fcb74c0
feat(journey-maps): improved leg hover and selection
mstankala Feb 27, 2023
205124c
Merge branch 'main' into feature/journey-maps-v2-route-hover
mstankala Feb 27, 2023
bdd76ec
Merge branch 'main' into feature/journey-maps-v2-route-hover
mstankala Mar 1, 2023
eee6466
feat(journey-maps): improved leg selection
mstankala Mar 1, 2023
7783c93
Merge branch 'main' into feature/journey-maps-v2-route-hover
mstankala Mar 8, 2023
152bd64
feature(journey-maps): updated `journey-maps` css version 2.4.0
mstankala Mar 9, 2023
20ebddc
Merge branch 'feature/journey-maps-maplibre-version-upgrade' into fea…
mstankala Mar 9, 2023
21ba081
feature(journey-maps): introducing SbbRailNetworkOptions
mstankala Mar 9, 2023
b553f2e
feature(journey-maps): introducing SbbRailNetworkOptions
mstankala Mar 9, 2023
ab4df27
feature(journey-maps): introducing SbbRailNetworkOptions
mstankala Mar 9, 2023
9d77ac3
feature(journey-maps): introducing SbbRailNetworkOptions
mstankala Mar 9, 2023
c20a3b1
feature(journey-maps): introducing SbbRailNetworkOptions
mstankala Mar 9, 2023
74e4344
Merge branch 'main' into feature/journey-maps-route-color-options
mstankala Mar 9, 2023
eda49c4
feat(journey-maps): doc cleanup
mstankala Mar 9, 2023
1c8367b
Merge branch 'main' into feature/journey-maps-route-color-options
mstankala Mar 9, 2023
9da8a00
feat(journey-maps): cleanup
mstankala Mar 9, 2023
0f40158
feat(journey-maps): code cleanup
mstankala Mar 10, 2023
2c5975c
Merge branch 'main' into feature/journey-maps-route-color-options
mstankala Mar 10, 2023
27f1db7
feat(journey-maps): rail network options moved into style options
mstankala Mar 14, 2023
8004e87
Merge branch 'main' into feature/journey-maps-route-color-options
mstankala Mar 14, 2023
98e58b1
docs(journey-maps): rail network options docs
mstankala Mar 14, 2023
5de1088
docs(journey-maps): rail network options docs
mstankala Mar 14, 2023
4f4ab69
feat(journey-maps): rail network options moved into style options
mstankala Mar 14, 2023
c9af14a
feat(journey-maps): rail network options moved into style options
mstankala Mar 14, 2023
acd8fbc
feat(journey-maps): rail network options moved into style options
mstankala Mar 14, 2023
2e70d16
feat(journey-maps): rail network options moved into style options
mstankala Mar 14, 2023
f045c61
feat(journey-maps): rail network options moved into style options
mstankala Mar 14, 2023
43484e2
Merge branch 'main' into feature/journey-maps-route-color-options
mstankala Mar 16, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 } },
Expand All @@ -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 = {
Expand Down Expand Up @@ -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({
Expand Down
13 changes: 12 additions & 1 deletion src/journey-maps/angular/journey-maps.interfaces.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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;
Expand Down
12 changes: 12 additions & 0 deletions src/journey-maps/angular/journey-maps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
);
}
});
});

Expand Down Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
}