How to add a circle with a desired radius around an MKPointAnnotation?

Question

Created Oct ’17

Replies 4

Boosts 0

Views 11k

Participants 3

For my app, I need to have a MapKit annotation have a circle around it with a desired radius, much like the margin of error circle that you can find in Find My Friends. I want to be able to call a function that will draw a circle around the point with a radius in meters (or feet, whichever works best). It would be nice to have the circle filled in instead of just the outline of a circle. Here is my code right now (without any attempts to create a circle):

import UIKit
import MapKit
class ViewController: UIViewController {

    @IBOutlet weak var map: MKMapView!
   
    override func viewDidLoad() {
        super.viewDidLoad()
       
        let span: MKCoordinateSpan = MKCoordinateSpanMake(0.3, 0.3)
        let location: CLLocationCoordinate2D = CLLocationCoordinate2DMake(57.734274, -124.654364)
       
        let region: MKCoordinateRegion = MKCoordinateRegionMake(location, span)
        map.setRegion(region, animated: true)
       
        let annotation = MKPointAnnotation()
       
        annotation.coordinate = location
        annotation.title = "Random Area"
       
        map.addAnnotation(annotation)
       
    }
}

Thanks to anyone who can help.

Answered by OOPer in 268056022

You'd better check the official documentation and work with Custom Annotation View:

Defining a Custom Annotation View

Creating Annotation Views from Your Delegate Object

Boost

Answer 1

OOPer OP

Oct ’17

Please show any of your attempts.

0

Answer 2

Adalex3 OP

Oct ’17

Well, the only thing I've tried (other than searching the web intensively, of course) to no avail is putting in this simple function:

func showCircle(coordinate: CLLocationCoordinate2D, radius: CLLocationDistance, mapView: MKMapView) {
        let circle = MKCircle(center: coordinate, radius: radius)
        mapView.add(circle)
    }

And then calling it here, right after I add the annotation to the map:

showCircle(coordinate: annotation.coordinate, radius: 1000, mapView: map)

1

Answer 3

OOPer OP

Oct ’17

Accepted Answer

You'd better check the official documentation and work with Custom Annotation View:

Defining a Custom Annotation View

Creating Annotation Views from Your Delegate Object

0

Answer 4

TheCD OP

Oct ’17

See Steps for Adding an Overlay to the Map in the guide OOPer mentioned. You already have finished steps 1 and 4.

For steps 2 and 3, you need to implement the mapView(_:rendererFor:) delegate method and return a MKCircleRenderer. The renderer allows you to set the fill color, stroke color, etc.

0