Skip to content

TransitApp/SVPulsingAnnotationView

Repository files navigation

SVPulsingAnnotationView

SVPulsingAnnotationView is a customizable Core Graphics replica of Apple's MKUserLocationView.

SVPulsingAnnotationView

Installation

CocoaPods

I'm not a big fan of CocoaPods, so tend to not keep it updated. If you really want to use SVPulsingAnnotationView with CocoaPods, I suggest you use pod 'SVPulsingAnnotationView', :head to pull from the master branch directly. I'm usually careful about what I push there and is the version I use myself in all my projects.

Manually

  • Drag the SVPulsingAnnotationView/SVPulsingAnnotationView folder into your project.
  • Add the QuartzCore and MapKit frameworks to your project.

Usage

(see sample Xcode project in /Demo)

You use SVPulsingAnnotationView just like any other MKAnnotationView:

- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation {
    if([annotation isKindOfClass:[MyAnnotationClass class]]) {
        static NSString *identifier = @"currentLocation";
        SVPulsingAnnotationView *pulsingView = (SVPulsingAnnotationView *)[self.mapView dequeueReusableAnnotationViewWithIdentifier:identifier];

        if(pulsingView == nil) {
            pulsingView = [[SVPulsingAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:identifier];
            pulsingView.annotationColor = [UIColor colorWithRed:0.678431 green:0 blue:0 alpha:1];
        }

        pulsingView.canShowCallout = YES;
        return pulsingView;
    }

    return nil;
}

Customization

SVPulsingAnnotationView can be customized with the following properties:

@property (nonatomic, strong) UIColor *annotationColor; // default is same as MKUserLocationView
@property (nonatomic, strong) UIColor *pulseColor; // default is same as annotationColor
@property (nonatomic, strong) UIImage *image; // default is nil, will use annotationColor as tintColor

@property (nonatomic, readwrite) NSTimeInterval pulseAnimationDuration; // default is 1s
@property (nonatomic, readwrite) NSTimeInterval outerPulseAnimationDuration; // default is 3s
@property (nonatomic, readwrite) NSTimeInterval delayBetweenPulseCycles; // default is 1s

Under the Hood

Both the annotation dot and halo ring are drawn using Core Graphics exclusively, therefore making customization possible. The halo ring animation is an authentic copy of Apple's original animation, figured out by introspecting MKUserLocationView.

The halo ring animation consists of a CAAnimationGroup encapsulating 3 distinct animations taking care of the opacity, scale, and the halo image itself. Like the original MKUserLocationView implementation, the animation switches between 3 distinct sizes of the halo ring image (drawn programmatically using haloImageWithRadius:) for crispier rendering.

For more juicy details, head over to my Recreating MKUserLocationView blog post.

Credits

SVPulsingAnnotationView is brought to you by Sam Vermette and contributors to the project. If you have feature suggestions or bug reports, feel free to help out by sending pull requests or by creating new issues. If you're using SVPulsingAnnotationView in your project, attribution would be nice.

Hat tip to Nick Farina for sharing the process of creating his UICalloutView replica.