From 84693ddae40a7a67ae0f5938bcd46df243dda876 Mon Sep 17 00:00:00 2001 From: Uryn Dmytro Date: Thu, 24 Jul 2025 19:47:13 +0300 Subject: [PATCH 1/6] new distance system & maximum fraction digits --- web/index.html | 2 ++ web/package-lock.json | 8 ++++---- web/package.json | 2 +- web/src/ferrostar-map.ts | 27 +++++++++++++++++++++++++++ web/src/trip-progress-view.ts | 9 +++++++++ 5 files changed, 43 insertions(+), 5 deletions(-) diff --git a/web/index.html b/web/index.html index de0f32c6a..514221dc6 100644 --- a/web/index.html +++ b/web/index.html @@ -53,6 +53,8 @@ valhallaEndpointUrl="https://api.stadiamaps.com/route/v1" styleUrl="https://tiles.stadiamaps.com/styles/outdoors.json" profile="bicycle" + system="imperial" + maximumFractionDigits="2" >
diff --git a/web/package-lock.json b/web/package-lock.json index 52fcfd50a..14d040845 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -9,7 +9,7 @@ "version": "0.39.0", "license": "BSD-3-Clause", "dependencies": { - "@maptimy/platform-formatters": "^0.6.0", + "@maptimy/platform-formatters": "^0.6.1", "@stadiamaps/ferrostar": "file:../common/ferrostar/pkg", "lit": "^3.2.1", "maplibre-gl": "^4.5.0 || ^5" @@ -891,9 +891,9 @@ } }, "node_modules/@maptimy/platform-formatters": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/@maptimy/platform-formatters/-/platform-formatters-0.6.0.tgz", - "integrity": "sha512-RcrraHnEvrr7M4wKx4I1SUrRi7b5R7/S7t6GBFt3EcToVDxa83kdOUN9INu876PKINLaoA4bTyJSYQBY0pXr9A==", + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/@maptimy/platform-formatters/-/platform-formatters-0.6.1.tgz", + "integrity": "sha512-jA8QY2I228C+sDKuBcpoin/Ophk9+iY5RCWNW0RwMlE8bU4UqcI+DxmkAjLvuP3JMM3Gf8bFokmzLajOoe1ZUw==", "license": "BSD-3-Clause", "peerDependencies": { "react-native": "*" diff --git a/web/package.json b/web/package.json index 7f923ea73..214ca3513 100644 --- a/web/package.json +++ b/web/package.json @@ -34,7 +34,7 @@ "lint:fix": "eslint --cache --ext .js,.ts,.html src --fix" }, "dependencies": { - "@maptimy/platform-formatters": "^0.6.0", + "@maptimy/platform-formatters": "^0.6.1", "@stadiamaps/ferrostar": "file:../common/ferrostar/pkg", "lit": "^3.2.1", "maplibre-gl": "^4.5.0 || ^5" diff --git a/web/src/ferrostar-map.ts b/web/src/ferrostar-map.ts index 99ba92480..9b563c12e 100644 --- a/web/src/ferrostar-map.ts +++ b/web/src/ferrostar-map.ts @@ -11,6 +11,25 @@ import "./instructions-view"; import "./trip-progress-view"; import { SimulatedLocationProvider } from "./location"; import CloseSvg from "./assets/directions/close.svg"; +import { DistanceSystem } from "@maptimy/platform-formatters"; + +const allowedSystems: Array = [ + "metric", + "imperial", + "imperialWithYards", +]; + +const distanceSystemConverter = { + fromAttribute(value: string): DistanceSystem { + if (allowedSystems.includes(value as DistanceSystem)) { + return value as DistanceSystem; + } + throw new Error(`Invalid distance system: ${value}`); + }, + toAttribute(value: DistanceSystem): string { + return value; + }, +}; /** * A MapLibre-based map component specialized for navigation. @@ -77,6 +96,12 @@ export class FerrostarMap extends LitElement { @property({ type: Boolean }) addGeolocateControl: boolean = true; + @property({ converter: distanceSystemConverter }) + system?: DistanceSystem; + + @property({ type: Number }) + maximumFractionDigits?: number; + routeAdapter: RouteAdapter | null = null; /** @@ -411,6 +436,8 @@ export class FerrostarMap extends LitElement {
From 39ee0f36d5c017950b00bb93c4ea80b0165686fb Mon Sep 17 00:00:00 2001 From: Uryn Dmytro Date: Thu, 24 Jul 2025 22:14:02 +0300 Subject: [PATCH 2/6] make distanceSystemConverter fromAttribute value nullable --- web/src/ferrostar-map.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/web/src/ferrostar-map.ts b/web/src/ferrostar-map.ts index 9b563c12e..29e3bd3af 100644 --- a/web/src/ferrostar-map.ts +++ b/web/src/ferrostar-map.ts @@ -20,7 +20,9 @@ const allowedSystems: Array = [ ]; const distanceSystemConverter = { - fromAttribute(value: string): DistanceSystem { + fromAttribute(value: string | null): DistanceSystem | null { + if (!value) return null; + if (allowedSystems.includes(value as DistanceSystem)) { return value as DistanceSystem; } From 7e20aae12ab3e9f0becd2d4e986d64b68b9cefb6 Mon Sep 17 00:00:00 2001 From: Uryn Dmytro Date: Wed, 6 Aug 2025 20:30:01 +0300 Subject: [PATCH 3/6] CR changes --- web/src/ferrostar-map.ts | 12 ++++++++++-- web/src/instructions-view.ts | 13 ++++++++++++- web/src/trip-progress-view.ts | 4 ++-- 3 files changed, 24 insertions(+), 5 deletions(-) diff --git a/web/src/ferrostar-map.ts b/web/src/ferrostar-map.ts index 29e3bd3af..0b13a9852 100644 --- a/web/src/ferrostar-map.ts +++ b/web/src/ferrostar-map.ts @@ -101,8 +101,14 @@ export class FerrostarMap extends LitElement { @property({ converter: distanceSystemConverter }) system?: DistanceSystem; + /** + * Specifies the maximum number of digits allowed after the decimal point + * when formatting distance. This helps control the precision of fractional values. + * + * Example: For a value of 2, the number 3.1415 would be rounded as 3.14. + */ @property({ type: Number }) - maximumFractionDigits?: number; + maxDecimalPlaces?: number; routeAdapter: RouteAdapter | null = null; @@ -433,13 +439,15 @@ export class FerrostarMap extends LitElement {
diff --git a/web/src/trip-progress-view.ts b/web/src/trip-progress-view.ts index 877c25b5b..b4eca0c84 100644 --- a/web/src/trip-progress-view.ts +++ b/web/src/trip-progress-view.ts @@ -18,7 +18,7 @@ export class TripProgressView extends LitElement { system: DistanceSystem = "metric"; @property() - maximumFractionDigits = 2; + maxDecimalPlaces = 2; static styles = [ css` @@ -75,7 +75,7 @@ export class TripProgressView extends LitElement { ${DistanceFormatter.format( this.tripState.Navigating.progress.distanceRemaining, this.system, - this.maximumFractionDigits, + this.maxDecimalPlaces, )}

From 8dd7064b9bb7685b3c98d5b7d24f614a90a049e4 Mon Sep 17 00:00:00 2001 From: Uryn Dmytro Date: Wed, 20 Aug 2025 20:36:32 +0300 Subject: [PATCH 4/6] create function to format distance --- web/src/instructions-view.ts | 10 +++------- web/src/trip-progress-view.ts | 5 ++--- web/src/util.ts | 23 +++++++++++++++++++++++ 3 files changed, 28 insertions(+), 10 deletions(-) create mode 100644 web/src/util.ts diff --git a/web/src/instructions-view.ts b/web/src/instructions-view.ts index 43e9d1639..42b6cdc36 100644 --- a/web/src/instructions-view.ts +++ b/web/src/instructions-view.ts @@ -1,12 +1,8 @@ import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import { - DistanceSystem, - LocalizedDistanceFormatter, -} from "@maptimy/platform-formatters"; +import { DistanceSystem } from "@maptimy/platform-formatters"; import "./maneuver-image"; - -const DistanceFormatter = LocalizedDistanceFormatter(); +import { formatDistance } from "./util"; @customElement("instructions-view") export class InstructionsView extends LitElement { @@ -72,7 +68,7 @@ export class InstructionsView extends LitElement { ${this.tripState.Navigating.visualInstruction.primaryContent.text}

- ${DistanceFormatter.format( + ${formatDistance( this.tripState.Navigating.progress.distanceToNextManeuver, this.system, this.maxDecimalPlaces, diff --git a/web/src/trip-progress-view.ts b/web/src/trip-progress-view.ts index b4eca0c84..5e19af258 100644 --- a/web/src/trip-progress-view.ts +++ b/web/src/trip-progress-view.ts @@ -1,13 +1,12 @@ import { LocalizedDurationFormatter, - LocalizedDistanceFormatter, DistanceSystem, } from "@maptimy/platform-formatters"; import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; +import { formatDistance } from "./util"; const DurationFormatter = LocalizedDurationFormatter(); -const DistanceFormatter = LocalizedDistanceFormatter(); @customElement("trip-progress-view") export class TripProgressView extends LitElement { @@ -72,7 +71,7 @@ export class TripProgressView extends LitElement { )}

- ${DistanceFormatter.format( + ${formatDistance( this.tripState.Navigating.progress.distanceRemaining, this.system, this.maxDecimalPlaces, diff --git a/web/src/util.ts b/web/src/util.ts new file mode 100644 index 000000000..f1f8fd855 --- /dev/null +++ b/web/src/util.ts @@ -0,0 +1,23 @@ +import { + DistanceSystem, + LocalizedDistanceFormatter, +} from "@maptimy/platform-formatters"; + +const DistanceFormatter = LocalizedDistanceFormatter(); + +export function formatDistance( + distanceMeters: number, + system: DistanceSystem = "metric", + desiredMaxDecimalPlaces: number = 2, +): string { + const THRESHOLDS: Record = { + metric: 1000, + imperial: 1609.34, + imperialWithYards: 1609.34, + }; + + const exceedsThreshold = distanceMeters > THRESHOLDS[system]; + const decimalPlaces = exceedsThreshold ? desiredMaxDecimalPlaces : 0; + + return DistanceFormatter.format(distanceMeters, system, decimalPlaces); +} From 72ad5f34165737f11aa9620404b86f7e35b9a64d Mon Sep 17 00:00:00 2001 From: Ian Wagner Date: Wed, 27 Aug 2025 12:23:29 +0900 Subject: [PATCH 5/6] Minor cleanup --- web/package-lock.json | 2 +- web/src/{util.ts => formatting.ts} | 4 ++-- web/src/instructions-view.ts | 2 +- web/src/trip-progress-view.ts | 8 +++++++- 4 files changed, 11 insertions(+), 5 deletions(-) rename web/src/{util.ts => formatting.ts} (87%) diff --git a/web/package-lock.json b/web/package-lock.json index cb2646daf..0ee6dd79e 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -35,7 +35,7 @@ }, "../common/ferrostar/pkg": { "name": "@stadiamaps/ferrostar", - "version": "0.40.0", + "version": "0.41.0", "license": "BSD-3-Clause" }, "node_modules/@babel/helper-string-parser": { diff --git a/web/src/util.ts b/web/src/formatting.ts similarity index 87% rename from web/src/util.ts rename to web/src/formatting.ts index f1f8fd855..a29f3285a 100644 --- a/web/src/util.ts +++ b/web/src/formatting.ts @@ -12,8 +12,8 @@ export function formatDistance( ): string { const THRESHOLDS: Record = { metric: 1000, - imperial: 1609.34, - imperialWithYards: 1609.34, + imperial: 1609.34, // 1 mile + imperialWithYards: 1609.34, // 1 mile }; const exceedsThreshold = distanceMeters > THRESHOLDS[system]; diff --git a/web/src/instructions-view.ts b/web/src/instructions-view.ts index 42b6cdc36..c36f7d90a 100644 --- a/web/src/instructions-view.ts +++ b/web/src/instructions-view.ts @@ -2,7 +2,7 @@ import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { DistanceSystem } from "@maptimy/platform-formatters"; import "./maneuver-image"; -import { formatDistance } from "./util"; +import { formatDistance } from "./formatting"; @customElement("instructions-view") export class InstructionsView extends LitElement { diff --git a/web/src/trip-progress-view.ts b/web/src/trip-progress-view.ts index 5e19af258..53ff97fb2 100644 --- a/web/src/trip-progress-view.ts +++ b/web/src/trip-progress-view.ts @@ -4,7 +4,7 @@ import { } from "@maptimy/platform-formatters"; import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import { formatDistance } from "./util"; +import { formatDistance } from "./formatting"; const DurationFormatter = LocalizedDurationFormatter(); @@ -16,6 +16,12 @@ export class TripProgressView extends LitElement { @property() system: DistanceSystem = "metric"; + /** + * Specifies the maximum number of digits allowed after the decimal point + * when formatting distance. This helps control the precision of fractional values. + * + * Example: For a value of 2, the number 3.1415 would be rounded as 3.14. + */ @property() maxDecimalPlaces = 2; From 3ae947f0e8aed4f0b7b461ba5e04278dafb42671 Mon Sep 17 00:00:00 2001 From: Uryn Dmytro Date: Tue, 2 Sep 2025 00:18:46 +0300 Subject: [PATCH 6/6] update comment --- web/src/formatting.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/formatting.ts b/web/src/formatting.ts index a29f3285a..7442493ad 100644 --- a/web/src/formatting.ts +++ b/web/src/formatting.ts @@ -12,8 +12,8 @@ export function formatDistance( ): string { const THRESHOLDS: Record = { metric: 1000, - imperial: 1609.34, // 1 mile - imperialWithYards: 1609.34, // 1 mile + imperial: 1609.34, // 1 mile + imperialWithYards: 1609.34, // 1 mile }; const exceedsThreshold = distanceMeters > THRESHOLDS[system];