Adding Custom Overlays to iOS MapKit Framework

Series

This is part 2 of a 2-part series on how to create custom overlays for the MapKit framework on iOS. View part 1 of this series here.

Creating Custom Overlay in iOS

Everything we have done up to this point has been to create the tiles we will use in our project. Now that we have created those tiles, we need to add them to our project.

For this, we will use a sample project from Apple called Tile Map. I have a working iOS project that uses custom overlay at Github. We are going to copy a few classes from this project, so go ahead and grab the zip-ball and open it in Xcode.

You will need to copy the following files into your own project:

• TileOverlay.h
• TileOverlay.m
• TileOverlayView.h
• TileOVerlayView.m

Be sure to select the box to “Copy items into destination group’s folder.” At this point I am going to assume that you have already created a View Controller for your map. If not, go ahead and create one. In the .m (implementation) file of your map View Controller, we are going to import the TileOverlay.h and TileOverlayView.h files. Your map View Controller should now look something like this:

[code lang=text]
#import "mapViewController.h"
#import "TileOverlay.h"
#import "TileOverlayView.h"

@implementation mapViewController

– (void)viewDidLoad
{
NSString *tileDirectory = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"Tiles"];
TileOverlay *overlay = [[TileOverlay alloc] initWithTileDirectory:tileDirectory];
[map addOverlay:overlay];

map.mapType = MKMapTypeSatellite;
MKCoordinateRegion CSC;

// Defines the center point of the map
CSC.center.latitude = 33.874809;
CSC.center.longitude = -98.521129;

// Defines the view,able area of the map. Lower numbers zoom in!
CSC.span.latitudeDelta = .003;
CSC.span.longitudeDelta = .003;
[map setRegion:CSC animated:YES];
}

– (MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id )overlay
{
TileOverlayView *view = [[TileOverlayView alloc] initWithOverlay:overlay];
view.tileAlpha = 0.6;
return [view autorelease];
}
[/code]

The only other change that we have to make at this point is to add some code to our app delegate file. In the delegate header file you will need to add some code (highlighted below):

[code lang=text]
#import

@class mapViewController;

@interface msuAppDelegate : NSObject {
UIWindow *window;
mapViewController *viewController;
}

@property (strong, nonatomic) UIWindow *window;
@property (strong,nonatomic) mapViewController *viewController;

@end
[/code]

We still don’t have tiles in our project at this point, so go ahead and create a directory on your Desktop named “Tiles”. Copy all of the tile sub-directories and the tilemapresource.xml into the “Tiles” folder that you created on the desktop. Now, drag the “Tiles” folder into your iOS project. Be sure to select “Copy items into destinations group’s folder” and “Create folder references for any added folders.”

The last step is to connect your Mk Map View in storyboard to delegate. Once we do that, the Custom Overlay for MapKit should be working. Click the Mk Map View in storyboard, use control + click, then drag, to the Map View Controller Icon. View the screenshots below.

At this point go ahead and run your program to see if everything is working. If you have any problems, please leave me a comment below, and I will modify this tutorial. You can reference the iMustangs project �on Github for an example of integrating custom overlays into an iOS project.