Question

I have been looking for a good tutorial on adding an image overlay for Mapkit in C# Monotouch.

I have found many overlay examples for coloured circles or polygons. But I want to load a PNG over the top of my maps. I am coming from MonoAndroid and have done it there, but need to transfer my program across to iOS.

Even a objective C example would help, but Mono would be better.

Answer 1

I ended up downloading some native objective C code and pretty much just converting it into C#. The function names are very similar, the Xamarin API references Documentation is very helpful.

There where some tricky bumps I ran into around the app delegate, and how it is handled differently in C# to Objective C.

Here are the two hardest functions to convert and my solution:

1) The Draw functions in the map overlay class

    public override void DrawMapRect (MKMapRect mapRect, float zoomScale, CGContext ctx)
    {
        InvokeOnMainThread(
            () => 
            {
            UIImage image = UIImage.FromFile(@"indigo_eiffel_blog.png");

                DrawImgRotated(image, 0, ctx);
            }
        );
    }

    public void DrawImgRotated(UIImage image, float rotDegree, CGContext c)
    {
        c.SaveState();

        CGImage imageRef = image.CGImage; 

        //loading and setting the image
        MKMapRect theMapRect = ((MapOverlay)this.Overlay).BoundingMapRect;//MKMapRect theMapRect    = [self.overlay boundingMapRect];
        RectangleF theRect = RectForMapRect(theMapRect);

        //we need to flip and reposition the image
        c.ScaleCTM( 1.0f, -1.0f);
        c.TranslateCTM(-theRect.Width/8,-theRect.Height);

        // Proper rotation about a point
        var m = CGAffineTransform.MakeTranslation(-theRect.Width/2,-theRect.Height/2);
        m.Multiply( CGAffineTransform.MakeRotation(DegreesToRadians(rotDegree)));
        m.Multiply( CGAffineTransform.MakeTranslation(theRect.Width/2,theRect.Height/2));
        c.ConcatCTM( m );

        c.DrawImage(theRect, imageRef);

        c.RestoreState();
    }

and 2) the bounding mapRect function in my mapOverlay class overriding MKOverlay.
Yes the position is hardcoded, I am working on unit conversion atm but those are the correct coordinates to draw the image same as in the sample obejctive c code I used.

    public MKMapRect BoundingMapRect
    {
        [Export("boundingMapRect")]
        get 
        {
            var bounds = new MKMapRect(1.35928e+08, 9.23456e+07,17890.57, 26860.05);
            return bounds; 
        }

    }

The source code for the Objective C project I converted is here: https://github.com/indigotech/Blog-MKMapOverlayView

Xamarin API reference documentation: http://iosapi.xamarin.com/