I need to add an arrow each 15 steps of the polyline.
This code paints the full polyline without arrows, and it works very smooth and fast, but without arrows:
if (mapState.lineSteps.isNotEmpty()) { val polylinePoints = remember { mapState.lineSteps.map { LatLng(it.lat, it.lon) } } Polyline( points = polylinePoints ) } I tried with this code, which in fact draws arrows each 15 steps, but it does wrong, because the map is extremely slow, camera movement is very laggy:
val arrowBitmapDescriptor: BitmapDescriptor by remember { mutableStateOf(BitmapDescriptorFactory.fromResource(R.drawable.arrow)) } var numberOfArrows: Int = mapState.busStops.size / 3 if (numberOfArrows > 15) numberOfArrows = 15 val stepsBetweenArrows: Int = mapState.lineSteps.size / numberOfArrows var stepsToNextArrow = 0 var currentPos: LatLng var previousPos: LatLng = LatLng(mapState.lineSteps[0].lat, mapState.lineSteps[0].lon) for (step in mapState.lineSteps) { currentPos = LatLng(step.lat, step.lon) if (stepsToNextArrow >= stepsBetweenArrows) { Polyline( points = listOf(previousPos, currentPos), startCap = RoundCap(), endCap = CustomCap(arrowBitmapDescriptor, 30f), color = Color(0xff0e71b8), width = 7f, jointType = JointType.ROUND, geodesic = true ) stepsToNextArrow = 0 } else { Polyline( points = listOf(previousPos, currentPos), color = Color(0xff0e71b8), width = 7f, jointType = JointType.ROUND, geodesic = true ) } stepsToNextArrow++ previousPos = currentPos } How can I achieve this with smooth behaviour on the map?
