MapKit Adding Raster Map via MKOverlay Weird Rendering Issue

Question

I have added NOAA radar images to a weather app I have. I noticed that the image was not drawing correctly on the map after some testing. It seems the corners of the image were close to correct but when you move away from the corners it skews off. Below is the relevant code.

Overlay:

@implementation FMRadarOverlay

- (id)initWithImage:(UIImage*)radarImage withLowerLeftCoordinate:(CLLocationCoordinate2D)lowerLeftCoordinate withUpperRightCoordinate:(CLLocationCoordinate2D)upperRightCoordinate{
    self.radarImage = radarImage;

    MKMapPoint lowerLeft = MKMapPointForCoordinate(lowerLeftCoordinate);
    MKMapPoint upperRight = MKMapPointForCoordinate(upperRightCoordinate);
    mapRect = MKMapRectMake(lowerLeft.x, upperRight.y, upperRight.x - lowerLeft.x, lowerLeft.y - upperRight.y);
    return self;
}

- (CLLocationCoordinate2D)coordinate{
    return MKCoordinateForMapPoint(MKMapPointMake(MKMapRectGetMidX(mapRect), MKMapRectGetMidY(mapRect)));
}

- (MKMapRect)boundingMapRect{
    return mapRect;
}

@end

Renderer:

@implementation FMRadarOverlayRenderer

- (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context {
    FMRadarOverlay *radarOverlay = (FMRadarOverlay*)self.overlay;
    CGImageRef imageReference = radarOverlay.radarImage.CGImage;

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

    CGContextScaleCTM(context, 1.0, -1.0);
    CGContextTranslateCTM(context, 0.0, -theRect.size.height);
    CGContextSetAlpha(context, 0.6);
    CGContextDrawImage(context, theRect, imageReference);
}

@end

And the an example of creating the layer:

//using url with map and drawing transparent to check accuracy of rendering
//url for radar data only is http://radar.weather.gov/Conus/RadarImg/latest_radaronly.gif   
NSURL *radarUrl = [NSURL URLWithString:@"http://radar.weather.gov/Conus/RadarImg/latest.gif"];
NSData *radarData = [NSData dataWithContentsOfURL:radarUrl];
UIImage *rawImage = [UIImage imageWithData:radarData];
FMRadarOverlay *radarOverlay = [[FMRadarOverlay alloc] initWithImage:rawImage withLowerLeftCoordinate:CLLocationCoordinate2DMake(21.652538062803, -127.620375523875420) withUpperRightCoordinate:CLLocationCoordinate2DMake(50.406626367301044, -66.517937876818)];

If you take the same images and coordinates and overlay them on google earth using a kml file they render correctly. It is like it is not compensating for the curvature of the earth or something. I have tried this with a different georeferenced raster layer it had a similar effect. Any ideas?

Example KML:

<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://earth.google.com/kml/2.0"><Document><name>NWS Radar Images</name><open>1</open><Folder>  <name>National Weather Service</name> <ScreenOverlay>  <name>National Weather Service</name>   <description>National Weather Service Doppler Radar RIDGE Imagery http://radar.weather.gov</description>   <visibility>1</visibility> <Icon>  <href>http://radar.weather.gov/ridge/graphics/nws_google.gif</href>  </Icon>  <overlayXY x="0" y="1" xunits="fraction" yunits="fraction" />  <screenXY x="0" y="1" xunits="fraction" yunits="fraction" />  <rotationXY x="0" y="0" xunits="fraction" yunits="fraction" />  <size x="0" y="0" xunits="fraction" yunits="fraction" />  </ScreenOverlay><ScreenOverlay>  <name>NOAA</name>   <description>National Oceanic and Atomospheric Administration  http://www.noaa.gov</description>   <visibility>1</visibility> <Icon>  <href>http://radar.weather.gov/ridge/graphics/noaa_google.gif</href>  </Icon>  <overlayXY x=".2" y="1" xunits="fraction" yunits="fraction" />  <screenXY x=".2" y="1" xunits="fraction" yunits="fraction" />  <rotationXY x="0" y="0" xunits="fraction" yunits="fraction" />  <size x="0" y="0" xunits="fraction" yunits="fraction" />  </ScreenOverlay></Folder><Folder><name>LATEST_RADARONLY</name><Folder><name>Mosaic</name><ScreenOverlay><name>Legend</name><visibility>1</visibility><Icon><href></href><refreshMode>onInterval</refreshMode><refreshInterval>120</refreshInterval></Icon><overlayXY x="1.0" y="0.5" xunits="fraction" yunits="fraction"/><screenXY x="1.0" y="0.5" xunits="fraction" yunits="fraction"/><rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/></ScreenOverlay><GroundOverlay><name>Mosaic</name><Icon><href>http://radar.weather.gov/ridge/Conus/RadarImg/latest.gif</href><refreshMode>onInterval</refreshMode><refreshInterval>120</refreshInterval></Icon><visibility>1</visibility><LatLonBox><north>50.406626367301044</north><south>21.652538062803</south><east>-66.517937876818</east><west>-127.620375523875420</west></LatLonBox></GroundOverlay></Folder></Folder></Document></kml>

Images of bad rendering:

Answer 1

The problem was with the images spatial projection. I ended up using a tool called gdalwarp to re project the image in mercator projection like MapKit uses. I have seen a lot of examples of ground overlays in MapKit and all of them overlook this important information. I think most geo raster maps are projected for applications like Google Earth or GIS applications.