A basic MapView and annotation tutorial

Map viewI suppose it was inevitable that I’d end up needing to use the Mapkit on iPhone.  For a current project I’ve been required to plot a location on a map so looked at a straight forward way to achieve what I was after.  Thankfully, iPhone makes it very easy to do this.

The following tutorial takes you through creating a project from scratch, which will plot a single point from latitude and longitude coordinates and zoom to that position.

Step 1 : Create the project

Okay, so lets start by creating a new project. Fire up XCode and choose File ->New Project and choose View-based Application.  Let’s call it Map and click on Save.  When the project opens up, expand the Classes and Resources groups because we’ll be using these later. It still bugs me that XCode puts boilerplate XIB files into Resources but newly created XIB files into the same directory…. one or the other I’d say!

Before we can use the MapKit we have to add the framework to our project.  Go to the Project menu and choose Edit Active Target Map.  Under the General tab, click the + button in the bottom pane to add a new framework.  Scroll down and choose MapKit.framework and then close the window.  Easy!

Step 2 : Add the MapView and wire it up

Open up MapViewController.h.  First of all we need to import the MapKit header and then create an instance variable which we will hook up in Interface Builder.  Modify your header so it looks like this…


@interface MapViewController : UIViewController {

	MKMapView *mapView;


@property (nonatomic, retain) IBOutlet MKMapView *mapView;


Next, open up MapViewController.xib in Interface Builder. From the Library window, drag over a MapView object into your view and let it fill the whole area. Right-click drag from File’s Owner to your new MKMapView object and choose mapView.

Finally, we need to make our class the delegate for the MapView. Right-click drag from the MKMapView object back to File’s Owner and choose delegate from the popup menu. You can now save and close Interface Builder. Excellent – we’re now wired up and ready to do some coding.

Step 3 : Adding the annotation class

Probably the easiest way to add an annotation to a MapView is to create a new class which conforms to the required MKAnnotation delegate.  Go to File -> New File and choose Objective-C class.  Make it a subclass of NSObject and click Next.  Lets call the new class MapViewAnnotation.  Make sure you’re also creating the .h file too and click Finish.

Open up MapViewAnnotation.h.  We are only going to add two instance variables.  One will hold the title of the annotated point.  The other will hold the coordinates of the point.  We will also create an initialiser to set those two variables whenever we create an instance of our object.   Modify your file to look like this…


@interface MapViewAnnotation : NSObject  {

	NSString *title;
	CLLocationCoordinate2D coordinate;

@property (nonatomic, copy) NSString *title;
@property (nonatomic, readonly) CLLocationCoordinate2D coordinate;

- (id)initWithTitle:(NSString *)ttl andCoordinate:(CLLocationCoordinate2D)c2d;


Now open up MapViewAnnotation.m.  Nothing spectacular is going on in here – we are simply initialising our instance variables.  Modify your file to look like this…

#import "MapViewAnnotation.h"

@implementation MapViewAnnotation

@synthesize title, coordinate;

- (id)initWithTitle:(NSString *)ttl andCoordinate:(CLLocationCoordinate2D)c2d {
	[super init];
	title = ttl;
	coordinate = c2d;
	return self;

- (void)dealloc {
	[title release];
	[super dealloc];


That’s it for our annotation class.

Step 4 : Making it all work

At the moment, if you run your project it will display the map view but it won’t do much else. Not very exciting.  Let’s finish this and get your point plotted on that map.  While we’re at it, we should also centre in on that point so we can see it more clearly and zoom to a reasonable distance.  For the purposes of this tutorial I’m going to plot a point to Buckingham Palace, London, UK (because it’s big and obvious!).

Open up MapViewController.m.  In here we are going to add two main parts (both documented in the code below).  The first is our viewDidLoad method which will add our annotation to the mapView object.  The second is our method to zoom to the point when an annotation is added to the map (didAddAnnotationViews method).  Change your file to look like this…

#import "MapViewController.h"
#import "MapViewAnnotation.h"

@implementation MapViewController

@synthesize mapView;

// When the view loads
- (void)viewDidLoad
	// Set some coordinates for our position (Buckingham Palace!)
	CLLocationCoordinate2D location;
	location.latitude = (double) 51.501468;
	location.longitude = (double) -0.141596;
	// Add the annotation to our map view
	MapViewAnnotation *newAnnotation = [[MapViewAnnotation alloc] initWithTitle:@"Buckingham Palace" andCoordinate:location];
	[self.mapView addAnnotation:newAnnotation];
	[newAnnotation release];

// When a map annotation point is added, zoom to it (1500 range)
- (void)mapView:(MKMapView *)mv didAddAnnotationViews:(NSArray *)views
	MKAnnotationView *annotationView = [views objectAtIndex:0];
	id  mp = [annotationView annotation];
	MKCoordinateRegion region = MKCoordinateRegionMakeWithDistance([mp coordinate], 1500, 1500);
	[mv setRegion:region animated:YES];
	[mv selectAnnotation:mp animated:YES];

// Received memory warning
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];

// If the view unloads, release the map view
- (void)viewDidUnload {
	[super viewDidUnload];
	[mapView release];
	mapView = nil;

// Deallocations
- (void)dealloc {
	[mapView release];
    [super dealloc];


And that’s all there is to it.  Build and run your project and you should get a picture like the one at the start of this tutorial.  Not too tricky at all! Here’s the project file for those who just couldn’t be bothered copy / pasting!

[download id=”1″ format=”1″ autop=”false”]
(Note: You must be logged in to download the file)

One thought on “A basic MapView and annotation tutorial

  1. Pingback: 16 iPhone App Tutorials Teach You How to Create an Application

Leave a Reply