Map Kit Framework in iPhone Tutorial

Hi Friends,

In this post we will see how to make use of the map kit framework and display a simple map.

This tutorial is divided into two parts

1) Display a simple map

2) Display location as per coordinates (latitude and longitude)

Part 1 Display a simple map

Design Phase: For this application you must first add the MapKit framework into your project and then make use of this framework in order to display a simple map which will show the users current location, here’s a look at our final output

Step 1: Open Xcode and create a window base application and save your project with an appropriate name now add UIViewCOntroller subclass file to your project with the name myviewController. After adding the UIViewController subclass file you will be having two new files into your class group with the name myviewController.h and myviewController.m. 

Before we proceed further you must add the mapkit framework into your application and below given are the steps to do so

Steps to add MapKit Framework

       1.        Expand the target section present in the groups and files and their you must be seeing a file with the same name as your project. Select that file right click it and select get info the entire scenario looks like this

      

        2.     Now a window must have poped up which says target and this window will have a add button present in the bottom of the screen the purpose of this add button is to add the frameworks required by the user, so now we require the mapkit framework so select the mapkit framework from the selection list and click on the add button

        

        3.     Bravo you have successfully added a framework into your project.

Step 2: Once you have added the mapKit framework its time to use that framework, select the .h file of myviewController and add this piece of code.

#import <UIKit/UIKit.h>

//adding the mapkit framework

#import <MapKit/MapKit.h>

@interface myviewController : UIViewController {

        

         //declaring the object of MKMapView class

         MKMapView *mymapView;

}

@end

Code Explanation: MKMapView is a class which will give you the map interface you can use this class in order to manipulate the map contents from your application, you can also specify the size and area that you want to display, add annotations etc

Step 3: After following step 2 select the myviewController.m file and look for its loadView method but before that uncomment the init and loadView method as they will be commented by default. Now into the loadView method add this piece of code and you are done

- (void)loadView {

         [super loadView];

        

         //setting the frame of the mapVIew

         mymapView = [[MKMapView alloc]initWithFrame:self.view.bounds];

        

         //setting the map type

         mymapView.mapType = MKMapTypeStandard;

        

         //Display the users current location

         mymapView.showsUserLocation = YES;

         //adding the map view to the self view

         [self.view addSubview:mymapView];

}

Code Explanation: Just added frame to the MKMapVIew object and selected the mapType whether it will be standard hybrid or satellite and finally added the MKMapVIew object into the self view.

Step4: Go to the AppDelegate.m file of your project and add the myviewController view into the iPhone window with the help of the code given below

#import "MapKitDemoAppDelegate.h"

#import "myviewController.h"

@implementation MapKitDemoAppDelegate

@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch

        

         myviewController * myVC = [[myviewController alloc]init];

         [window addSubview:myVC.view];

         [window makeKeyAndVisible];

}

Step 5: Press Build and Go and get the below output

Part 2 Display the location as per the coordinates (latitude & longitude).

In order to display the location as per the coordinates you have to add this piece of code before adding the MKMapView object to the self view

//A structure that contains  geographical coordinate

         CLLocationCoordinate2D cords = {19.12,73.02};

        

         //A structure that defines the area spanned by a map region in short area to be  zoomed

         MKCoordinateSpan span = {0.3,0.3};

        

         //A structure that defines which portion of the map to display

         MKCoordinateRegion region = {cords,span};

        

         //add the region to be displayed in the map

         [mymapView setRegion:region];

Code Explanation: Given above are some structures which are explained via comments the parameters they take are nothing but the latitude and longitude of the area that you want to display in the map view, now after adding the above code in the loadView method your entire code should look like this

- (void)loadView {

 [super loadView];

 //setting the frame of the mapVIew

 mymapView = [[MKMapView alloc]initWithFrame:self.view.bounds];

 //setting the map type

 mymapView.mapType = MKMapTypeStandard;

 //Display the users current location

 mymapView.showsUserLocation = YES;

 //A structure that contains a geographical coordinate

 CLLocationCoordinate2D cords = {19.12,73.02};

 //A structure that defines the area spanned by a map region. In short area zoomed

 MKCoordinateSpan span = {0.3,0.3};

 //A structure that defines which portion of the map to display

 MKCoordinateRegion region = {cords,span};

 //add the region to be displayed in the map

 [mymapView setRegion:region];

 //adding the map view to the self view

 [self.view addSubview:mymapView];

}

Now when you press build and go you will get the below output

You are good to go....