Creating gradient on polylines in SwiftUI MapKit

When using MapKit and SwiftUI, Xcode will autocomplete to suggest you use linearGradient(_:startPoint:endPoint:options:) to style a MapPolyline. The linearGradient() method requires you to provide a start and end point in the screen space. However, most of the time, if you are reaching for a gradient, you want it to follow the line along the map.

By passing a Gradient directly to the stroke() modifier, you can avoid needing to provide a screen space startPoint and endPoint, allowing the gradient to follow the line on the map.

MapPolyline(
    coordinates: coordinates
)
.stroke(
    Gradient(colors: [.red, .indigo])
)

This approach simplifies the implementation and creates a more visually appealing effect.

Level up your Swift skills!$35

100+ tips to take your Swift code to the next level

Swift Gemsby Natalia Panferova

• Advanced Swift techniques for experienced developers bypassing basic tutorials
• Curated, actionable tips ready for immediate integration into any Swift project
• Strategies to improve code quality, structure, and performance across all platforms

Level up your Swift skills!

100+ tips to take your Swift code to the next level

Swift Gems

by Natalia Panferova

$35