Adding Custom Overlays to iOS MapKit Framework


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:

#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 = 33.874809; = -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];

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):


@class mapViewController;

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

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


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.

12 thoughts on “Adding Custom Overlays to iOS MapKit Framework”

  1. Pingback: Creating Custom Overlays for iOS MapKit Framework – Eric Binnion

  2. Hello, I need your help.

    I’ve got the Map Tiles set up and everything. It works great opening in Google Maps, everything is spot on.

    However, when I import the tiles into your project. The tiles are set all the way at the zoomed out level, not where it is suppose to be. The software I used to render the tiles, rendered them in sizes 0-4.

    Will that be okay?

  3. @Eric, this project shows iOS map only in iOS 6. (as, i get one legal button on map and clicking on it shows @Apple Inc.) Does this mean the overlay hasn’t added or something else? But when i comment the [mapView addOverlay:overlay]; line , it shows close view of current location while on uncomment it shows zoom zoom out view. And in both the cases it shows legal symbol on map(which implies it is iOS map)

  4. Hello Eric,

    Actually i want to rotate a MKMapPolyLine around the user location in MapKit framework. can you please assist me on that.


  5. I do not think the title of the article is correct – in the project only ONE custom overlay is added not SEVERAL overlayS.
    The reason I found this page and read it that I was looking for how to handle multiple custom overlays.
    I mean, how is it possible to have several MKOverlays and only one MKOverlayView ?
    For example, Google Maps has zIndex – position of the overlay in the overlays stack,
    and there is no such think in MapKit.
    How do I know which overlay is drawn first?

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.