Optimize web component display for mobile

Package.swift

@@ -16,7 +16,7 @@ if useLocalFramework {
         path: "./common/target/ios/libferrostar-rs.xcframework"
     )
 } else {
-    let releaseTag = "0.10.0"
+    let releaseTag = "0.10.1"
     let releaseChecksum = "e4eafc2331e5a6307cdd6257fe73ae8a977fca119938788d976d0218cfbfc5a8"
     binaryTarget = .binaryTarget(
         name: "FerrostarCoreRS",

android/build.gradle

@@ -12,5 +12,5 @@ plugins {
 
 allprojects {
     group = "com.stadiamaps.ferrostar"
-    version = "0.10.0"
+    version = "0.10.1"
 }

android/composeui/src/main/java/com/stadiamaps/ferrostar/composeui/formatting/DistanceFormatter.kt

@@ -150,7 +150,7 @@ class LocalizedDistanceFormatter(
                 DecimalPrecision.NEAREST_TENTH
               }
         } else {
-          // Longer distances: use m
+          // Shorter distances: use m
           unit = MeasureUnit.METER
           distance =
               if (distanceInMeters > 100) {

common/ferrostar/Cargo.toml

@@ -2,7 +2,7 @@ lints.workspace = true
 
 [package]
 name = "ferrostar"
-version = "0.10.0"
+version = "0.10.1"
 readme = "README.md"
 description = "The core of modern turn-by-turn navigation."
 keywords = ["navigation", "routing", "valhalla", "osrm"]

common/ferrostar/src/routing_adapters/osrm/models.rs

@@ -157,7 +157,7 @@ pub struct BannerInstruction {
 pub struct VoiceInstruction {
     pub announcement: String,
     pub ssml_announcement: Option<String>,
-    /// How far (in meters) from the upcoming maneuver the instruction should start being displayed
+    /// How far (in meters) from the upcoming maneuver the instruction should be announced
     pub distance_along_geometry: f64,
 }
 

web/package.json

@@ -3,9 +3,10 @@
   "collaborators": [
     "Ian Wagner <ian@stadiamaps.com>",
     "Jacob Fielding <jacob@rallista.app>",
+    "CatMe0w <CatMe0w@live.cn> (https://github.com/CatMe0w)",
     "Luke Seelenbinder <luke@stadiamaps.com>"
   ],
-  "version": "0.9.2",
+  "version": "0.10.1",
   "license": "BSD-3-Clause",
   "type": "module",
   "main": "./dist/ferrostar-webcomponents.js",

web/src/arrival-view.ts

@@ -1,6 +1,10 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
+function roundToNearest(value: number, unit: number): number {
+  return Math.round(value / unit) * unit
+}
+
 @customElement("arrival-view")
 export class ArrivalView extends LitElement {
   @property()
@@ -19,7 +23,7 @@ export class ArrivalView extends LitElement {
       }
 
       .arrival-text {
-        font-size: x-large;
+        font-size: medium;
         margin: 0 15px;
         white-space: nowrap;
       }
@@ -36,22 +40,43 @@ export class ArrivalView extends LitElement {
   }
 
   getDistanceRemaining(meters: number) {
-    return `${Math.round(meters).toLocaleString()}m`;
+    // TODO: Consider extracting this to Rust; Kotlin has the same logic
+    if (meters > 1_000) {
+      let value = meters / 1_000;
+
+      if (value > 10_000) {
+        value = roundToNearest(value, 1);
+      } else {
+        value = roundToNearest(value, 0.1);
+      }
+
+      return `${value.toLocaleString()}km`
+    } else {
+      let value;
+      if (meters > 100) {
+        value = roundToNearest(meters, 100);
+      } else if (meters > 10) {
+        value = roundToNearest(meters, 10);
+      } else {
+        value = roundToNearest(meters, 5);
+      }
+
+      return `${value.toLocaleString()}m`
+    }
   }
 
   getDurationRemaining(seconds: number) {
     const minutes = Math.floor(seconds / 60);
-    const remainingSeconds = Math.floor(seconds % 60);
-    return `${minutes}m ${remainingSeconds}s`;
+    return `${minutes}m`;
   }
 
   render() {
     if (this.tripState?.Navigating) {
       return html`
         <div class="arrival-view-card">
           <p class="arrival-text">${this.getArrivalTime(this.tripState.Navigating.progress.durationRemaining)}</p>
-          <p class="arrival-text">${this.getDistanceRemaining(this.tripState.Navigating.progress.distanceRemaining)}</p>
           <p class="arrival-text">${this.getDurationRemaining(this.tripState.Navigating.progress.durationRemaining)}</p>
+          <p class="arrival-text">${this.getDistanceRemaining(this.tripState.Navigating.progress.distanceRemaining)}</p>
         </div>
       `;
     }

web/src/ferrostar-map.ts

@@ -77,7 +77,7 @@ export class FerrostarMap extends LitElement {
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        max-width: 80%;
+        width: 80%;
         z-index: 1000;
       }
 
@@ -156,6 +156,7 @@ export class FerrostarMap extends LitElement {
       pitch: this.pitch,
       bearing: 0,
       zoom: this.zoom,
+      attributionControl: {compact: true}
     });
 
     if (this.useIntegratedSearchBox) {