I’ve been working on an app that needed only the most basic map presentation and was looking for some straightforward information about how best to implement this.

Most of the information I found was way overboard for what I was wanting, and also there wasn’t a lot of information about it – it could be my searches but I really couldn’t find all that much.

My requirements were :

Present a simple map of a set location, so people could find it and be able to visit.

I came across several tutorials that I looked into, that had some great information: icodeblog the iCode Blog had a great tutorial with video and slides to accompany, and it’s around an hour to watch it but you’ll want to stop the video to implement what they are teaching you.

The one I finally used for reference and ideas was technobuffalo I modified it to suit what I was after, and this post will go through the basics of how to get the MapKit working in a really simple way.

 

Let’s do it!

In order to get the map to work we need to use the MapKit Framework. In Xcode 4 you can add it by clicking on your project, and make sure your target is selected as shown in the image below.

Adding the Framework

Once you have them both selected, you then need to look at the tabs along the top of that screen, showing Summary | Info | Build Settings | Build Phases | Build Rules. Select Build Phases, and expand the “Link Binary With Libraries”.

Then select the + icon, and type MapKit, which should bring up the MapKit framework that we need, so select that when it’s there.

Making a new class file: MyAnnotation.h

We are going to make a class file so you will need to add a file to your project. In the new file dialog we are going to select Cocoa Touch, and UIViewController Subclass. Name the file MyAnnotation.

Now where ever you want this map  to apear you need to add some code to your files.

Adding the Map View to the xib

So you need to go to the xib file where you want this map view to be, and add our Map View there.

Link it all up as usual and add the required code to get that to work, so in the .h file of where you have added this Map View you will be adding something similar to the following:

MKMapView *myMapView;

(I will show the code together later in the post.)

Code in our @class file

Now you will need to go to that MyAnnotation file we made earlier.

The MyAnnotation.h file will need the following code in it:

 

//

//  MyAnnotation.h

//  Shandy Hall

//

//  Created by Christine Morris on 11/09/2011.

//  Copyright (c) 2011 200ml. All rights reserved.

//

 

#import <UIKit/UIKit.h>

#import <Foundation/Foundation.h>

#import <MapKit/MKAnnotation.h>

 

@interface MyAnnotation : UIViewController <MKAnnotation> {

CLLocationCoordinate2D coordinate;

NSString *title;

NSString *subtitle;

 

}

@property (nonatomic, assign) CLLocationCoordinate2D coordinate;

@property (nonatomic, copy) NSString *title;

@property (nonatomic, copy) NSString *subtitle;

 

@end

 

 

So if we have a look at the code, we are starting by pulling in that MapKit file by using #import,  and then also it needs adding as <MKAnnotation>, don’t forget to add that. We will add a pin to this map to show our location and on that pin, when the user taps it we can define a title and subtitle for it. Then go to the .m file and @synthesize and deallocate.

 

#import “MyAnnotation.h”

 

@implementation MyAnnotation

 

@synthesize coordinate;

@synthesize title;

@synthesize subtitle;

 

 

Code for the file where our Map View is

Now go to the file where your Map View is and we need to add some code to get this beauty working. What we are going to do is add our coordinates for our location. You need to add the class we created, so add @class MyAnnotation in the file, and #import the “MyAnnotation.h” file.

 

#import “MyAnnotation.h”

@class MyAnnotation;

 

You then need to have a name for your region, I’ve called mine Shandy as that is the area I am looking at.

 

[mapKitViewNew setMapType:MKMapTypeHybrid];

[mapKitViewNew setZoomEnabled:YES];

[mapKitViewNew setScrollEnabled:YES];

MKCoordinateRegion Shandy = { {0.0, 0.0}, { 0.0, 0.0} };

// defining the region

Shandy.center.latitude = 54.189942;

Shandy.center.longitude = -1.190003;

//Set Zoom level using Span

Shandy.span.latitudeDelta = 0.09f;

Shandy.span.longitudeDelta = 0.09f;

[mapKitViewNew setRegion:Shandy animated:YES];

 

Then creating the pin, we decide on where our exact location is:

 

MKCoordinateRegion MuseumLocation =  { {0.0, 0.0}, { 0.0, 0.0} };

MuseumLocation.center.latitude = 54.1886;

MuseumLocation.center.longitude = -1.1874;

 

and we add the annotation for the pin:

 

MyAnnotation *Museum = [[MyAnnotation alloc] init] ;

Museum.title = @”Shandy Hall”;

Museum.subtitle =@”Coxwold, Yorkshire”;

Museum.coordinate = MuseumLocation.center;

[myMapKit addAnnotation:Museum];

[myMapKit setRegion:Shandy animated:YES];

 

Modifying the pin on the map

There are then some other things we can add to just make it a little bit more fabulous:

Here we are adding details to change the pin, and animate it dropping in.

 

– (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation {

MKPinAnnotationView *pinView =nil;

 

if(annotation !=mapKitViewNew.userLocation) {

static NSString *defaultPinID =@”com.christinemorris.pin”;

pinView = (MKPinAnnotationView *)[mapKitViewNew dequeueReusableAnnotationViewWithIdentifier:defaultPinID];

if(pinView ==nil)

pinView = [[[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:defaultPinID] autorelease];

pinView.canShowCallout = YES;

pinView.animatesDrop = YES;

pinView.pinColor = MKPinAnnotationColorRed;

}

 

pinView.canShowCallout = YES;

pinView.animatesDrop = YES;

 

return pinView;

 

}

 

That’s all

Then you should be testing your app and seeing if the view is working for you. I took a few tries to get the amount of zoom just right so you may want to play around with that a little bit.