Tuesday, December 14, 2010

Map Kit with Annotations

Hello readers in today’s post we will see how to add annotations to the map, and in case you forgot some basics of the map kit framework you can always refer to my earlier post. 

Design Phase: The design phase is quite simple we will be showing a pin onto our map just like the once present in google map. Here’s a view at our final output in case you are getting confused.


Step 1: In order to display an annotation we have to first create a NSObject class give it an appropriate name and then add some piece of code to it, but before even doing that make sure you have added the map kit framework to your project. Coming to the coding section now.

Create a class which inherits from NSObject and save it with the name LocationwithAnnotations,






 import the map kit framework and add a protocol to your class called MKAnnotation here’s how the entire code looks like

#import <Foundation/Foundation.h>

//import the map kit header file
#import <MapKit/MapKit.h>

@interface LocationwithAnnotation : NSObject <MKAnnotation> {

}
@end

MKAnnotation is a protocol which is used to provide annotation related information in the map view.


Step 2: Select the LocationwithAnnotation.m file and add this piece of code, you can always refer the MKAnnotation in the documentation in order to get its method.

@implementation LocationwithAnnotation

- (NSString *)title
{
return @"Current Location";
}

- (NSString *)subtitle
{
return @"Here i am";
}

-(CLLocationCoordinate2D) coordinate
{
CLLocationCoordinate2D coord = {19.12,73.02};
return coord;
}
@end



Code Explanation: In the documentation for MKAnnotation protocol there are two methods and one property.

The methods are quite simple they just display the title and subtitle that will be appearing once the user hits the annotation. 

The property says that "fine you wana display an annotation then tell me the location where you want to place the annotation" that’s all and since it’s a read only property I have added my own method to it so that it knows the location where to place the annotation.

Step 3: Create a map interface by referring my earlier map kit post  and then select the the .h file of myviewController and import the LoacationwithAnnotation header file and declare its object in the .h file

#import <UIKit/UIKit.h>
#import <MapKit/MapKit.h>
#import "LocationwithAnnotation.h"

@interface myviewController : UIViewController {

MKMapView *mymapview;
LocationwithAnnotation * mylocation;
}
@end

now in the .m file of myviewController select the init method and allocate memory for the LocationwithAnnotation object.

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {
        // Custom initialization
mylocation = [[LocationwithAnnotation alloc]init];
    }
    return self;
}

now the final step is to add the annotation to the object of the MKMapView in the loadView method

[mymapview addAnnotation:mylocation];


Step 4: Carry out the basics steps to show the view into the iPhone simulator window by selecting the AppDelegate.m file and then press build and Go

Step 5: You will get the below output.



Extra Points: In the above example i have hard coded the coordinates and if you want to display the coordinates by letting the user specify the values then you can do this by adding some parameters to the init method of the NSObject class that you will be making in this case LocationwithAnnotations.


I hope that this post helped you out, Happy iCoding and have a great Day

Monday, December 13, 2010

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