How to draw UIBezierPath identical to MKPolyline in UIView

Question

I am currently tracking my location on MKMapView. My goal is to draw a bezier path identical to MKPolyline, created from tracked locations.

I tried: save all location coordinates in a CLLocation array. Iterate over this array and save the lat / lng coordinates in the CLLocationCoordinate2D array. Then, make sure the polyline is in the screen view, then convert all location coordinates to CGPoints.

Current attempt:

@IBOutlet weak var bezierPathView: UIView! var locations = [CLLocation]() // values from didUpdateLocation(_:) func createBezierPath() { bezierPathView.isHidden = false var coordinates = [CLLocationCoordinate2D]() for location in locations { coordinates.append(location.coordinate) } let polyline = MKPolyline(coordinates: coordinates, count: coordinates.count) fitPolylineInView(polyline: polyline) let mapPoints = polyline.points() var points = [CGPoint]() for point in 0...polyline.pointCount { let coordinate = MKCoordinateForMapPoint(mapPoints[point]) points.append(mapView.convert(coordinate, toPointTo: polylineView)) } print(points) let path = UIBezierPath(points: points) path.lineWidth = 2.0 path.lineJoinStyle = .round let layer = CAShapeLayer(path: path, lineColor: UIColor.red, fillColor: UIColor.black) bezierPathView.layer.addSublayer(layer) } extension UIBezierPath { convenience init(points:[CGPoint]) { self.init() //connect every points by line. //the first point is start point for (index,aPoint) in points.enumerated() { if index == 0 { self.move(to: aPoint) } else { self.addLine(to: aPoint) } } } } extension CAShapeLayer { convenience init(path:UIBezierPath, lineColor:UIColor, fillColor:UIColor) { self.init() self.path = path.cgPath self.strokeColor = lineColor.cgColor self.fillColor = fillColor.cgColor self.lineWidth = path.lineWidth self.opacity = 1 self.frame = path.bounds } } 

I can output points to the console that are stored in the convert (_ :) method (not sure if they are correct). However, there is no way out on bezierPathView, which leads to the creation of an empty white background image controller.

Answer 1

Your extensions are working fine. The problem may be in the code that adds the layer to the view (which you are not showing).

I would suggest that you simplify your project, for example, using a predefined array of points that definitely match your view. For example, for a view with a width of 500 pixels and a height of 300 pixels, you can use something like:

 let points = [ CGPoint(x: 10, y: 10), CGPoint(x: 490, y: 10), CGPoint(x: 490, y: 290), CGPoint(x: 10, y: 290), CGPoint(x: 10, y: 10) ] 

Use colors that are clearly visible, such as black and yellow for your stroke and fill.

Make sure your path is correctly added to the view, for example:

 let path = UIBezierPath(points: points) let shapeLayer = CAShapeLayer(path: path, lineColor: UIColor.blue, fillColor: UIColor.lightGray) view.layer.addSublayer(shapeLayer) 

Inspect the controller containing the view in Xcode Interface Builder. In the debug view hierarchy function: