Rotate Annotation Custom Image

Question

I am clearly not getting this. I'm trying to work out how to rotate a custom image of map annotations. i.e. multiple icons pointing different directions. I have loop'ed over a whole bunch of airplane data and I want to simply show the direction the plane is heading.

Review the code that I have managed to piece together to get at least half of it working and provide a suggestive idea on how to turn the image based on a variable.

Abstract View of the loop'ed data

             NSMutableArray *locations = [[NSMutableArray alloc]init];
             CLLocationCoordinate2D location;

             MKPointAnnotation *myAnn;
             myAnn = [[MKPointAnnotation alloc]init];
             location.latitude = nLatitudeFloat;
             location.longitude = nLongitudeFloat;
             myAnn.coordinate = location;
             myAnn.title = nRealname;

             //Add the Annotation object to the list so when the map is presented all points are listed on the map.
             [locations addObject:myAnn];

             //[self.mapView setUserTrackingMode:MKUserTrackingModeFollow animated:YES];
             [self.mapView addAnnotations:locations];

Update of the annotation:

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

    // Handle any custom annotations.
    if ([annotation isKindOfClass:[MKPointAnnotation class]])
    {
        // Try to dequeue an existing pin view first.
        MKAnnotationView *pinView = (MKAnnotationView*)[mapView dequeueReusableAnnotationViewWithIdentifier:@"CustomPinAnnotationView"];

        if (!pinView)
        {
            // If an existing pin view was not available, create one.
            pinView = [[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:@"CustomPinAnnotationView"];
            pinView.canShowCallout = YES;

            pinView.image = [UIImage imageNamed:@"airplane21.png"] ;
            pinView.calloutOffset = CGPointMake(0, 32);
            pinView.transform = CGAffineTransformMakeRotation(30);    <------AT THE MOMENT I HAVE JUST HARD CODED THIS TO SEE IF IT WORKS. IT ROTATES THE ENTIRE ANNOTATION

            // Add a detail disclosure button to the callout.
            //UIButton* rightButton = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
            //pinView.rightCalloutAccessoryView = rightButton;

            // Add an image to the left callout.
            UIImageView *iconView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"airplane21.png"]];
            pinView.leftCalloutAccessoryView = iconView;
            iconView.transform = CGAffineTransformMakeRotation(30);  
        } else {
            pinView.annotation = annotation;
        }
        return pinView;
    }
    return nil;
}

Any ideas?

I have seen this by the way. I just wasn't confident to know if it would be suitable or not. Rotate annotation image on MKMapView

Answer 1

I had the same problem and I have a solution that seems to work.

You need to first make a custom annotation that can hold the data that you want (ex. coordinates, your plane heading). When you loop through your data make sure you're using that custom annotation. For example

CustomAnnotation* annotation = [[CustomAnnotation alloc] init];
annotation.coordinates = ...
annotation.bearing = ...

Then in your viewForAnnotation method, you can get that info by doing something like

if ([annotation isKindOfClass:[CustomAnnotation class]]) {
    CustomAnnotation* myAnn = (CustomAnnotation*)annotation;
    double bearing = myAnn.bearing; // or whatever it's called

    ...
}

Hope this helped.

Edit: For rotating your image, I found the following code snippet somewhere. It works but it pixellates your image a little bit.

@interface UIImage (RotationMethods)
- (UIImage *)imageRotatedByDegrees:(CGFloat)degrees;
@end

@implementation UIImage (RotationMethods)

static CGFloat DegreesToRadians(CGFloat degrees) {return degrees * M_PI / 180;};

- (UIImage *)imageRotatedByDegrees:(CGFloat)degrees
{
    // calculate the size of the rotated view's containing box for our drawing space
    UIView *rotatedViewBox = [[UIView alloc] initWithFrame:CGRectMake(0,0,self.size.width, self.size.height)];
    CGAffineTransform t = CGAffineTransformMakeRotation(DegreesToRadians(degrees));
    rotatedViewBox.transform = t;
    CGSize rotatedSize = rotatedViewBox.frame.size;

    // Create the bitmap context
    //UIGraphicsBeginImageContext(rotatedSize); // For iOS < 4.0
    UIGraphicsBeginImageContextWithOptions(rotatedSize, NO, 0.0);
    CGContextRef bitmap = UIGraphicsGetCurrentContext();

    // Move the origin to the middle of the image so we will rotate and scale around the center.
    CGContextTranslateCTM(bitmap, rotatedSize.width/2, rotatedSize.height/2);

    // Rotate the image context
    CGContextRotateCTM(bitmap, DegreesToRadians(degrees));

    // Now, draw the rotated/scaled image into the context
    CGContextScaleCTM(bitmap, 1.0, -1.0);
    CGContextDrawImage(bitmap, CGRectMake(-self.size.width / 2, -self.size.height / 2, self.size.width, self.size.height), [self CGImage]);

    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

@end

Stick that in your .m, and on any UIImage you can now do [someUIImage imageRotatedByDegrees:yourDegrees];

So now in your viewForAnnotation method you can do something like

UIImage* image = [[UIImage imageNamed:@"yourImage.png"] imageRotatedByDegrees:degrees];
annView.image = image;