Xamarin.iOS: MapView Recipe

In this article, which is the first article on Xamarin.iOS Application development series, we will see how we use the MapView control. We will be describing briefly about the MapView and talk about some common methods and properties which are very beneficial and mandatory.

Ingredients

• Visual Studio 2012 or higher / Xamarin Studio 5
• Xamarin iOS 6.4.5 or higher
• Mac OS X Yosemite(10.10) & above.

Procedure

1. Create a new application in Xamarin Studio by selecting New Solution from the Welcome screen.
   
   
   
   
2. Select iOS App from the installed templates. Now, as you can see we have a lot of options, like Single View App, Master-Detail App, Tabbed App. These are nothing but pre-defined UI screens for the ease-of-use for the developers. For this tutorial, we will select Single View App.
   
   
   
   
3. Now, you can see that the solution file is created and it contains all the required files, as shown in the figure below:
   
   
   
   
4. Now, we will open ViewController.cs from the Solution and import MapKit, CoreLocation and CoreGraphics. 

   using MapKit;
   using CoreLocation;
   using CoreGraphics;

5. Create objects of MapView, UISegmentedControl (we will be using this to toggle between map types), and CLLocationManager, in the ViewController class.

   MKMapView mapView;
   UISegmentedControl mapTypeSelection;
   CLLocationManager location = new CLLocationManager();

6. To set the title of the app in the ViewDidLoad function, just write: 

   public override void ViewDidLoad ()
   {
   base.ViewDidLoad ();
   // Perform any additional setup after loading the view, typically from a nib.
   Title = "Map View Sample";
   }

7. Now, we will add the MapView properties in the ViewDidLoad function to request user permission, to show user location and to toggle between map types. Also, add the MapView and the UISegmentedControl to the View:

   mapView = new MKMapView(View.Bounds);
   mapView.AutoresizingMask = UIViewAutoresizing.FlexibleDimensions;
   View.AddSubview(mapView);
   // Request permission to access device location
   location.RequestWhenInUseAuthorization();
   // Indicates User Location
   mapView.ShowsUserLocation = true;
   //This snippet lets you toggle between Map Types
   int typesWidth=260, typesHeight=30, distanceFromBottom=60;
   mapTypeSelection = new UISegmentedControl(new CGRect((View.Bounds.Width-typesWidth)/2, View.Bounds.Height-distanceFromBottom, typesWidth, typesHeight));
   mapTypeSelection.InsertSegment("Standard", 0, false);
   mapTypeSelection.InsertSegment("Satellite", 1, false);
   mapTypeSelection.InsertSegment("Hybrid", 2, false);
   mapTypeSelection.SelectedSegment = 0; // Standard is the default selection
   mapTypeSelection.AutoresizingMask = UIViewAutoresizing.FlexibleTopMargin;
   mapTypeSelection.ValueChanged += (s, e) => {
   switch(mapTypeSelection.SelectedSegment) {
   case 0:
   mapView.MapType = MKMapType.Standard;
   break;
   case 1:
   mapView.MapType = MKMapType.Satellite;
   break;
   case 2:
   mapView.MapType = MKMapType.Hybrid;
   break;
   }
   };
   View.AddSubview(mapTypeSelection);

8. Now, we will add the following code snippet to set the co-ordinates for the map to zoom at:

   mapView.DidUpdateUserLocation += (sender, e) => {
   if (mapView.UserLocation != null) {
   CLLocationCoordinate2D coords = mapView.UserLocation.Coordinate;
   MKCoordinateSpan span = new MKCoordinateSpan(MilesToLatitudeDegrees(2), MilesToLongitudeDegrees(2, coords.Latitude));
   mapView.Region = new MKCoordinateRegion(coords, span);
   }
   };
   if (!mapView.UserLocationVisible) {
   // User denied permission or device doesn't have GPS/location ability
   // create our location and zoom to Chicago
   CLLocationCoordinate2D coords = new CLLocationCoordinate2D(41.8781, -87.6298); // Chicago
   MKCoordinateSpan span = new MKCoordinateSpan(MilesToLatitudeDegrees(20), MilesToLongitudeDegrees(20, coords.Latitude));
   // set the coords and zoom on the map
   mapView.Region = new MKCoordinateRegion(coords, span);
   }

9. Finally, our ViewDidLoad() will look something like this:

   public override void ViewDidLoad ()
   {
   base.ViewDidLoad ();
   // Perform any additional setup after loading the view, typically from a nib.
   Title = "Map View Sample";
   mapView = new MKMapView(View.Bounds);
   mapView.AutoresizingMask = UIViewAutoresizing.FlexibleDimensions;
   View.AddSubview(mapView);
   // Request permission to access device location
   location.RequestWhenInUseAuthorization();
   // Indicates User Location
   mapView.ShowsUserLocation = true;
   //This snippet lets you toggle between Map Types
   int typesWidth=260, typesHeight=30, distanceFromBottom=60;
   mapTypeSelection = new UISegmentedControl(new CGRect((View.Bounds.Width-typesWidth)/2, View.Bounds.Height-distanceFromBottom, typesWidth, typesHeight));
   mapTypeSelection.InsertSegment("Standard", 0, false);
   mapTypeSelection.InsertSegment("Satellite", 1, false);
   mapTypeSelection.InsertSegment("Hybrid", 2, false);
   mapTypeSelection.SelectedSegment = 0; // Standard is the default selection
   mapTypeSelection.AutoresizingMask = UIViewAutoresizing.FlexibleTopMargin;
   mapTypeSelection.ValueChanged += (s, e) => {
   switch(mapTypeSelection.SelectedSegment) {
   case 0:
   mapView.MapType = MKMapType.Standard;
   break;
   case 1:
   mapView.MapType = MKMapType.Satellite;
   break;
   case 2:
   mapView.MapType = MKMapType.Hybrid;
   break;
   }
   };
   View.AddSubview(mapTypeSelection);
   mapView.DidUpdateUserLocation += (sender, e) => {
   if (mapView.UserLocation != null) {
   CLLocationCoordinate2D coords = mapView.UserLocation.Coordinate;
   MKCoordinateSpan span = new MKCoordinateSpan(MilesToLatitudeDegrees(2), MilesToLongitudeDegrees(2, coords.Latitude));
   mapView.Region = new MKCoordinateRegion(coords, span);
   }
   };
   if (!mapView.UserLocationVisible) {
   // User denied permission or device doesn't have GPS/location ability
   // create our location and zoom to Chicago
   CLLocationCoordinate2D coords = new CLLocationCoordinate2D(41.8781, -87.6298); // Chicago
   MKCoordinateSpan span = new MKCoordinateSpan(MilesToLatitudeDegrees(20), MilesToLongitudeDegrees(20, coords.Latitude));
   // set the coords and zoom on the map
   mapView.Region = new MKCoordinateRegion(coords, span);
   }
   }

10. Now, let's add the helper methods which we have used to calculate the area to show on the map:

    public double MilesToLatitudeDegrees(double miles)
    {
    double earthRadius = 3960.0; // in miles
    double radianToDegree = 180.0/Math.PI;
    return (miles/earthRadius) * radianToDegree;
    }
    public double MilesToLongitudeDegrees(double miles, double atLatitude)
    {
    double earthRadius = 3960.0; // in miles
    double degreeToRadian = Math.PI/180.0;
    double radianToDegree = 180.0/Math.PI;
    // derive the earth's radius at that point in latitude
    double radiusAtLatitude = earthRadius * Math.Cos(atLatitude * degreeToRadian);
    return (miles / radiusAtLatitude) * radianToDegree;
    }

11. Now, we run the app on the iPhone simulator of our choice (i did it on iPhone 6S) and it look likes this,
    
    

Make some beautiful apps using Xamarin.iOS and tweet your queries to @adiiaditya. If you want to fork this project, visit my Git.