Thursday, April 19, 2012

Map Kit Framework

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



view my next post in order to display annotations in the map 

i hope this post helped you, Happy iCoding and have a great Day

No comments:

Post a Comment