Adding GroundOverlay from KML to MKMapView with rotation

Question

I have an iOS app where I want to read a KML-file containing GroundOverlays. A GroundOverlay contains an image-href, north, south, east, west coordinates, as well as a a rotation.

I have followed this tutorial (http://www.raywenderlich.com/30001/overlay-images-and-overlay-views-with-mapkit-tutorial) for displaying the images on the map. I can successfully parse the KML and display non-rotated images correctly. The problem is, I have no idea of how to display rotated images.

To rotate myself I need to know two things: firstly, how do I rotate the image in my drawing code. This question is just about rotating in iOS. Secondly, I need to know how the KML-coordinates are affected by a rotation. Are the north, south, east and west coordinates the coordinates of the rotated or the non-rotated image?

I have searched extensively for examples on how to do this, but found nothing useful. A link to some tutorial/code that does this would be great!

The relevant parts of the KML looks like this:

<GroundOverlay>
  <Icon>
    <href>http://developers.google.com/kml/documentation/images/etna.jpg</href>
  </Icon>
  <LatLonBox>
    <north>37.91904192681665</north>
    <south>37.46543388598137</south>
    <east>15.35832653742206</east>
    <west>14.60128369746704</west>
    <rotation>-0.1556640799496235</rotation>
  </LatLonBox>
</GroundOverlay>

My drawing code (where I guess the rotation should take place):

- (void)drawMapRect:(MKMapRect)mapRect
          zoomScale:(MKZoomScale)zoomScale
          inContext:(CGContextRef)context {

    CGImageRef imageReference = self.overlayImage.CGImage;

    // TODO: rotate image by self.rotation degrees around center.
    MKMapRect theMapRect = self.overlay.boundingMapRect;
    CGRect theRect = [self rectForMapRect:theMapRect];

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

Reason Reason · Accepted Answer · 2014-04-21T00:31:51

This is how I ended up solving it. Firstly, the KML-coordinates are the coordinates of the un-rotated image, so there is nothing really that needs to be done to make them work with a rotation. Here is the completed drawMapRect:zoomScale:inContext

- (void)drawMapRect:(MKMapRect)mapRect
          zoomScale:(MKZoomScale)zoomScale
          inContext:(CGContextRef)context {

    CGImageRef imageReference = self.overlayImage.CGImage;

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

    CGContextScaleCTM(context, 1.0, -1.0);
    CGContextTranslateCTM(context, 0.0, -theRect.size.height);
    // Translate to center of image. This is done to rotate around the center, 
    // rather than the edge of the picture
    CGContextTranslateCTM(context, theRect.size.width / 2, theRect.size.height / 2);

    // _rotation is the angle from the kml-file, converted to radians.
    CGContextRotateCTM(context, _rotation);

    // Translate back after the rotation.
    CGContextTranslateCTM(context, -theRect.size.width / 2, -theRect.size.height / 2);

    CGContextDrawImage(context, theRect, imageReference);
}

It was quite a while since I wrote this code and I don't really remember more details than this, but since someone just upvoted the question, I thought I'd at least post the code where I solved it. Hope it helps! :)

Adding GroundOverlay from KML to MKMapView with rotation

1 Answers