Add BorderedPolyline composable

stadiamaps · Apr 9, 2024 · 77c3f38 · 77c3f38
1 parent 2755653
commit 77c3f38
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
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
@@ -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
@@ -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 {