iPhone MapKit: Custom MKPolygonView with image draws upside down

Question

Hi, does anybody know what to do with this problem: my image in a custom MKPolygonView is flipped upside down?

The idea (this is working OK already) is having an class "SnowmapsOverlayView" that extends "MKPolygonView", that displays a image. This image has a default location & size on the map (acts as a GroundOverlay in the Google Maps web API). This is all working fine, but the image is displayed upside down. I've tryed the following options, but with no result:

http://stackoverflow.com/questions/506622/cgcontextdrawimage-draws-image-upside-down-when-passed-uiimage-cgimage

Thanks for any help or suggestions!

My code:

#import <MapKit/MapKit.h>

@interface SnowmapsOverlayView : MKPolygonView
{
}

@end

-----------------        

#import "SnowmapsOverlayView.h"

@implementation SnowmapsOverlayView

-(id)initWithPolygon:(MKPolygon *)polygon
{
    self = [super initWithPolygon:polygon];

    return self;    
}

-(void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context
{
    UIImage *image = [UIImage imageNamed:@"snowmap.png"];

    //This should do the trick, but is doesn't.. maybe a problem with the "context"?
    //CGRect imageRect = CGRectMake(0, 0, image.size.width, image.size.height);
    //CGContextTranslateCTM(context, 0, image.size.height);
    //CGContextScaleCTM(context, 1.0, -1.0);

    CGRect overallCGRect = [self rectForMapRect:self.overlay.boundingMapRect];
    CGContextDrawImage(context, overallCGRect, image.CGImage);
}

-(BOOL)canDrawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale
{
    return YES;
}

Answer 1

Have you tried subclassing MKOverlayView instead of MKPolygonView? The polygon class may do something weird to its coordinate system.

Answer 2

Hi samkass, thanks for responding. That doesn't do the trick.. any other ideas?

I'am this far now:

UIImage *image = [UIImage imageNamed:@"snowmap.png"];

// Get the overlay bounding rectangle.
MKMapRect  theMapRect = [self.overlay boundingMapRect];

// Clip the context to the bounding rectangle.
CGContextAddRect(context, theRect);
CGContextClip(context);

CGContextTranslateCTM(context, 0, theRect.size.height);
CGContextScaleCTM(context, 1.0, -1.0);

// Draw.
CGContextDrawImage(context, theRect, image.CGImage);

This draws the image the right way up, but the image is only drawn halfway and not exactly on the right coordinates.

Answer 3

Fixed! This is the code that gets the job done:

-(void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context
{
    UIImage *image = [UIImage imageNamed:@"snowmap.png"];
    MKMapRect theMapRect = [self.overlay boundingMapRect];
    CGRect theRect = [self rectForMapRect:theMapRect];

    UIGraphicsPushContext(context);
    [image drawInRect:theRect blendMode:kCGBlendModeNormal alpha:1.0];
    UIGraphicsPopContext();
}