Swift: Subclass MKPolyline - ios

Question

I'm developing an app that request multiple directions (MKDirectionsRequest) and draw the routes in a mapView, all ok.
But I'm facing a problem: I want to draw each route with different color.
The first idea was simple: use title/subtitle to 'tag' different MKPolyline so I can set the color I want in the delegate function:
mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer
but I don't like this solution because it's 'ugly' and I will have to parse a string the day I will have to pass different params (traffic ..)
The second simple solution was to subclass MKPolyline, yeh simple ..
as MKPolyline doesn't have a designated initializer, this is impossible (is it ?)
[edit]: I want to create a subclass of MKPolyline to copy "on it" the already created MKPolyline returned by MKDirectionsRequest.routes but I can't figure out how to override the read-only params (Apple says that we should override them in the subclass and add the setter, but I have an infinite loop in the setter witch is .. normal)
if was using objC, it will be simple to "inject" code at runtime and add my params, but I'm using swift.
could anyone help on this, thanks.

Answer 1

Simpler method not requiring a custom renderer :
import UIKit
import MapKit
class CustomPolyline : MKPolyline {
var color: UIColor?
}
class ViewController: UIViewController, MKMapViewDelegate {
#IBOutlet weak var mapView: MKMapView!
override func viewDidLoad() {
super.viewDidLoad()
// setup mapView
mapView.delegate = self
// set map view region
let location : CLLocationCoordinate2D = CLLocationCoordinate2DMake(51.4987, 0.007);
let viewRegion = MKCoordinateRegionMakeWithDistance(location, 400, 400)
mapView.setRegion(viewRegion, animated:true )
// add red line
let coords1 = [CLLocationCoordinate2D(latitude: 51.499526, longitude: 0.004785),CLLocationCoordinate2D(latitude: 51.500007, longitude: 0.005493)]
let polyline1 = CustomPolyline(coordinates: coords1, count: coords1.count)
polyline1.color = UIColor.red
mapView.add(polyline1)
// add blue line
let coords2 = [CLLocationCoordinate2D(latitude: 51.498103, longitude: 0.007574), CLLocationCoordinate2D(latitude: 51.498190, longitude: 0.009677)]
let polyline2 = CustomPolyline(coordinates: coords2, count: coords2.count)
polyline2.color = UIColor.blue
mapView.add(polyline2)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
if overlay is CustomPolyline {
let polylineRenderer = MKPolylineRenderer(overlay: overlay)
polylineRenderer.strokeColor = (overlay as! CustomPolyline).color
polylineRenderer.lineWidth = 4
return polylineRenderer
}
return MKOverlayRenderer()
}
}

Answer 2

Why do you want to set color to your custom MKOverlay, couldnt you simply set the desired color to MKOverlayRenderer ? It should be quite simpler then.
You could also easily subclass MKPolyline. I dont see why you were not able to do that.
If you want to be able to create a custom MKOverlay and set custom properties, then, draw it into the map, you would also need to create your own renderer. That seems like a big job. But, here is an example how you could do that.
import UIKit
import MapKit
public class CustomOverlay: MKPolyline {
public var customColor: UIColor?
}
public class CustomRenderer: MKPolylineRenderer {
override public func strokePath(_ path: CGPath, in context: CGContext) {
guard let overlayColor = self.overlay as? CustomOverlay, let color = overlayColor.customColor else {
super.strokePath(path, in: context)
return
}
context.saveGState()
context.setStrokeColor(color.cgColor)
context.addPath(path)
context.drawPath(using: .stroke)
context.restoreGState()
}
}
public extension CLLocationCoordinate2D {
static let Salo = CLLocationCoordinate2DMake(60.3909, 23.1355)
static let Turku = CLLocationCoordinate2DMake(60.454510, 22.264824)
static let Helsinki = CLLocationCoordinate2DMake(60.170833, 24.9375)
}
public class ViewController: UIViewController, MKMapViewDelegate {
private var mapView: MKMapView!
override public func viewDidLoad() {
super.viewDidLoad()
createMapView()
setupMapView()
}
private func createMapView() {
mapView = MKMapView(frame: .zero)
mapView.translatesAutoresizingMaskIntoConstraints = false
mapView.delegate = self
view.addSubview(mapView)
[mapView.topAnchor.constraint(equalTo: view.topAnchor),
mapView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
mapView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
mapView.trailingAnchor.constraint(equalTo: view.trailingAnchor)].forEach { $0.isActive = true }
}
private func setupMapView() {
let coordinates: [CLLocationCoordinate2D] = [.Helsinki, .Turku]
let customPolyLine = CustomOverlay(coordinates: coordinates, count: coordinates.count)
customPolyLine.customColor = UIColor.red
mapView.add(customPolyLine)
let coordinateSpan = MKCoordinateSpan(latitudeDelta: 3, longitudeDelta: 3)
let region = MKCoordinateRegion(center: .Salo, span: coordinateSpan)
mapView.setRegion(region, animated: true)
}
// MARK: MKMapViewDelegate
public func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
/* return a simple renderer */
// let renderer = MKPolylineRenderer(overlay:overlay)
// renderer.lineWidth = 2
// renderer.lineDashPattern = [1, 2, 1]
// renderer.strokeColor = UIColor.red
// return renderer
/* a custom renderer */
let customRenderer = CustomRenderer(overlay: overlay)
customRenderer.lineWidth = 2
customRenderer.strokeColor = UIColor.green // this color is not used, since we apply color from overlay inside strokePath(:inContext:) method for custom renderer
customRenderer.lineDashPattern = [1, 2, 1]
return customRenderer
}
}