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.
WWDC 2025 offer: 30% off!$35$25
The essential guide to SwiftUI core concepts and APIs
SwiftUI Fundamentals
- Explore the key APIs and design patterns that form the foundation of SwiftUI
- Develop a deep, practical understanding of how SwiftUI works under the hood
- Learn from a former Apple engineer who worked on widely used SwiftUI APIs
The essential guide to SwiftUI core concepts and APIs
SwiftUI Fundamentals