64

(Using iOS 5 and Xcode 4.2)

I have an MKMapView and want to draw a circle of 1000m radius around the user location.

On the surface it would seem that implementing the mapView:viewForAnnotation: map view delegate method, and adding a custom MKAnnotationView for the users location, would be a perfect solution. It would look something like this:

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

However annotations on the map don't scale when you zoom in and out of the map.

So I tried adding an overlay (because overlays scale with the map), using the MKCircle class and setting its co-ordinates to the latest co-ordinates from my locationManger/map view delegate. However as the coordinate property of MKCircle is readonly, I'm having to remove the overlay then add a new one each time the user moves. Causing a noticeable flicker as it happens.

Is there any way to make an annotation scale seamlessly as the map view is scaled in and out? Or is there a good way to make an overlay move seamlessly with changes in the users location?

I would be very grateful for your help :)

3
  • 7
    I think a custom overlay and overlay view is what you'll need (which is what @Flink seems to be implying). However, an Apple example closer to your requirement is the LocationReminders app from WWDC 2010. If you're a registered developer, you can find it here. It custom draws a circle overlay whose size and position can change dynamically.
    – user467105
    Jan 30, 2012 at 2:23
  • Thanks for the link, sounds exactly like the example I need. Plus I am a registered developer, so that's handy :)
    – Jon Cox
    Jan 30, 2012 at 2:59
  • Link is broken, but I found this on github: github.com/master-nevi/WWDC-2010/tree/master/LocationReminders
    – foson
    Dec 30, 2017 at 23:21

8 Answers 8

81

Try a custom overlay. Add this in viewDidLoad:

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

userLocation can be obtained by storing the MKUserLocationAnnotation as a property. Then, to actually draw the circle, put this in the map view's 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;
}
5
  • move the circle whenever the userlocation changes
    – Daij-Djan
    Jun 4, 2013 at 12:11
  • how do we move the circle? we would need to create a new MKCircle every time it moves?
    – yuf
    Dec 12, 2013 at 0:59
  • Needs updating for iOS 7!
    – Hyperbole
    Mar 27, 2014 at 1:35
  • 18
    Note that MKOverlayView and MKCircleView are deprecated in iOS 7 (to @Hyperbole's point). Use MKOVerlayRenderer and MKCircleRenderer instead.
    – ericsoco
    Apr 16, 2014 at 6:50
  • 1
    You also need to use the MKMapViewDelegate protocol for this to work Sep 25, 2014 at 12:18
50

An 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
        }
    }
}
3
  • 4
    Can't return nil in mapView:rendererfForOverlay see for fix: stackoverflow.com/a/32452494/723980
    – Ryan R
    Mar 5, 2016 at 19:31
  • rendererForOverlay is replace with rendererFor
    – Guy
    Apr 3, 2017 at 10:21
  • UIColor components are between 0 and 1. You used 255 for red - wrong! Dec 3, 2018 at 13:17
25

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 so:

self.addRadiusCircle(location: CLLocation(latitude: YOUR_LAT_HERE, longitude: YOUR_LNG_HERE))
5
  • 2
    What is `self.selectedPoll"? Where does that come from
    – BlueBoy
    Aug 5, 2017 at 23:43
  • @thexande radius: 10, here 10 contains which value ? I mean in miles or meter or kilo meter. Jan 20, 2018 at 5:11
  • 10 point radius @MiteshDobareeya, this could be changed to a function param if you need a circle with dynamic radius.
    – thexande
    Mar 20, 2018 at 22:00
  • Where should I put self.addRadiusCircle this method if I have to fetch user current location and draw circle around it? May 1, 2018 at 10:21
  • you mean 1 for red value, not 255 Mar 6, 2019 at 15:06
3

Try to use the code from Apple Breadcrumb example

2
  • I'm not sure how Breadcrumb example will solve the MKCirecle movement issue.
    – user836026
    May 8, 2012 at 18:41
  • I'm not sure how to do this using crumbPath.
    – user836026
    May 8, 2012 at 19:25
2

I didn't understand benwad answer. So here is clearer answer:

It's pretty easy to add a circle. Conform to 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 implement 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, no matter the zoom level, you'll have to do something different. Like you say, in regionDidChange:animated:, get the latitudeDelta, then create a new circle (with a radius that fits into the width), remove the old one and add the new one.

Note from me: don't forget to connect mapview with your view controller delegate. Otherwise viewForOverlay won't be called.

1

All I did is, After displaying the location on the map kit called the below function in the end.

@IBOutlet weak var mapView: GMSMapView!

var cirlce: GMSCircle!

override func viewDidLoad() {

    super.viewDidLoad()
    mapView.delegate = self
    circleview(redius: 5000) 

  }

//used this func to draw the circle

 func circleview(redius:Double) {

    let  circleCenter = CLLocationCoordinate2D(latitude: 13.3450223, longitude: 74.7512519)

    cirlce = GMSCircle(position: circleCenter, radius: redius)
    cirlce.fillColor = UIColor(red: 230.0/255.0, green: 230.0/255.0, blue: 250.0/255.0, alpha:1.0)
    cirlce.strokeColor = .blue
    cirlce.strokeWidth = 2
    cirlce.map = mapView
  }
1
  • 3
    Question is asked for MKMapView. not for Google Map. Mar 12, 2019 at 10:17
0

It's easy to add a circle. Conform to MKMapViewDelegate. follow the bellow steps,,,

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;
 }
0
- (MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id<MKOverlay>)overlay

it is deprecated since iOS 4.0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.