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

6 comments:

  1. with out adding mkpoint annotation in this code.


    we are not getting any pin on mapview.

    we can see only mapview with specified co ordinates.


    is it right?

    ReplyDelete
  2. hi ravi,

    how to replace images with annotation.could you please post.

    ReplyDelete
    Replies
    1. - (MKAnnotationView *)mapView:(MKMapView *)mapview viewForAnnotation:(id )annotation
      {
      NSLog(@"nslog is");
      if ([annotation isKindOfClass:[MKUserLocation class]])
      return nil;
      static NSString* AnnotationIdentifier = @"AnnotationIdentifier";
      MKAnnotationView *annotationView = [mapView_m dequeueReusableAnnotationViewWithIdentifier:AnnotationIdentifier];
      if(annotationView)
      return annotationView;
      else
      {
      MKAnnotationView *annotationView = [[MKAnnotationView alloc] initWithAnnotation:annotation
      reuseIdentifier:AnnotationIdentifier];
      annotationView.canShowCallout = YES;
      annotationView.image = [UIImage imageNamed:@"map-pin-2.png"];
      UIButton* rightButton = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
      [rightButton addTarget:self action:@selector(myShowDetailsMethod:) forControlEvents:UIControlEventTouchUpInside];
      [rightButton setTitle:annotation.title forState:UIControlStateNormal];
      annotationView.rightCalloutAccessoryView = rightButton;
      annotationView.canShowCallout = YES;
      annotationView.draggable = YES;
      return annotationView;
      }
      return nil;
      }

      Delete
    2. Just place this code at the end of all functions just put before @.
      Replace mapView_m with your map view
      Happy coding
      :)

      Delete
  3. That was easy. i have been struggling through this process but your post made it easy to catch it up. Thank you for sharing it.

    ReplyDelete