From 77c3f38444335ec2659fd6c8a93ba27726055ab3 Mon Sep 17 00:00:00 2001
From: haysmike <mike.hays@goswift.ly>
Date: Thu, 4 Apr 2024 19:44:48 -0700
Subject: [PATCH] Add BorderedPolyline composable

---
 .../ferrostar/maplibreui/BorderedPolyline.kt  | 28 +++++++++++++++++++
 .../ferrostar/maplibreui/NavigationMapView.kt | 11 ++++----
 2 files changed, 33 insertions(+), 6 deletions(-)
 create mode 100644 android/MapLibreUI/src/main/java/com/stadiamaps/ferrostar/maplibreui/BorderedPolyline.kt

diff --git a/android/MapLibreUI/src/main/java/com/stadiamaps/ferrostar/maplibreui/BorderedPolyline.kt b/android/MapLibreUI/src/main/java/com/stadiamaps/ferrostar/maplibreui/BorderedPolyline.kt
new file mode 100644
index 00000000..f04a4c47
--- /dev/null
+++ b/android/MapLibreUI/src/main/java/com/stadiamaps/ferrostar/maplibreui/BorderedPolyline.kt
@@ -0,0 +1,28 @@
+package com.stadiamaps.ferrostar.maplibreui
+
+import androidx.compose.runtime.Composable
+import com.mapbox.mapboxsdk.geometry.LatLng
+import org.ramani.compose.Polyline
+
+@Composable
+fun BorderedPolyline(
+    points: List<LatLng>,
+    zIndex: Int = 1,
+    color: String = "#3583dd",
+    borderColor: String = "#ffffff",
+    lineWidth: Float = 6f,
+    borderWidth: Float = 2f,
+) {
+  Polyline(
+      points = points,
+      color = borderColor,
+      lineWidth = lineWidth + borderWidth * 2f,
+      zIndex = zIndex,
+  )
+  Polyline(
+      points = points,
+      color = color,
+      lineWidth = lineWidth,
+      zIndex = zIndex,
+  )
+}
diff --git a/android/MapLibreUI/src/main/java/com/stadiamaps/ferrostar/maplibreui/NavigationMapView.kt b/android/MapLibreUI/src/main/java/com/stadiamaps/ferrostar/maplibreui/NavigationMapView.kt
index 1a86e900..e8e2c489 100644
--- a/android/MapLibreUI/src/main/java/com/stadiamaps/ferrostar/maplibreui/NavigationMapView.kt
+++ b/android/MapLibreUI/src/main/java/com/stadiamaps/ferrostar/maplibreui/NavigationMapView.kt
@@ -12,7 +12,6 @@ import org.ramani.compose.CameraMotionType
 import org.ramani.compose.CameraPosition
 import org.ramani.compose.Circle
 import org.ramani.compose.MapLibre
-import org.ramani.compose.Polyline
 import uniffi.ferrostar.VisualInstruction
 
 @Composable
@@ -40,17 +39,17 @@ fun NavigationMapView(
                 tilt = 45.0,
                 bearing = uiState.value.snappedLocation.courseOverGround?.degrees?.toDouble(),
                 motionType = CameraMotionType.EASE)) {
+          BorderedPolyline(
+              points = uiState.value.routeGeometry.map { LatLng(it.lat, it.lng) }, zIndex = 1)
           Circle(
               center =
                   LatLng(
                       uiState.value.snappedLocation.coordinates.lat,
                       uiState.value.snappedLocation.coordinates.lng),
               radius = 10f,
-              color = "Blue")
-          Polyline(
-              points = uiState.value.routeGeometry.map { LatLng(it.lat, it.lng) },
-              color = "Red",
-              lineWidth = 5f)
+              color = "Blue",
+              zIndex = 2,
+          )
         }
 
     uiState.value.visualInstruction?.let {