In this tutorial I will be looking into the MapKit, a new API’s made available by Apple in the iOS 3.0 and later versions. The MapKit allows simple access to the map seen in the maps application. Using GoogleMaps as its engine the map kit allows for a developer to make their own custom map interface to fit their own application. Today I will be reviewing the MapView as well as the Map Annotations that can be used to highlight points of interest in a map. For this purpose I will create my own custom map view along with custom annotations and its views.
Create project in Xcode using single window application template and name it as MapViewSample. Before proceeding further we need to add mapKit and coreLocation frameworks to the application bundle. I am not digging into the details of adding the frameworks into the project because it is quite common in all applications. Now open ViewController.xib file, add a map view outlet and connect it with the associated outlet in .h file. Open ViewController.h file, import MapKit framework into it and also modify it as follows.
{
NSArray *arr;
}
@property (nonatomic, retain)IBOutlet MKMapView *mapView;
- (void)initiateStaticAnnotations;
@end
Now compile and run the code, you will get the following screenshot.
To make the round shaped corners for the map view we need to import the QuartzCore/CALayer.h header in ViewController.m file and also add the following code in viewDidLoad method of this class to get the desired effect.
mapView.layer.masksToBounds = YES;
Now run the code to see the proper corner radius effect. To add the annotations to this map view, we need to take a new class with subclass of NSObject and name it as MapAnnotation. Open MapAnnotation.h file and change it according to the following code.
@interface MapAnnotation : NSObject
{
CLLocationCoordinate2D coordinate;
NSString *subTitleText;
NSString *titleText;
}
@property (nonatomic, readonly) CLLocationCoordinate2D coordinate;
@property (readwrite, retain) NSString *titleText;
@property (readwrite, retain) NSString *subTitleText;
-(id)initWithCoordinate:(CLLocationCoordinate2D) coordinate;
- (NSString *)subTitle;
- (NSString *)title;
-(void)setTitle:(NSString*)strTitle;
-(void)setSubTitle:(NSString*)strSubTitle;
@end
Now open MapAnnotation.m file and include the below code.
@synthesize coordinate, titleText, subTitleText;
- (NSString *)subtitle{
return subTitleText;
}
- (NSString *)title{
return titleText;
}
-(void)setTitle:(NSString*)strTitle {
self.titleText = strTitle;
}
-(void)setSubTitle:(NSString*)strSubTitle {
self.subTitleText = strSubTitle;
}
-(id)initWithCoordinate:(CLLocationCoordinate2D) c{
coordinate=c;
return self;
}
@end
Now import the MapAnnotation class in ViewController.m file, add the initiateStaticAnnotations method in it and call this method from viewDidLoad method of this class. Implement initiateStaticAnnotations method in the following way.
{
CLLocationCoordinate2D location1;
location1.latitude = 32.805745;
location1.longitude = -96.811523;
MapAnnotation *addAnnotation1 = [[MapAnnotation alloc] initWithCoordinate:location1];
[addAnnotation1 setTitle:@"First annotation"];
[addAnnotation1 setSubTitle:@"3708 Brown Street, Dallas, TX"];
CLLocationCoordinate2D location2;
location2.latitude = 14.349548;
location2.longitude = -14.501953;
MapAnnotation *addAnnotation2 = [[MapAnnotation alloc] initWithCoordinate:location2];
[addAnnotation2 setTitle:@"Second annotation"];
[addAnnotation2 setSubTitle:@"Tambacounda, Senegal"];
CLLocationCoordinate2D location3;
location3.latitude = 47.338823;
location3.longitude = -120.541992;
MapAnnotation *addAnnotation3 = [[MapAnnotation alloc] initWithCoordinate:location3];
[addAnnotation3 setTitle:@"Third annotation"];
[addAnnotation3 setSubTitle:@"Wenatchee National Forest, Peshastin, WA 98847, USA"];
CLLocationCoordinate2D location4;
location4.latitude = 40.380028;
location4.longitude = -3.603516;
MapAnnotation *addAnnotation4 = [[MapAnnotation alloc] initWithCoordinate:location4];
[addAnnotation4 setTitle:@"Fourth annotation"];
[addAnnotation4 setSubTitle:@"Calle Fuentespina, 1A, 28031 Madrid, Spain"];
arr = [NSArray arrayWithObjects:addAnnotation1,addAnnotation2,addAnnotation3,addAnnotation4,nil];
[mapView addAnnotations:arr];
}
In this method I have taken 4 locations/annotations. To show these annotations in the respected places, we need to implement map view delegate method for annotations in the ViewController.m as follows.
{
MKPinAnnotationView *annView=[[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:@"MyPin"];
annView.animatesDrop=TRUE;
annView.canShowCallout = YES;
[annView setSelected:YES];
annView.pinColor = MKPinAnnotationColorRed;
annView.calloutOffset = CGPointMake(15, 15);
return annView;
}
Now build and run the code, you will see the two annotations. After tapping on one annotation you will get the following screen. Drag the map view to the left side to see the remaining two annotations and its views.
