GitPedia

GradientPathRenderer

Renders MKPolyline with a fancy multicoloured gradient fill

From joeltrew·Updated June 24, 2026·View on GitHub·

Renders MKPolyline with a fancy multicoloured gradient fill similar to the Nike + Running App. A drop in replacement for MKPolylineRenderer, supports multiple colour stops and an optional border. The project is written primarily in Swift, distributed under the MIT License license, first published in 2016. Key topics include: gradient, ios, mapkit, maps, mkpolyline.

GradientPathRenderer

Renders MKPolyline with a fancy multicoloured gradient fill similar to the Nike + Running App.
A drop in replacement for MKPolylineRenderer, supports multiple colour stops and an optional border.

Installation

  1. Add GradientPathRenderer.swift to your project
  2. Inside rendererForOverlay delegate method, use GradientPathRenderer as you would an MKPolyLineRenderer
swift
func mapView(mapView: MKMapView, rendererForOverlay overlay: MKOverlay) -> MKOverlayRenderer { if let overlay = overlay as? MKPolyline { /// define a list of colors you want in your gradient let gradientColors = [UIColor.green, UIColor.blue, UIColor.yellow, UIColor.red] /// Initialise a GradientPathRenderer with the colors let polylineRenderer = GradientPathRenderer(polyline: overlay, colors: gradientColors) /// set a linewidth polylineRenderer.lineWidth = 7 return polylineRenderer } }
  1. Optionally include border and borderColor variables to render a border on the polyline
swift
polylineRenderer.border = true polylineRenderer.borderColor = UIColor.red /* defaults to white if not specified*/

Contributors

Showing top 4 contributors by commit count.

View all contributors on GitHub →

This article is auto-generated from joeltrew/GradientPathRenderer via the GitHub API.Last fetched: 6/27/2026