Draw a circle with a radius of 1000 m around the user's location in MKMapView

Question

(Using iOS 5 and Xcode 4.2)

I have MKMapView and you want to draw a circle with a radius of 1000 m around the user's location.

At first glance, it seems that the implementation of mapView: viewForAnnotation: a method for displaying the map view and adding a custom MKAnnotationView for the location of users would be an ideal solution. It will look something like this:

- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>)annotation { // If it the user location, return my custom MKAnnotationView. if ([annotation isKindOfClass:[MKUserLocation class]]) { return myCustomAnnotationView; } else { return nil; } } 

However, annotations on the map do not scale when you enlarge or delete the map.

So, I tried to add an overlay (because I superimposed the scale using the map) using the MKCircle class and setting its coordinates to the last coordinates from my delegate locationManger / map view. However, since the MKCircle coordinate property is read-only, I need to remove the overlay, and then add a new one every time the user moves. It causes a noticeable flicker, as it happens.

Is there a way to make the annotation scale easy, since scaling and zooming the map? Or is there a good way to make a smooth transition with changes in the location of users?

I would really appreciate your help :)

Answer 1

Try a custom overlay. Add this to viewDidLoad:

 MKCircle *circle = [MKCircle circleWithCenterCoordinate:userLocation.coordinate radius:1000]; [map addOverlay:circle]; 

userLocation can be obtained by saving MKUserLocationAnnotation as a property. Then, to draw a circle, put it in the map view delegate:

 - (MKOverlayRenderer *)mapView:(MKMapView *)map viewForOverlay:(id <MKOverlay>)overlay { MKCircleRenderer *circleView = [[MKCircleRenderer alloc] initWithOverlay:overlay]; circleView.strokeColor = [UIColor redColor]; circleView.fillColor = [[UIColor redColor] colorWithAlphaComponent:0.4]; return circleView; } 

Answer 2

Updated version for iOS 8.0 using Swift.

 import Foundation import MapKit class MapViewController: UIViewController, CLLocationManagerDelegate, MKMapViewDelegate{ var locationManager: CLLocationManager = CLLocationManager() @IBOutlet var mapView: MKMapView! override func viewDidLoad() { super.viewDidLoad() // We use a predefined location var location = CLLocation(latitude: 46.7667 as CLLocationDegrees, longitude: 23.58 as CLLocationDegrees) addRadiusCircle(location) } func addRadiusCircle(location: CLLocation){ self.mapView.delegate = self var circle = MKCircle(centerCoordinate: location.coordinate, radius: 10000 as CLLocationDistance) self.mapView.addOverlay(circle) } func mapView(mapView: MKMapView!, rendererForOverlay overlay: MKOverlay!) -> MKOverlayRenderer! { if overlay is MKCircle { var circle = MKCircleRenderer(overlay: overlay) circle.strokeColor = UIColor.redColor() circle.fillColor = UIColor(red: 255, green: 0, blue: 0, alpha: 0.1) circle.lineWidth = 1 return circle } else { return nil } } } 

Answer 3

Swift 3 / Xcode 8 here:

 func addRadiusCircle(location: CLLocation){ if let poll = self.selectedPoll { self.mapView.delegate = self let circle = MKCircle(center: location.coordinate, radius: 10) self.mapView.add(circle) } } func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer { if overlay is MKCircle { let circle = MKCircleRenderer(overlay: overlay) circle.strokeColor = UIColor.red circle.fillColor = UIColor(red: 255, green: 0, blue: 0, alpha: 0.1) circle.lineWidth = 1 return circle } else { return MKPolylineRenderer() } } 

Then call like this:

 self.addRadiusCircle(location: CLLocation(latitude: YOUR_LAT_HERE, longitude: YOUR_LNG_HERE)) 

Answer 4

Try using the code from Apple Breadcrumb Example

Answer 5

I did not understand the answer of benwad. So here is a clearer answer :

Pretty easy to add a circle. Compliant with MKMapViewDelegate

 @interface MyViewController : UIViewController <MKMapViewDelegate> @property (weak, nonatomic) IBOutlet MKMapView *mapView; @end 

In viewDidLoad, create a circle annotation and add it to the map:

 CLLocationCoordinate2D center = {39.0, -74.00}; // Add an overlay MKCircle *circle = [MKCircle circleWithCenterCoordinate:center radius:150000]; [self.mapView addOverlay:circle]; 

Then do mapView: viewForOverlay: to return the view.

 - (MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id<MKOverlay>)overlay { MKCircleView *circleView = [[MKCircleView alloc] initWithOverlay:overlay]; [circleView setFillColor:[UIColor redColor]]; [circleView setStrokeColor:[UIColor blackColor]]; [circleView setAlpha:0.5f]; return circleView; } 

But if you want the circle to always be the same size, regardless of the zoom level, you will have to do something else. As you say, in regionDidChange: animated :, get latitudeDelta, then create a new circle (with a radius that fits in width), delete the old one and add a new one.

Note: Remember to associate mapview with the delegate of the view controller. Otherwise, viewForOverlay will not be called.

Answer 6

Easy to add a circle. Corresponds to MKMapViewDelegate. follow the steps below ,,

Step 1:

  CLLocationCoordinate2D center= {self.locationManager.location.coordinate.latitude, self.locationManager.location.coordinate.longitude}; // Add an overlay MKCircle *circle= [MKCircle circleWithCenterCoordinate:center radius: 20000];//your distance like 20000(like meters) [myMapView addOverlay:circle]; 

Step 2:

  - (MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id<MKOverlay>)overlay { MKCircleView *C_View = [[MKCircleView alloc] initWithOverlay:overlay]; [C_View setFillColor:[UIColor lightGrayColor]]; [C_View setStrokeColor:[UIColor blackColor]]; [C_View setAlpha:0.5f]; return C_View; } 

Answer 7

 - (MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id<MKOverlay>)overlay 

it's deprecated since iOS 4.0

Answer 8

Using MKCircleRenderer , you can add it as follows.

Declare class level variables for overlay and its renderer:

 MKCircle circleOverlay; MKCircleRenderer circleRenderer; 

MKMapView.OverlayRenderer to provide an overlay renderer:

 mapView.OverlayRenderer = (m, o) => { if(circleRenderer == null) { circleRenderer = new MKCircleRenderer(o as MKCircle); circleRenderer.FillColor = UIColor.Green; circleRenderer.Alpha = 0.5f; } return circleRenderer; }; 

Create an overlay, in this case a circle located near the user's location (latitude, longitude) and add it to the map:

 var coords = new CLLocationCoordinate2D(39.11, 30.13); //user location circleOverlay = MKCircle.Circle (coords, 1000); mapView.AddOverlay (circleOverlay);