How to draw arc/curve line with MKOverlayView on MKMapView

Question

Help needed now. I can draw lines with MKPolyline and MKPolylineView, but how to draw an arc or curve lines between two coordinates on the MKMapView? Great thanks.

Rappel

Hi, I'm trying your solution for drawing un mere arc path on my map but I'm experiencing some issues... Could you show me some code because I really need to do that in my app and couldn't find any workthrough so far... Thanks in advance ! Ben – V

Hi, @Ben. And what do you want to draw on your map? – Rappel

Thanks! What do you mean in part 1 when you say: "Then in the -mapView:viewForOverlay: method you create the custom class take that polyline." Should I do: [[THE-CUSTOM-CLASS alloc] initWithOverlay:THE-MKPOLYLINE-OVERLAY] – Hartmunn

Could you please give an example of how the overridden -createPath method would look like. Unfortunately I have no experience with Core Graphics or whatsoever, so this is a tricky point for me... – Itching

If anyone reading this kindly take a look at the updated solution for iOS7+ https://mcmap.net/q/710562/-how-to-draw-arc-curve-line-with-mkoverlayview-on-mkmapview OPs solution is below iOS7. – Hydrargyrum

Answer 1

Before answering the question it is important to mention that MKOverlayView is deprecated and from iOS7 and later we should use MKOverlayRenderer:

In iOS 7 and later, use the MKOverlayRenderer class to display overlays instead.

We can now break it down on how to implement the arc/curve line:

1. First, we need to define and add our poly line. Let's create one with 2 coordinates:

let polyline = MKPolyline(coordinates: coordinates, count: coordinates.count)
mapView.addOverlay(polyline)

2. After adding the polyline, MKMapView will want us to provide a proper MKOverlayRenderer in corresponding to the MKPolyline we've created at section 1. The method we need is:

mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer

Which basically:

Asks the delegate for a renderer object to use when drawing the specified overlay.

3. So let's provide that object. We will want to subclass MKOverlayPathRenderer which obviously inherits from MKOverlayRenderer and as documentation states:

Use this renderer when your overlay's shape is defined by a CGPath object. By default, this renderer fills the overlay's shape and represents the strokes of the path using its current attributes.

So if we will use our newly subclass object as is, we will get an out-of-the-box solution which is a solid line from the 1st coordinate to the 2nd one we've defined in section 1, but since we want a curved line we will have to override a method for that:

You can use this class as-is or subclass to define additional drawing behaviors. If you subclass, override the createPath() method and use that method to build the appropriate path object. To change the path, invalidate it and recreate the path using whatever new data your subclass has obtained.

It means that inside our CustomObject: MKOverlayPathRenderer we will override createPath:

override func createPath() {
 let polyline = overlay as! MKPolyline
 // Getting the coordinates from the polyline
 let points = polyline.points()
 // Taking the center of the polyline (between the 2 coordiantes) and converting to CGPoint
 let centerMapPoint = MKMapPoint(polyline.coordinate)
 // Converting coordinates to CGPoint corresponding to the specified point on the map
 let startPoint = point(for: points[0])
 let endPoint = point(for: points[1])
 let centerPoint = point(for: centerMapPoint)

 // I would like to thank a co-worker of mine for the controlPoint formula :)
 let controlPoint = CGPoint(x: centerPoint.x + (startPoint.y - endPoint.y) / 3,
                            y: centerPoint.y + (endPoint.x - startPoint.x) / 3)

 // Defining our new curved path using Bezier path
 let myPath = UIBezierPath()
 myPath.move(to: startPoint)
 myPath.addQuadCurve(to: endPoint,
                     controlPoint: controlPoint)
 // Mutates the solid line with our curved one
 path = myPath.cgPath
}

We are basically done. You might want to consider adding width/stroke/color etc so you could see the curved line.

4. (Optional) If you are interested in a gradient curved line, there is a really great solution here but there are 2 changes you will have to make in the code in order for this to work:

4.1. After overriding override func draw(_ mapRect: MKMapRect, zoomScale: MKZoomScale, in context: CGContext), just before adding the gradient, you will have to add the same code from section 3 but instead of changing the inner path you will have to add it to the provided context:

context.move(to: startPoint)
context.addQuadCurve(to: endPoint,
                     control: controlPoint)

This basically gives us a curved line we need regarding the gradient coloring.

4.2. Instead of using path.boundingBoxOfPath we will need to use path.boundingBox because:

... including control points for Bézier and quadratic curves.

Unlike boundingBoxOfPath:

... not including control points for Bézier and quadratic curves.

Hope that helps :)

Hydrargyrum

Thanks! I just had to add let polyline = overlay as! MKPolyline as polyline was missing in your code. – Xanthene

Glad I could help, not sure I understand where it is missing, mind elaborating ? Thanks – Hydrargyrum

The variable polyline is not defined in createPath() – Xanthene

This was missing: ` func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer { if let routePolyline = overlay as? MKPolyline { let renderer = CustomObject(overlay: routePolyline) renderer.strokeColor = UIColor.systemBlue renderer.lineWidth = 2 return renderer } return MKOverlayRenderer() } ` – Voluntaryism

Answer 2

Reading the documentation, it seems that you can create an instance of MKOverlayPathView and assign an arbitrary CGPathRef object to its path property. This path can contain both straight lines and arcs.

I don't know (and the documentation doesn't mention) in what format the coordinates of the path should be (MKMapPoint or CLLocationCoordinate2D come to mind) but you can probably find that out by experimenting a bit.

Insole

You have to convert the coordinates to points respect to the view, MapView has a method convetCoordinatestoPoints and in reverse, That may help to construct the CGPathRef – Amadus

Answer 3

You answered yourself in your comment already, but I'd like to point everyone at the excellent AIMapViewWrapper project on GitHub which includes sample code for plotting an arc path over a set of coordinates. In that project it's being used to draw the path a plane takes including a shadow path underneath it (and other stuff such as animating a plane along that path). Should come in handy for anyone taking a stab at this.

Dealate

Answer 4

If you want to:

1. just draw arc path on map
2. just draw an image on map
3. combine arc path and image as overlay on map

So the solutions are:

1. There are MKPolyline and MKPolylineView to draw lines, MKPolygon and MKPolygonView to draw polygons, MKCircle and MKCircleView to draw circles. No one fit? Where is an arc? Oh, yes. Now the really solution: You create a custom class derived from MKOverlayPathView and override the -createPath method, in the -createPath you create an arc use CGContextAddArcToPoint or others functions you like, and associate the path you just create to the path property of MKOverlayPathView and the custom works are done. Then you add MKPolyline in the map(Yes! just MKPolyline!), Then in the -mapView:viewForOverlay: method you create the custom class take that polyline. Then, just run it, everything is runs as you wish. Magic? you can draw a MKPolyline as an arc!
2. Just an image? Use MKAnnotationView. That's done! you can do it! I believe that!
3. In my problem, I want to draw an arc with an image in the overlay. So I create a custom class conforms to the MKOverlay protocol, and a custom class derived from MKOverlayView to draw that overlay. Everything works fine but I can't draw any path on the map! I've set the lineWidth to 1,2,3,4... but it wasn't work! Ah..the solution is set the line width with MKRoadWidthAtZoomScale(zoomScale) function and you can see the path! That's done......

And some tips here:

1. Use Core Graphic to draw paths, not MapKit coordinates nor UIView coordinates!
2. In the CG functions just keep in mind the line width should be converted by this function:MKRoadWidthAtZoomScale(zoomScale)
3. Hope to help

Alcina