Xamarin iOS 7 MapKit MKDirections

Greetings! In the post we’ll cover using the MKDirections class to retrieve direction related information from Apple. We’ll then use those directions to draw a route on the map. The source code can be found on GitHub

First, we need the following namespaces

using MonoTouch.MapKit;
using MonoTouch.CoreLocation;

Next, we’ll add an MKMapView instance variable, and a MPMapViewDelegate.

        private MKMapView _map;
        private MKMapViewDelegate _mapDelegate;

In the ViewController’s ViewDidLoad method we will initialize the map, the map delegate, and call a method to get directions and create a route.

        public override void ViewDidLoad()        {
            base.ViewDidLoad();

            //Init Map
            _map = new MKMapView
            {
                MapType = MKMapType.Standard,
                ShowsUserLocation = true,
                ZoomEnabled = true,
                ScrollEnabled = true
            };

            //Create new MapDelegate Instance
            _mapDelegate = new MapDelegate();

            //Add delegate to map
            _map.Delegate = _mapDelegate;

            View = _map;

            //Create Directions
            CreateRoute();
        }

The CreateRoute function is where the magic happens…

We’ll need to crate two MKPlaceMarks, one for the source and one for the destination. These are used to create two MKMapItems that are used when making the directions request.

            //Create Origin and Dest Place Marks and Map Items to use for directions
            //Start at Xamarin SF Office
            var orignPlaceMark = new MKPlacemark(new CLLocationCoordinate2D(37.797530, -122.402590), null);
            var sourceItem = new MKMapItem(orignPlaceMark);

            //End at Xamarin Cambridge Office
            var destPlaceMark = new MKPlacemark(new CLLocationCoordinate2D(42.374172, -71.120639), null);
            var destItem = new MKMapItem(destPlaceMark);

Next, we’ll need to create a request for directions using MKDirectionsRequest using the the source and dest items above, and pass these to a new instance of MKDirections.

            var request = new MKDirectionsRequest
            {
                Source = sourceItem,
                Destination = destItem,
                RequestsAlternateRoutes = true
            };

            var directions = new MKDirections(request);

Next, we need to make the call to get the directions. When the directions are returned, we’ll loop through the collections of routes and add the PolyLine from each route to our map overlay collection.

            directions.CalculateDirections((response, error) =>
            {
                if (error != null)
                {
                    Console.WriteLine(error.LocalizedDescription);
                }
                else
                {
                   //Add each Polyline from route to map as overlay
                    foreach (var route in response.Routes)
                    {
                        _map.AddOverlay(route.Polyline);
                    }
                }
            });

Remember the _mapDelegate we create earlier? This is actually a class that inherits from MKMapViewDelegate. We need to override the OverlayRenderer in order to actually draw the route on the map.

  class MapDelegate : MKMapViewDelegate
  {
        //Override OverLayRenderer to draw Polyline from directions
        public override MKOverlayRenderer OverlayRenderer(MKMapView mapView, IMKOverlay overlay)
            {
                if (overlay is MKPolyline)
                {
                    var route = (MKPolyline)overlay;
                    var renderer = new MKPolylineRenderer(route) { StrokeColor = UIColor.Blue };
                    return renderer;
                }
                return null;
            }
        }

    }

That’s it! When we put it all together we end up with the map below.

iOS 7 Directions