MKOverlayView to be rotated

Question

I have an overlay of route to be placed over a map. I have to adjust its rotation so that it overlaps exactly with the underlying map view. How can I achieve this? I have found the angle to rotate. How can I rotate my overlay view? Far till now I have added the overlay but can't rotate using transforms. What I noticed is that when I change the angle, the image is not rotating, instead it slides along x axis(side ways).

Here is the code that I tried

- (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context
{
    NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"routeImage" ofType:@"png"];
    UIImage *image = [[UIImage alloc] initWithContentsOfFile:imagePath];

    MKMapRect theMapRect = self.overlay.boundingMapRect;
    CGRect theRect = [self rectForMapRect:theMapRect];

    CGAffineTransform transform = CGAffineTransformMakeRotation((-35.88) / 180.0 * M_PI);
    [self setTransform:transform];

    CGContextSaveGState(context);

    CGContextScaleCTM(context, 1.0, -1.0);
    CGContextTranslateCTM(context, 0.0, -theRect.size.height);
    CGContextDrawImage(context, theRect,image.CGImage);
    CGContextRestoreGState(context);
}

This is what I get

enter image description here

I have a workaround in which I manually rotate the image using GIMP and place it. But I need it to be customized.

This is the image transformed using GIMP and when placed on map as overlay

and this is when I rotate Context using transform [note: while rotating the context the image is rotated but is not at the exact location See image. Also the image breaks on zooming]

This is what I did

      //Hayl-Road-Final.png is the actual image without transformation using GIMP

        UIImage *image   = [[UIImage imageNamed:@"Hayl-Road-Final.png"] retain];
        CGImageRef imageReference = image.CGImage;


        MKMapRect theMapRect    = [self.overlay boundingMapRect];
        CGRect theRect           = [self rectForMapRect:theMapRect];


        // We need to flip and reposition the image here
        CGContextScaleCTM(ctx, 1.0, -1.0);
        CGContextTranslateCTM(ctx, 0.0, -theRect.size.height);

        CGContextRotateCTM(ctx,-35.88);
        //drawing the image to the context
        CGContextDrawImage(ctx, theRect, imageReference);

How is your initialization code or whats the view "self" you are applying the transformation to? Did you try rotating the context? — Quxflux, Jun 22 '13 at 13:12
@Lukas: Its the overlay view which is referenced as self. I even tried rotating the context. What happened was that while zooming in the image breaks. Is there any other way to achieve this? I feel like there is a way to do, but all the ways I tried I could either achieve a rotation with image breaking on zooming or exact location. Not both together. — Meera, Jun 23 '13 at 08:37
@MeeraJPai could you present a version that has the image rotated the way you want it to be rotated? i understand you may have to use your workaround to get what you want in this one instance. — john.k.doe, Jun 23 '13 at 17:35
@MeeraJPai, i was interested in a version of your *screenshot* that has the image rotated, though the version of the *code* that has the image rotated is additionally helpful. — john.k.doe, Jun 25 '13 at 20:08
@john.k.doe: I have included the images and the code. Is there any way by which I can place(overlap) image over the map using any transforms?? Now I have just done the working one with the help of GIMP. — Meera, Jun 26 '13 at 04:59
have you tried the answers at this SO question? http://stackoverflow.com/questions/1895818/how-do-i-use-cgaffinetransformmakescale-and-rotation-at-once — john.k.doe, Jun 26 '13 at 06:57
Do you want to rotate it on touch or apply a static rotation? — David Karlsson, Aug 13 '13 at 13:45

score 0 · Answer 1 · answered Aug 13 '13 at 13:46

Try adding this method:

- (UIImage *) rotate: (UIImage *) image angle:(double)
{
    //double angle = 20;
    CGSize s = {image.size.width, image.size.height};
    UIGraphicsBeginImageContext(s);
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextTranslateCTM(ctx, 0,image.size.height);
    CGContextScaleCTM(ctx, 1.0, -1.0);

    CGContextRotateCTM(ctx, 2*M_PI*angle/360);
    CGContextDrawImage(ctx,CGRectMake(0,0,image.size.width, image.size.height),image.CGImage);
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;

}

score 0 · Answer 2 · answered Nov 14 '16 at 01:58

From your code, you change order of two line. It will be ok:

CGContextScaleCTM(ctx, 1.0, -1.0);
CGContextRotateCTM(ctx,-35.88);
CGContextTranslateCTM(ctx, 0.0, -theRect.size.height);
CGContextDrawImage(ctx, theRect, imageReference);

It is correct with me, please try

MKOverlayView to be rotated

2 Answers2