new distance system & maximum fraction digits

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"
       ></ferrostar-map>
       <div class="map-element" id="mapElement"></div>
     </div>

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"

web/src/ferrostar-map.ts

@@ -11,6 +11,27 @@ 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<DistanceSystem> = [
+  "metric",
+  "imperial",
+  "imperialWithYards",
+];
+
+const distanceSystemConverter = {
+  fromAttribute(value: string | null): DistanceSystem | null {
+    if (!value) return null;
+
+    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 +98,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 +438,8 @@ export class FerrostarMap extends LitElement {
             <div id="bottom-component">
               <trip-progress-view
                 .tripState=${this._navState?.tripState}
+                .system=${this.system}
+                .maximumFractionDigits="${this.maximumFractionDigits}"
               ></trip-progress-view>
               <button
                 id="stop-button"

web/src/trip-progress-view.ts

@@ -1,6 +1,7 @@
 import {
   LocalizedDurationFormatter,
   LocalizedDistanceFormatter,
+  DistanceSystem,
 } from "@maptimy/platform-formatters";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
@@ -13,6 +14,12 @@ export class TripProgressView extends LitElement {
   @property()
   tripState: any = null;
 
+  @property()
+  system: DistanceSystem = "metric";
+
+  @property()
+  maximumFractionDigits = 2;
+
   static styles = [
     css`
       .progress-view-card {
@@ -67,6 +74,8 @@ export class TripProgressView extends LitElement {
           <p class="arrival-text">
             ${DistanceFormatter.format(
               this.tripState.Navigating.progress.distanceRemaining,
+              this.system,
+              this.maximumFractionDigits,
             )}
           </p>
         </div>