Add an Overlay to a Map

PDF for offline use
Sample Code:
Related Articles:
Related SDKs:

Let us know how you feel about this

Translation Quality


0/250

This recipe shows how to add an overlay to a map.

Recipe

An overlay lets you ‘draw’ over a map. To add an overlay to a MKMapView:

  1. Start with an existing MKMapView or review the Displaying a Location recipe.
  1. Declare class-level variables for the overlay and its renderer:
MKCircle circleOverlay;
MKCircleRenderer circleRenderer;
  1. Implement MKMapView.OverlayRenderer to provide a renderer for the overlay:
mapView.OverlayRenderer = (m, o) => {
    if(circleRenderer == null) {
        circleRenderer = new MKCircleRenderer(o as MKCircle);
        circleRenderer.FillColor = UIColor.Purple;
        circleRenderer.Alpha = 0.5f;
    }
    return circleRenderer;
};
  1. Create an overlay, in this case a circle positioned near the Pyramids of Giza, and add it to the map:
var coords = new CLLocationCoordinate2D(29.976111, 31.132778); //giza
circleOverlay = MKCircle.Circle (coords, 200);
mapView.AddOverlay (circleOverlay);

Additional Information

The OverlayRenderer method must be assigned to prior to adding the MKOverlay to the MKMapView. If this is not done, the overlay will not appear until the map is moved or scaled in some way.

The MilesToLatitudeDegrees and MilesToLongitudeDegrees helper methods can be found in the Displaying a Location recipe.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.